@react-financial-charts/interactive/lib/components/InteractiveText.js

Interactive features for react-financial-charts

import * as React from "react";
import { getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
export class InteractiveText extends React.Component {
    constructor() {
        super(...arguments);
        this.calculateTextWidth = true;
        this.isHover = (moreProps) => {
            const { onHover } = this.props;
            if (onHover !== undefined && this.textWidth !== undefined && !this.calculateTextWidth) {
                const { rect } = this.helper(moreProps, this.textWidth);
                const { mouseXY: [x, y], } = moreProps;
                if (x >= rect.x && y >= rect.y && x <= rect.x + rect.width && y <= rect.y + rect.height) {
                    return true;
                }
            }
            return false;
        };
        this.drawOnCanvas = (ctx, moreProps) => {
            var _a;
            const { bgFillStyle, bgStrokeWidth, bgStroke, textFill, fontFamily, fontSize, fontStyle, fontWeight, text } = this.props;
            if (this.calculateTextWidth) {
                ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
                const { width } = ctx.measureText(text);
                this.textWidth = width;
                this.calculateTextWidth = false;
            }
            const { selected } = this.props;
            const { x, y, rect } = this.helper(moreProps, (_a = this.textWidth) !== null && _a !== void 0 ? _a : 0);
            ctx.fillStyle = bgFillStyle;
            ctx.beginPath();
            ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
            if (selected) {
                ctx.strokeStyle = bgStroke;
                ctx.lineWidth = bgStrokeWidth;
                ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
            }
            ctx.fillStyle = textFill;
            ctx.textBaseline = "middle";
            ctx.textAlign = "center";
            ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
            ctx.beginPath();
            ctx.fillText(text, x, y);
        };
        this.helper = (moreProps, textWidth) => {
            const { position, fontSize } = this.props;
            const { xScale, chartConfig: { yScale }, } = moreProps;
            const [xValue, yValue] = position;
            const x = xScale(xValue);
            const y = yScale(yValue);
            const rect = {
                x: x - textWidth / 2 - fontSize,
                y: y - fontSize,
                width: textWidth + fontSize * 2,
                height: fontSize * 2,
            };
            return {
                x,
                y,
                rect,
            };
        };
    }
    componentDidUpdate(previousProps) {
        this.calculateTextWidth =
            previousProps.text !== this.props.text ||
                previousProps.fontStyle !== this.props.fontStyle ||
                previousProps.fontWeight !== this.props.fontWeight ||
                previousProps.fontSize !== this.props.fontSize ||
                previousProps.fontFamily !== this.props.fontFamily;
    }
    render() {
        const { selected, interactiveCursorClass } = this.props;
        const { onHover, onUnHover } = this.props;
        const { onDragStart, onDrag, onDragComplete } = this.props;
        return (React.createElement(GenericChartComponent, { isHover: this.isHover, canvasToDraw: getMouseCanvas, canvasDraw: this.drawOnCanvas, interactiveCursorClass: interactiveCursorClass, selected: selected, onDragStart: onDragStart, onDrag: onDrag, onDragComplete: onDragComplete, onHover: onHover, onUnHover: onUnHover, drawOn: ["mousemove", "mouseleave", "pan", "drag"] }));
    }
}
InteractiveText.defaultProps = {
    type: "SD",
    fontWeight: "normal",
    tolerance: 4,
    selected: false,
};
//# sourceMappingURL=InteractiveText.js.map