@tradingaction/coordinates 2.0.0

package/lib/MouseCoordinateXV2.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+interface MouseCoordinateXV2Props {
+    readonly at?: "bottom" | "top";
+    readonly bg: {
+        readonly fill: string | ((moreProps: any, ctx: CanvasRenderingContext2D) => string);
+        readonly stroke: string | ((moreProps: any, ctx: CanvasRenderingContext2D) => string);
+        readonly strokeWidth: number | ((moreProps: any) => number);
+        readonly padding: {
+            left: number;
+            right: number;
+            top: number;
+            bottom: number;
+        };
+    };
+    readonly drawCoordinate: (ctx: CanvasRenderingContext2D, shape: any, props: any, moreProps: any) => void;
+    readonly displayFormat: (value: number) => string;
+    readonly dx: number;
+    readonly dy: number;
+    readonly orient?: "bottom" | "top";
+    readonly text: {
+        readonly fontStyle: string;
+        readonly fontWeight: string;
+        readonly fontFamily: string;
+        readonly fontSize: number;
+        readonly fill: string | ((moreProps: any, ctx: CanvasRenderingContext2D) => string);
+    };
+    readonly xPosition: (props: MouseCoordinateXV2Props, moreProps: any) => number;
+}
+export declare class MouseCoordinateXV2 extends React.Component<MouseCoordinateXV2Props> {
+    static defaultProps: {
+        xPosition: typeof defaultXPosition;
+        drawCoordinate: typeof defaultDrawCoordinate;
+        at: string;
+        orient: string;
+        text: {
+            fontStyle: string;
+            fontWeight: string;
+            fontFamily: string;
+            fontSize: number;
+            fill: string;
+        };
+        bg: {
+            fill: string;
+            stroke: string;
+            strokeWidth: number;
+            padding: {
+                left: number;
+                right: number;
+                top: number;
+                bottom: number;
+            };
+        };
+        dx: number;
+        dy: number;
+    };
+    render(): JSX.Element;
+    private readonly drawOnCanvas;
+}
+declare function defaultXPosition(props: MouseCoordinateXV2Props, moreProps: any): any;
+declare function defaultDrawCoordinate(ctx: CanvasRenderingContext2D, shape: any, props: MouseCoordinateXV2Props, moreProps: any): void;
+export {};

