@react-financial-charts/coordinates/lib/MouseCoordinateX.js

Coordinates for react-financial-charts

import * as React from "react";
import { isNotDefined, getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
import { drawOnCanvas } from "./EdgeCoordinateV3";
const defaultCustomX = (props, moreProps) => {
    const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
    const { snapX } = props;
    const x = snapX ? xScale(xAccessor(currentItem)) : mouseXY[0];
    const { displayXAccessor } = moreProps;
    const { displayFormat } = props;
    const coordinate = snapX ? displayFormat(displayXAccessor(currentItem)) : displayFormat(xScale.invert(x));
    return { x, coordinate };
};
export class MouseCoordinateX extends React.Component {
    constructor() {
        super(...arguments);
        this.drawOnCanvas = (ctx, moreProps) => {
            const props = this.helper(this.props, moreProps);
            if (props === null) {
                return;
            }
            drawOnCanvas(ctx, props);
        };
        this.helper = (props, moreProps) => {
            const { show, currentItem, chartConfig: { height }, } = moreProps;
            if (isNotDefined(currentItem)) {
                return null;
            }
            const { customX, orient, at, rectRadius, rectWidth, rectHeight, stroke, strokeOpacity, strokeWidth } = props;
            const { fill, opacity, fitToText, fontFamily, fontSize, textFill } = props;
            const edgeAt = at === "bottom" ? height : 0;
            const { x, coordinate } = customX(props, moreProps);
            const type = "vertical";
            const y1 = 0;
            const y2 = height;
            const hideLine = true;
            const coordinateProps = {
                coordinate,
                fitToText,
                show,
                type,
                orient,
                edgeAt,
                hideLine,
                fill,
                opacity,
                fontFamily,
                fontSize,
                textFill,
                stroke,
                strokeOpacity,
                strokeWidth,
                rectWidth,
                rectHeight,
                rectRadius,
                arrowWidth: 0,
                x1: x,
                x2: x,
                y1,
                y2,
            };
            return coordinateProps;
        };
    }
    render() {
        return (React.createElement(GenericChartComponent, { clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan", "drag"] }));
    }
}
MouseCoordinateX.defaultProps = {
    at: "bottom",
    customX: defaultCustomX,
    fill: "#4C525E",
    fitToText: true,
    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
    fontSize: 13,
    opacity: 1,
    orient: "bottom",
    rectWidth: 80,
    rectHeight: 20,
    snapX: true,
    strokeOpacity: 1,
    strokeWidth: 1,
    textFill: "#FFFFFF",
    yAxisPad: 0,
};
//# sourceMappingURL=MouseCoordinateX.js.map