@tradingaction/coordinates 2.0.0

package/src/MouseCoordinateXV2.tsx

@@ -0,0 +1,161 @@
+import * as React from "react";
+import { getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+
+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 class MouseCoordinateXV2 extends React.Component<MouseCoordinateXV2Props> {
+    public static 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,
+    };
+
+    public render() {
+        return (
+            <GenericChartComponent
+                clip={false}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getMouseCanvas}
+                drawOn={["mousemove", "pan", "drag"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        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);
+        }
+    };
+}
+
+function defaultXPosition(props: MouseCoordinateXV2Props, moreProps: any) {
+    const { currentItem, xAccessor } = moreProps;
+
+    return xAccessor(currentItem);
+}
+
+function getXCoordinateInfo(ctx: CanvasRenderingContext2D, props: MouseCoordinateXV2Props, moreProps: any) {
+    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: CanvasRenderingContext2D,
+    shape: any,
+    props: MouseCoordinateXV2Props,
+    moreProps: any,
+) {
+    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));
+}

package/src/MouseCoordinateY.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { getMouseCanvas, GenericChartComponent, isNotDefined } from "@tradingaction/core";
+import { drawOnCanvas } from "./EdgeCoordinateV3";
+
+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 class MouseCoordinateY extends React.Component<MouseCoordinateYProps> {
+    public static 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,
+    };
+
+    public render() {
+        return (
+            <GenericChartComponent
+                clip={false}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getMouseCanvas}
+                drawOn={["mousemove", "pan", "drag"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const props = this.helper(this.props, moreProps);
+        if (props === undefined) {
+            return;
+        }
+
+        drawOnCanvas(ctx, props);
+    };
+
+    private readonly helper = (props: MouseCoordinateYProps, moreProps: any) => {
+        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);
+    };
+}
+
+export function getYCoordinate(y: number, coordinate: string, props: any, moreProps: any) {
+    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;
+}

package/src/PriceCoordinate.tsx

@@ -0,0 +1,121 @@
+import { format } from "d3-format";
+import * as React from "react";
+import { getAxisCanvas, GenericChartComponent, functor, strokeDashTypes } from "@tradingaction/core";
+import { drawOnCanvas } from "./EdgeCoordinateV3";
+
+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 class PriceCoordinate extends React.Component<PriceCoordinateProps> {
+    public static 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",
+    };
+
+    public render() {
+        return (
+            <GenericChartComponent
+                clip={false}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getAxisCanvas}
+                drawOn={["pan"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const props = this.helper(this.props, moreProps);
+
+        drawOnCanvas(ctx, props);
+    };
+
+    private readonly helper = (props: PriceCoordinateProps, moreProps: any) => {
+        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;
+    };
+}

package/src/index.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";