package/lib/MouseCoordinateXV2.js

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+export class MouseCoordinateXV2 extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.drawOnCanvas = (ctx, moreProps) => {
+            const { show, currentItem } = moreProps;
+            const { drawCoordinate } = this.props;
+            if (show && currentItem != null) {
+                const shape = getXCoordinateInfo(ctx, this.props, moreProps);
+                drawCoordinate(ctx, shape, this.props, moreProps);
+            }
+        };
+    }
+    render() {
+        return (React.createElement(GenericChartComponent, { clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan", "drag"] }));
+    }
+}
+MouseCoordinateXV2.defaultProps = {
+    xPosition: defaultXPosition,
+    drawCoordinate: defaultDrawCoordinate,
+    at: "bottom",
+    orient: "bottom",
+    text: {
+        fontStyle: "",
+        fontWeight: "",
+        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 13,
+        fill: "rgb(35, 35, 35)",
+    },
+    bg: {
+        fill: "rgb(255, 255, 255)",
+        stroke: "rgb(35, 35, 35)",
+        strokeWidth: 1,
+        padding: {
+            left: 7,
+            right: 7,
+            top: 4,
+            bottom: 4,
+        },
+    },
+    dx: 7,
+    dy: 7,
+};
+function defaultXPosition(props, moreProps) {
+    const { currentItem, xAccessor } = moreProps;
+    return xAccessor(currentItem);
+}
+function getXCoordinateInfo(ctx, props, moreProps) {
+    const { at, displayFormat, text, xPosition } = props;
+    const xValue = xPosition(props, moreProps);
+    const { xScale, chartConfig: { height }, } = moreProps;
+    ctx.font = `${text.fontStyle} ${text.fontWeight} ${text.fontSize}px ${text.fontFamily}`;
+    const t = displayFormat(xValue);
+    const textWidth = ctx.measureText(t).width;
+    const y = at === "bottom" ? height : 0;
+    const x = Math.round(xScale(xValue));
+    return {
+        x,
+        y,
+        textWidth,
+        text: t,
+    };
+}
+function defaultDrawCoordinate(ctx, shape, props, moreProps) {
+    const { x, y, textWidth, text } = shape;
+    const { orient, dx, dy, bg: { padding, fill, stroke, strokeWidth }, text: { fontSize, fill: textFill }, } = props;
+    ctx.textAlign = "center";
+    const sign = orient === "top" ? -1 : 1;
+    const halfWidth = Math.round(textWidth / 2 + padding.right);
+    const height = Math.round(fontSize + padding.top + padding.bottom);
+    ctx.strokeStyle = typeof stroke === "function" ? stroke(moreProps, ctx) : stroke;
+    ctx.fillStyle = typeof fill === "function" ? fill(moreProps, ctx) : fill;
+    ctx.lineWidth = typeof strokeWidth === "function" ? strokeWidth(moreProps) : strokeWidth;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + dx, y + sign * dy);
+    ctx.lineTo(x + halfWidth, y + sign * dy);
+    ctx.lineTo(x + halfWidth, y + sign * (dy + height));
+    ctx.lineTo(x - halfWidth, y + sign * (dy + height));
+    ctx.lineTo(x - halfWidth, y + sign * dy);
+    ctx.lineTo(x - dx, y + sign * dy);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.fill();
+    ctx.beginPath();
+    ctx.fillStyle = typeof textFill === "function" ? textFill(moreProps, ctx) : textFill;
+    ctx.textBaseline = orient === "top" ? "alphabetic" : "hanging";
+    const pad = orient === "top" ? padding.bottom : padding.top;
+    ctx.fillText(text, x, y + sign * (dy + pad + 2));
+}
+//# sourceMappingURL=MouseCoordinateXV2.js.map

package/lib/MouseCoordinateXV2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MouseCoordinateXV2.js","sourceRoot":"","sources":["../src/MouseCoordinateXV2.tsx"],"names":[],"mappings":"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"}

package/lib/MouseCoordinateY.d.ts

@@ -0,0 +1,68 @@
+import * as React from "react";
+export interface MouseCoordinateYProps {
+    readonly arrowWidth?: number;
+    readonly at?: "left" | "right";
+    readonly displayFormat: (value: number) => string;
+    readonly dx?: number;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fill?: string;
+    readonly fitToText?: boolean;
+    readonly opacity?: number;
+    readonly orient?: "left" | "right";
+    readonly rectWidth?: number;
+    readonly rectHeight?: number;
+    readonly stroke?: string;
+    readonly strokeOpacity?: number;
+    readonly strokeWidth?: number;
+    readonly textFill?: string;
+    readonly yAccessor?: (data: any) => number | undefined;
+    readonly yAxisPad?: number;
+}
+export declare class MouseCoordinateY extends React.Component<MouseCoordinateYProps> {
+    static defaultProps: {
+        arrowWidth: number;
+        at: string;
+        dx: number;
+        fill: string;
+        fitToText: boolean;
+        fontFamily: string;
+        fontSize: number;
+        opacity: number;
+        orient: string;
+        rectWidth: number;
+        rectHeight: number;
+        strokeOpacity: number;
+        strokeWidth: number;
+        textFill: string;
+        yAxisPad: number;
+    };
+    render(): JSX.Element;
+    private readonly drawOnCanvas;
+    private readonly helper;
+}
+export declare function getYCoordinate(y: number, coordinate: string, props: any, moreProps: any): {
+    coordinate: string;
+    show: boolean;
+    fitToText: any;
+    type: string;
+    orient: any;
+    edgeAt: any;
+    hideLine: boolean;
+    fill: any;
+    opacity: any;
+    fontFamily: any;
+    fontSize: any;
+    textFill: any;
+    stroke: any;
+    strokeOpacity: any;
+    strokeWidth: any;
+    rectWidth: any;
+    rectHeight: any;
+    arrowWidth: any;
+    dx: any;
+    x1: number;
+    x2: any;
+    y1: number;
+    y2: number;
+};

package/lib/MouseCoordinateY.js

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { getMouseCanvas, GenericChartComponent, isNotDefined } from "@tradingaction/core";
+import { drawOnCanvas } from "./EdgeCoordinateV3";
+export class MouseCoordinateY extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.drawOnCanvas = (ctx, moreProps) => {
+            const props = this.helper(this.props, moreProps);
+            if (props === undefined) {
+                return;
+            }
+            drawOnCanvas(ctx, props);
+        };
+        this.helper = (props, moreProps) => {
+            const { chartConfig: { yScale }, chartId, currentItem, currentCharts, mouseXY, show, } = moreProps;
+            if (!show) {
+                return undefined;
+            }
+            if (isNotDefined(mouseXY)) {
+                return undefined;
+            }
+            if (currentCharts.indexOf(chartId) < 0) {
+                return undefined;
+            }
+            const { displayFormat, yAccessor } = props;
+            if (yAccessor && !currentItem) {
+                return undefined;
+            }
+            const y = yAccessor ? yScale(yAccessor(currentItem)) : mouseXY[1];
+            const coordinate = displayFormat(yScale.invert(y));
+            return getYCoordinate(y, coordinate, props, moreProps);
+        };
+    }
+    render() {
+        return (React.createElement(GenericChartComponent, { clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan", "drag"] }));
+    }
+}
+MouseCoordinateY.defaultProps = {
+    arrowWidth: 0,
+    at: "right",
+    dx: 0,
+    fill: "#4C525E",
+    fitToText: false,
+    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+    fontSize: 13,
+    opacity: 1,
+    orient: "right",
+    rectWidth: 50,
+    rectHeight: 20,
+    strokeOpacity: 1,
+    strokeWidth: 1,
+    textFill: "#FFFFFF",
+    yAxisPad: 0,
+};
+export function getYCoordinate(y, coordinate, props, moreProps) {
+    const { width } = moreProps;
+    const { orient, at, rectWidth, rectHeight, dx, stroke, strokeOpacity, strokeWidth } = props;
+    const { fill, opacity, fitToText, fontFamily, fontSize, textFill, arrowWidth } = props;
+    const x1 = 0;
+    const x2 = width;
+    const edgeAt = at === "right" ? width : 0;
+    const type = "horizontal";
+    const hideLine = true;
+    const coordinateProps = {
+        coordinate,
+        show: true,
+        fitToText,
+        type,
+        orient,
+        edgeAt,
+        hideLine,
+        fill,
+        opacity,
+        fontFamily,
+        fontSize,
+        textFill,
+        stroke,
+        strokeOpacity,
+        strokeWidth,
+        rectWidth,
+        rectHeight,
+        arrowWidth,
+        dx,
+        x1,
+        x2,
+        y1: y,
+        y2: y,
+    };
+    return coordinateProps;
+}
+//# sourceMappingURL=MouseCoordinateY.js.map

package/lib/MouseCoordinateY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MouseCoordinateY.js","sourceRoot":"","sources":["../src/MouseCoordinateY.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAuBlD,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,SAAgC;IAA5E;;QA8BqB,iBAAY,GAAG,CAAC,GAA6B,EAAE,SAAc,EAAE,EAAE;YAC9E,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;YACjD,IAAI,KAAK,KAAK,SAAS,EAAE;gBACrB,OAAO;aACV;YAED,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC7B,CAAC,CAAC;QAEe,WAAM,GAAG,CAAC,KAA4B,EAAE,SAAc,EAAE,EAAE;YACvE,MAAM,EACF,WAAW,EAAE,EAAE,MAAM,EAAE,EACvB,OAAO,EACP,WAAW,EACX,aAAa,EACb,OAAO,EACP,IAAI,GACP,GAAG,SAAS,CAAC;YAEd,IAAI,CAAC,IAAI,EAAE;gBACP,OAAO,SAAS,CAAC;aACpB;YAED,IAAI,YAAY,CAAC,OAAO,CAAC,EAAE;gBACvB,OAAO,SAAS,CAAC;aACpB;YAED,IAAI,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gBACpC,OAAO,SAAS,CAAC;aACpB;YAED,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;YAE3C,IAAI,SAAS,IAAI,CAAC,WAAW,EAAE;gBAC3B,OAAO,SAAS,CAAC;aACpB;YAED,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YAElE,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YAEnD,OAAO,cAAc,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;QAC3D,CAAC,CAAC;IACN,CAAC;IAtDU,MAAM;QACT,OAAO,CACH,oBAAC,qBAAqB,IAClB,IAAI,EAAE,KAAK,EACX,UAAU,EAAE,IAAI,CAAC,YAAY,EAC7B,YAAY,EAAE,cAAc,EAC5B,MAAM,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,GACtC,CACL,CAAC;IACN,CAAC;;AA3Ba,6BAAY,GAAG;IACzB,UAAU,EAAE,CAAC;IACb,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,CAAC;IACL,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,wEAAwE;IACpF,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,OAAO;IACf,SAAS,EAAE,EAAE;IACb,UAAU,EAAE,EAAE;IACd,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,CAAC;IACd,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,CAAC;CACd,CAAC;AA0DN,MAAM,UAAU,cAAc,CAAC,CAAS,EAAE,UAAkB,EAAE,KAAU,EAAE,SAAc;IACpF,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;IAE5B,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC5F,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAEvF,MAAM,EAAE,GAAG,CAAC,CAAC;IACb,MAAM,EAAE,GAAG,KAAK,CAAC;IACjB,MAAM,MAAM,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAE1C,MAAM,IAAI,GAAG,YAAY,CAAC;IAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC;IAEtB,MAAM,eAAe,GAAG;QACpB,UAAU;QACV,IAAI,EAAE,IAAI;QACV,SAAS;QACT,IAAI;QACJ,MAAM;QACN,MAAM;QACN,QAAQ;QACR,IAAI;QACJ,OAAO;QACP,UAAU;QACV,QAAQ;QACR,QAAQ;QACR,MAAM;QACN,aAAa;QACb,WAAW;QACX,SAAS;QACT,UAAU;QACV,UAAU;QACV,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,CAAC;KACR,CAAC;IAEF,OAAO,eAAe,CAAC;AAC3B,CAAC"}

package/lib/PriceCoordinate.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { strokeDashTypes } from "@tradingaction/core";
+interface PriceCoordinateProps {
+    readonly arrowWidth?: number;
+    readonly at?: "bottom" | "top" | "left" | "right";
+    readonly displayFormat: (n: number) => string;
+    readonly dx?: number;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fill?: string | ((price: number) => string);
+    readonly lineOpacity?: number;
+    readonly lineStroke?: string;
+    readonly opacity?: number;
+    readonly orient?: "bottom" | "top" | "left" | "right";
+    readonly price: number;
+    readonly rectWidth?: number;
+    readonly rectHeight?: number;
+    readonly strokeDasharray?: strokeDashTypes;
+    readonly stroke?: string;
+    readonly strokeOpacity?: number;
+    readonly strokeWidth?: number;
+    readonly textFill?: string | ((price: number) => string);
+    readonly yAxisPad?: number;
+}
+export declare class PriceCoordinate extends React.Component<PriceCoordinateProps> {
+    static defaultProps: {
+        displayFormat: (n: number | {
+            valueOf(): number;
+        }) => string;
+        yAxisPad: number;
+        rectWidth: number;
+        rectHeight: number;
+        orient: string;
+        at: string;
+        price: number;
+        dx: number;
+        arrowWidth: number;
+        fill: string;
+        opacity: number;
+        lineOpacity: number;
+        lineStroke: string;
+        fontFamily: string;
+        fontSize: number;
+        textFill: string;
+        strokeOpacity: number;
+        strokeWidth: number;
+        strokeDasharray: string;
+    };
+    render(): JSX.Element;
+    private readonly drawOnCanvas;
+    private readonly helper;
+}
+export {};

package/lib/PriceCoordinate.js

@@ -0,0 +1,81 @@
+import { format } from "d3-format";
+import * as React from "react";
+import { getAxisCanvas, GenericChartComponent, functor } from "@tradingaction/core";
+import { drawOnCanvas } from "./EdgeCoordinateV3";
+export class PriceCoordinate extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.drawOnCanvas = (ctx, moreProps) => {
+            const props = this.helper(this.props, moreProps);
+            drawOnCanvas(ctx, props);
+        };
+        this.helper = (props, moreProps) => {
+            const { chartConfig: { yScale }, width, } = moreProps;
+            const [lowerYValue, upperYValue] = yScale.domain();
+            const { price, stroke, strokeDasharray, strokeOpacity, strokeWidth } = props;
+            const { orient, at, rectWidth, rectHeight, displayFormat, dx } = props;
+            const { fill, opacity, fontFamily, fontSize, textFill, arrowWidth, lineOpacity, lineStroke } = props;
+            const x1 = 0;
+            const x2 = width;
+            const edgeAt = at === "right" ? width : 0;
+            const type = "horizontal";
+            const y = yScale(price);
+            const show = price <= upperYValue && price >= lowerYValue;
+            const coordinate = displayFormat(yScale.invert(y));
+            const hideLine = false;
+            const coordinateProps = {
+                coordinate,
+                show,
+                type,
+                orient,
+                edgeAt,
+                hideLine,
+                lineOpacity,
+                lineStroke,
+                lineStrokeDasharray: strokeDasharray,
+                stroke,
+                strokeOpacity,
+                strokeWidth,
+                fill: functor(fill)(price),
+                textFill: functor(textFill)(price),
+                opacity,
+                fontFamily,
+                fontSize,
+                rectWidth,
+                rectHeight,
+                arrowWidth,
+                dx,
+                x1,
+                x2,
+                y1: y,
+                y2: y,
+            };
+            return coordinateProps;
+        };
+    }
+    render() {
+        return (React.createElement(GenericChartComponent, { clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getAxisCanvas, drawOn: ["pan"] }));
+    }
+}
+PriceCoordinate.defaultProps = {
+    displayFormat: format(".2f"),
+    yAxisPad: 0,
+    rectWidth: 50,
+    rectHeight: 20,
+    orient: "left",
+    at: "left",
+    price: 0,
+    dx: 0,
+    arrowWidth: 0,
+    fill: "#BAB8b8",
+    opacity: 1,
+    lineOpacity: 0.2,
+    lineStroke: "#000000",
+    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+    fontSize: 13,
+    textFill: "#FFFFFF",
+    strokeOpacity: 1,
+    strokeWidth: 1,
+    strokeDasharray: "Solid",
+};
+//# sourceMappingURL=PriceCoordinate.js.map

