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

Interactive features for react-financial-charts

import * as React from "react";
import { drawOnCanvas } from "@react-financial-charts/coordinates/lib/EdgeCoordinateV3";
import { getYCoordinate } from "@react-financial-charts/coordinates/lib/MouseCoordinateY";
import { getStrokeDasharrayCanvas, getMouseCanvas, GenericChartComponent, } from "@react-financial-charts/core";
export class InteractiveYCoordinate extends React.Component {
    constructor() {
        super(...arguments);
        this.width = 0;
        this.drawOnCanvas = (ctx, moreProps) => {
            const { bgFillStyle, textFill, fontFamily, fontSize, fontStyle, fontWeight, strokeStyle, strokeWidth, strokeDasharray, text, textBox, edge, selected, hovering, } = this.props;
            const values = this.helper(moreProps);
            if (values == null) {
                return;
            }
            const { x1, x2, y, rect } = values;
            ctx.strokeStyle = strokeStyle;
            ctx.beginPath();
            if (selected || hovering) {
                ctx.lineWidth = strokeWidth + 1;
            }
            else {
                ctx.lineWidth = strokeWidth;
            }
            ctx.textBaseline = "middle";
            ctx.textAlign = "start";
            ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
            this.width =
                textBox.padding.left +
                    ctx.measureText(text).width +
                    textBox.padding.right +
                    textBox.closeIcon.padding.left +
                    textBox.closeIcon.width +
                    textBox.closeIcon.padding.right;
            ctx.setLineDash(getStrokeDasharrayCanvas(strokeDasharray));
            ctx.moveTo(x1, y);
            ctx.lineTo(rect.x, y);
            ctx.moveTo(rect.x + this.width, y);
            ctx.lineTo(x2, y);
            ctx.stroke();
            ctx.setLineDash([]);
            ctx.fillStyle = bgFillStyle;
            ctx.fillRect(rect.x, rect.y, this.width, rect.height);
            ctx.strokeRect(rect.x, rect.y, this.width, rect.height);
            ctx.fillStyle = textFill;
            ctx.beginPath();
            ctx.fillText(text, rect.x + 10, y);
            const newEdge = Object.assign(Object.assign({}, edge), { textFill,
                fontFamily,
                fontSize });
            // @ts-ignore
            const yValue = edge.displayFormat(this.props.yValue);
            const yCoord = getYCoordinate(y, yValue, newEdge, moreProps);
            drawOnCanvas(ctx, yCoord);
        };
        this.isHover = (moreProps) => {
            const { onHover } = this.props;
            if (onHover !== undefined) {
                const values = this.helper(moreProps);
                if (values == null) {
                    return false;
                }
                const { x1, x2, y, rect } = values;
                const { mouseXY: [mouseX, mouseY], } = moreProps;
                if (mouseX >= rect.x &&
                    mouseX <= rect.x + this.width &&
                    mouseY >= rect.y &&
                    mouseY <= rect.y + rect.height) {
                    return true;
                }
                if (x1 <= mouseX && x2 >= mouseX && Math.abs(mouseY - y) < 4) {
                    return true;
                }
            }
            return false;
        };
        this.helper = (moreProps) => {
            const { yValue, textBox } = this.props;
            const { chartConfig: { width, yScale, height }, } = moreProps;
            const y = Math.round(yScale(yValue));
            if (y >= 0 && y <= height) {
                const rect = {
                    x: textBox.left,
                    y: y - textBox.height / 2,
                    height: textBox.height,
                };
                return {
                    x1: 0,
                    x2: width,
                    y,
                    rect,
                };
            }
        };
    }
    render() {
        const { interactiveCursorClass } = this.props;
        const { onHover, onUnHover } = this.props;
        const { onDragStart, onDrag, onDragComplete } = this.props;
        return (React.createElement(GenericChartComponent, { clip: false, isHover: this.isHover, canvasToDraw: getMouseCanvas, canvasDraw: this.drawOnCanvas, interactiveCursorClass: interactiveCursorClass, enableDragOnHover: true, onDragStart: onDragStart, onDrag: onDrag, onDragComplete: onDragComplete, onHover: onHover, onUnHover: onUnHover, drawOn: ["mousemove", "mouseleave", "pan", "drag"] }));
    }
}
InteractiveYCoordinate.defaultProps = {
    fontWeight: "normal",
    strokeWidth: 1,
    tolerance: 4,
    selected: false,
    hovering: false,
};
//# sourceMappingURL=InteractiveYCoordinate.js.map