react-financial-charts/lib/interactive/components/HoverTextNearMouse.js

React charts specific to finance.

import * as React from "react";
import GenericChartComponent from "../../GenericChartComponent";
import { isDefined } from "../../utils";
const PADDING = 10;
const MIN_WIDTH = PADDING;
export class HoverTextNearMouse extends React.Component {
    constructor(props) {
        super(props);
        this.renderSVG = (moreProps) => {
            const { fontFamily, fontSize, fill, bgFill, bgOpacity, } = this.props;
            const textMetaData = helper(Object.assign(Object.assign({}, this.props), { bgWidth: this.getBgWidth(), bgHeight: this.getBgHeight() }), moreProps);
            if (textMetaData !== undefined && isDefined(textMetaData)) {
                const { rect, text } = textMetaData;
                return (React.createElement("g", null,
                    React.createElement("rect", Object.assign({ fill: bgFill, fillOpacity: bgOpacity, stroke: bgFill }, rect)),
                    React.createElement("text", { ref: this.saveNode, fontSize: fontSize, fontFamily: fontFamily, textAnchor: "start", alignmentBaseline: "central", fill: fill, x: text.x, y: text.y }, text.text)));
            }
        };
        this.getBgHeight = () => {
            const { bgHeight } = this.props;
            const { textHeight } = this.state;
            if (bgHeight !== "auto") {
                return bgHeight;
            }
            else if (textHeight !== undefined) {
                return textHeight + PADDING;
            }
            else {
                return MIN_WIDTH;
            }
        };
        this.getBgWidth = () => {
            const { bgWidth } = this.props;
            const { textWidth } = this.state;
            if (bgWidth !== "auto") {
                return bgWidth;
            }
            else if (textWidth !== undefined) {
                return textWidth + PADDING;
            }
            else {
                return MIN_WIDTH;
            }
        };
        this.updateTextSize = () => {
            const { bgWidth, bgHeight } = this.props;
            if (bgWidth === "auto" || bgHeight === "auto") {
                const textNode = this.textNode;
                if (textNode) {
                    const { width, height } = textNode.getBBox();
                    if (this.state.textWidth !== width || this.state.textHeight !== height) {
                        this.setState({
                            textWidth: width,
                            textHeight: height,
                        });
                    }
                }
            }
        };
        this.saveNode = (node) => {
            this.textNode = node;
        };
        this.state = {
            textWidth: undefined,
            textHeight: undefined,
        };
    }
    componentDidMount() {
        this.updateTextSize();
    }
    componentDidUpdate() {
        this.updateTextSize();
    }
    render() {
        const { text } = this.props;
        if (text) {
            return (React.createElement(GenericChartComponent, { svgDraw: this.renderSVG, drawOn: ["mousemove"] }));
        }
        else {
            return null;
        }
    }
}
HoverTextNearMouse.defaultProps = {
    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
    fontSize: 12,
    fill: "#000000",
    bgFill: "#FA9325",
    bgOpacity: 0.5,
};
function helper(props, moreProps) {
    const { show, bgWidth, bgHeight, } = props;
    const { mouseXY, chartConfig: { height, width }, show: mouseInsideCanvas, } = moreProps;
    if (show && mouseInsideCanvas) {
        const [x, y] = mouseXY;
        const cx = x < width / 2
            ? x + PADDING
            : x - bgWidth - PADDING;
        const cy = y < height / 2
            ? y + PADDING
            : y - bgHeight - PADDING;
        const rect = {
            x: cx,
            y: cy,
            width: bgWidth,
            height: bgHeight,
        };
        const text = {
            text: props.text,
            x: cx + PADDING / 2,
            y: cy + bgHeight / 2,
        };
        return {
            rect,
            text,
        };
    }
}
//# sourceMappingURL=HoverTextNearMouse.js.map