package/lib/PriceCoordinate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceCoordinate.js","sourceRoot":"","sources":["../src/PriceCoordinate.tsx"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./EdgeIndicator";
+export * from "./CrossHairCursor";
+export * from "./CurrentCoordinate";
+export * from "./Cursor";
+export * from "./MouseCoordinateX";
+export { MouseCoordinateXV2 } from "./MouseCoordinateXV2";
+export { MouseCoordinateY } from "./MouseCoordinateY";
+export * from "./PriceCoordinate";

package/lib/index.js

@@ -0,0 +1,9 @@
+export * from "./EdgeIndicator";
+export * from "./CrossHairCursor";
+export * from "./CurrentCoordinate";
+export * from "./Cursor";
+export * from "./MouseCoordinateX";
+export { MouseCoordinateXV2 } from "./MouseCoordinateXV2";
+export { MouseCoordinateY } from "./MouseCoordinateY";
+export * from "./PriceCoordinate";
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,mBAAmB,CAAC"}

package/package.json

@@ -0,0 +1,49 @@
+{
+    "name": "@tradingaction/coordinates",
+    "version": "2.0.0",
+    "description": "Coordinates for react-financial-charts",
+    "publishConfig": {
+        "access": "public"
+    },
+    "main": "./lib/index.js",
+    "typings": "./lib/index.d.ts",
+    "files": [
+        "lib",
+        "src"
+    ],
+    "sideEffects": false,
+    "author": "Reactive Markets",
+    "keywords": [
+        "charts",
+        "charting",
+        "stockcharts",
+        "finance",
+        "financial",
+        "finance-chart",
+        "react",
+        "d3"
+    ],
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/reactivemarkets/react-financial-charts.git"
+    },
+    "bugs": {
+        "url": "https://github.com/reactivemarkets/react-financial-charts/issues"
+    },
+    "scripts": {
+        "build": "npm run clean && npm run compile",
+        "clean": "rimraf lib",
+        "compile": "tsc -p tsconfig.json",
+        "watch": "tsc -p tsconfig.json --watch --preserveWatchOutput"
+    },
+    "dependencies": {
+        "@tradingaction/core": "^2.0.0",
+        "d3-format": "^2.0.0"
+    },
+    "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    },
+    "gitHead": "928c231405fcf3e2eff3585c69123776dcb76b34"
+}

package/src/CrossHairCursor.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import {
+    getStrokeDasharrayCanvas,
+    strokeDashTypes,
+    GenericComponent,
+    getMouseCanvas,
+    ChartCanvasContext,
+} from "@tradingaction/core";
+
+const defaultCustomX = (props: CrossHairCursorProps, moreProps: any) => {
+    const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
+    const { snapX } = props;
+    const x = snapX ? Math.round(xScale(xAccessor(currentItem))) : mouseXY[0] + 0.5;
+    return x;
+};
+
+export interface CrossHairCursorProps {
+    readonly customX?: (props: CrossHairCursorProps, moreProps: any) => number;
+    readonly snapX?: boolean;
+    readonly strokeStyle?: string;
+    readonly strokeDasharray?: strokeDashTypes;
+    readonly strokeWidth?: number;
+}
+
+export class CrossHairCursor extends React.Component<CrossHairCursorProps> {
+    public static defaultProps = {
+        customX: defaultCustomX,
+        snapX: true,
+        strokeStyle: "rgba(55, 71, 79, 0.8)",
+        strokeDasharray: "Dash",
+        strokeWidth: 1,
+    };
+
+    public static contextType = ChartCanvasContext;
+
+    public render() {
+        return (
+            <GenericComponent
+                clip={false}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getMouseCanvas}
+                drawOn={["mousemove", "pan", "drag"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const lines = this.getLines(this.props, moreProps);
+        if (lines === undefined) {
+            return;
+        }
+
+        const { margin, ratio } = this.context;
+
+        const originX = 0.5 * ratio + margin.left;
+        const originY = 0.5 * ratio + margin.top;
+
+        ctx.save();
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.scale(ratio, ratio);
+        ctx.translate(originX, originY);
+
+        lines.forEach((line) => {
+            const dashArray = getStrokeDasharrayCanvas(line.strokeDasharray);
+
+            ctx.strokeStyle = line.strokeStyle;
+            ctx.lineWidth = line.strokeWidth;
+            ctx.setLineDash(dashArray);
+            ctx.beginPath();
+            ctx.moveTo(line.x1, line.y1);
+            ctx.lineTo(line.x2, line.y2);
+            ctx.stroke();
+        });
+
+        ctx.restore();
+    };
+
+    private readonly getLines = (props: CrossHairCursorProps, moreProps: any) => {
+        const { mouseXY, currentItem, show, height, width } = moreProps;
+
+        const {
+            customX = CrossHairCursor.defaultProps.customX,
+            strokeStyle = CrossHairCursor.defaultProps.strokeStyle,
+            strokeDasharray,
+            strokeWidth = CrossHairCursor.defaultProps.strokeWidth,
+        } = props;
+
+        if (!show || currentItem === undefined) {
+            return undefined;
+        }
+
+        const line1 = {
+            x1: 0,
+            x2: width,
+            y1: mouseXY[1] + 0.5,
+            y2: mouseXY[1] + 0.5,
+            strokeStyle,
+            strokeDasharray,
+            strokeWidth,
+        };
+
+        const x = customX(props, moreProps);
+
+        const line2 = {
+            x1: x,
+            x2: x,
+            y1: 0,
+            y2: height,
+            strokeStyle,
+            strokeDasharray,
+            strokeWidth,
+        };
+
+        return [line1, line2];
+    };
+}