@tradingaction/coordinates 2.0.0

package/src/EdgeCoordinateV3.tsx

@@ -0,0 +1,284 @@
+import * as React from "react";
+
+import { getStrokeDasharray, getStrokeDasharrayCanvas, isDefined } from "@tradingaction/core";
+
+export const renderSVG = (props: any) => {
+    const { className } = props;
+
+    const edge = helper(props);
+    if (edge === null) {
+        return null;
+    }
+
+    let line;
+    let coordinateBase;
+    let coordinate;
+
+    if (edge.line !== undefined) {
+        line = (
+            <line
+                className="react-financial-charts-cross-hair"
+                stroke={edge.line.stroke}
+                strokeDasharray={getStrokeDasharray(edge.line.strokeDasharray)}
+                x1={edge.line.x1}
+                y1={edge.line.y1}
+                x2={edge.line.x2}
+                y2={edge.line.y2}
+            />
+        );
+    }
+    if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
+        const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
+
+        const path =
+            edge.orient === "left"
+                ? `M0,0L0,${rectHeight}L${rectWidth},${rectHeight}L${rectWidth + arrowWidth},10L${rectWidth},0L0,0L0,0`
+                : `M0,${arrowWidth}L${arrowWidth},${rectHeight}L${rectWidth + arrowWidth},${rectHeight}L${
+                      rectWidth + arrowWidth
+                  },0L${arrowWidth},0L0,${arrowWidth}`;
+
+        coordinateBase =
+            edge.orient === "left" || edge.orient === "right" ? (
+                <g key={1} transform={`translate(${edge.coordinateBase.edgeXRect},${edge.coordinateBase.edgeYRect})`}>
+                    <path
+                        d={path}
+                        className="react-financial-charts-text-background"
+                        height={rectHeight}
+                        width={rectWidth}
+                        stroke={edge.coordinateBase.stroke}
+                        strokeLinejoin="miter"
+                        strokeWidth={edge.coordinateBase.strokeWidth}
+                        fill={edge.coordinateBase.fill}
+                    />
+                </g>
+            ) : (
+                <rect
+                    key={1}
+                    className="react-financial-charts-text-background"
+                    x={edge.coordinateBase.edgeXRect}
+                    y={edge.coordinateBase.edgeYRect}
+                    height={rectHeight}
+                    width={rectWidth}
+                    fill={edge.coordinateBase.fill}
+                />
+            );
+
+        coordinate = (
+            <text
+                key={2}
+                x={edge.coordinate.edgeXText}
+                y={edge.coordinate.edgeYText}
+                textAnchor={edge.coordinate.textAnchor}
+                fontFamily={edge.coordinate.fontFamily}
+                fontSize={edge.coordinate.fontSize}
+                dy=".32em"
+                fill={edge.coordinate.textFill}
+            >
+                {edge.coordinate.displayCoordinate}
+            </text>
+        );
+    }
+    return (
+        <g className={className}>
+            {line}
+            {coordinateBase}
+            {coordinate}
+        </g>
+    );
+};
+
+const helper = (props: any) => {
+    const {
+        coordinate: displayCoordinate,
+        show,
+        type,
+        orient,
+        edgeAt,
+        hideLine,
+        lineStrokeDasharray,
+        fill,
+        fontFamily,
+        fontSize,
+        textFill,
+        lineStroke,
+        stroke,
+        strokeWidth,
+        arrowWidth,
+        rectWidth,
+        rectHeight,
+        rectRadius,
+        x1,
+        y1,
+        x2,
+        y2,
+        dx,
+    } = props;
+
+    if (!show) {
+        return null;
+    }
+
+    let coordinateBase;
+    let coordinate;
+    if (displayCoordinate !== undefined) {
+        const textAnchor = "middle";
+
+        let edgeXRect;
+        let edgeYRect;
+        let edgeXText;
+        let edgeYText;
+
+        if (type === "horizontal") {
+            edgeXRect = dx + (orient === "right" ? edgeAt + 1 : edgeAt - rectWidth - 1);
+            edgeYRect = y1 - rectHeight / 2 - strokeWidth;
+            edgeXText = dx + (orient === "right" ? edgeAt + rectWidth / 2 : edgeAt - rectWidth / 2);
+            edgeYText = y1;
+        } else {
+            const dy = orient === "bottom" ? strokeWidth - 1 : -strokeWidth + 1;
+            edgeXRect = x1 - rectWidth / 2;
+            edgeYRect = (orient === "bottom" ? edgeAt : edgeAt - rectHeight) + dy;
+            edgeXText = x1;
+            edgeYText = (orient === "bottom" ? edgeAt + rectHeight / 2 : edgeAt - rectHeight / 2) + dy;
+        }
+
+        coordinateBase = {
+            edgeXRect,
+            edgeYRect,
+            rectHeight: rectHeight + strokeWidth,
+            rectWidth,
+            rectRadius,
+            fill,
+            arrowWidth,
+            stroke,
+            strokeWidth,
+        };
+        coordinate = {
+            edgeXText,
+            edgeYText,
+            textAnchor,
+            fontFamily,
+            fontSize,
+            textFill,
+            displayCoordinate,
+        };
+    }
+
+    const line = hideLine
+        ? undefined
+        : {
+              stroke: lineStroke,
+              strokeDasharray: lineStrokeDasharray,
+              x1,
+              y1,
+              x2,
+              y2,
+          };
+
+    return {
+        coordinateBase,
+        coordinate,
+        line,
+        orient,
+    };
+};
+
+export const drawOnCanvas = (ctx: CanvasRenderingContext2D, props: any) => {
+    const { coordinate, fitToText, fontSize, fontFamily, rectWidth } = props;
+
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    ctx.textBaseline = "middle";
+
+    let width = rectWidth;
+    if (fitToText) {
+        width = Math.round(ctx.measureText(coordinate).width + 10);
+    }
+
+    const edge = helper({ ...props, rectWidth: width });
+    if (edge === null) {
+        return;
+    }
+
+    if (edge.line !== undefined && isDefined(edge.line)) {
+        const dashArray = getStrokeDasharrayCanvas(edge.line.strokeDasharray);
+        ctx.setLineDash(dashArray);
+        ctx.strokeStyle = edge.line.stroke;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(edge.line.x1, edge.line.y1);
+        ctx.lineTo(edge.line.x2, edge.line.y2);
+        ctx.stroke();
+    }
+
+    ctx.setLineDash([]);
+
+    if (edge.coordinateBase !== undefined) {
+        const { arrowWidth, rectWidth, rectHeight, rectRadius } = edge.coordinateBase;
+
+        ctx.fillStyle = edge.coordinateBase.fill;
+        if (edge.coordinateBase.stroke !== undefined) {
+            ctx.strokeStyle = edge.coordinateBase.stroke;
+            ctx.lineWidth = edge.coordinateBase.strokeWidth;
+        }
+
+        let x = edge.coordinateBase.edgeXRect;
+        const y = edge.coordinateBase.edgeYRect;
+        const halfHeight = rectHeight / 2;
+
+        ctx.beginPath();
+
+        if (arrowWidth > 0 && edge.orient === "right") {
+            x -= arrowWidth;
+            ctx.moveTo(x, y + halfHeight);
+            ctx.lineTo(x + arrowWidth, y);
+            ctx.lineTo(x + rectWidth + arrowWidth, y);
+            ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight);
+            ctx.lineTo(x + arrowWidth, y + rectHeight);
+            ctx.closePath();
+        } else if (arrowWidth > 0 && edge.orient === "left") {
+            ctx.moveTo(x, y);
+            ctx.lineTo(x + rectWidth, y);
+            ctx.lineTo(x + rectWidth + arrowWidth, y + halfHeight);
+            ctx.lineTo(x + rectWidth, y + rectHeight);
+            ctx.lineTo(x, y + rectHeight);
+            ctx.closePath();
+        } else if (rectRadius) {
+            roundRect(ctx, x - 0.5, y - 0.5, rectWidth, rectHeight, 3);
+        } else {
+            ctx.rect(x - 0.5, y, rectWidth, rectHeight);
+        }
+
+        ctx.fill();
+
+        if (edge.coordinateBase.stroke !== undefined) {
+            ctx.stroke();
+        }
+
+        if (edge.coordinate !== undefined) {
+            ctx.fillStyle = edge.coordinate.textFill;
+            ctx.textAlign =
+                edge.coordinate.textAnchor === "middle" ? "center" : (edge.coordinate.textAnchor as CanvasTextAlign);
+            ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
+        }
+    }
+};
+
+const roundRect = (
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: number,
+) => {
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+};

package/src/EdgeIndicator.tsx

@@ -0,0 +1,161 @@
+import { format } from "d3-format";
+import * as React from "react";
+import {
+    first,
+    functor,
+    getAxisCanvas,
+    GenericChartComponent,
+    last,
+    noop,
+    strokeDashTypes,
+} from "@tradingaction/core";
+import { drawOnCanvas } from "./EdgeCoordinateV3";
+
+export interface EdgeIndicatorProps {
+    readonly arrowWidth?: number;
+    readonly displayFormat?: (n: number) => string;
+    readonly edgeAt?: "left" | "right";
+    readonly fill?: string | ((datum: any) => string);
+    readonly fitToText?: boolean;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fullWidth?: boolean;
+    readonly itemType: "first" | "last";
+    readonly lineStroke?: string | ((datum: any) => string);
+    readonly lineStrokeDasharray?: strokeDashTypes;
+    readonly orient?: "left" | "right";
+    readonly rectHeight?: number;
+    readonly rectWidth?: number;
+    readonly stroke?: string | ((datum: any) => string);
+    readonly textFill?: string | ((datum: any) => string);
+    readonly type?: "horizontal";
+    readonly yAccessor: (data: any) => number | undefined;
+    readonly yAxisPad?: number;
+}
+
+export class EdgeIndicator extends React.Component<EdgeIndicatorProps> {
+    public static defaultProps = {
+        fitToText: false,
+        lineStroke: "#000000",
+        lineOpacity: 1,
+        lineStrokeDasharray: "ShortDot",
+        orient: "right",
+        displayFormat: format(".2f"),
+        edgeAt: "right",
+        yAxisPad: 0,
+        rectHeight: 20,
+        rectWidth: 50,
+        arrowWidth: 0,
+        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 13,
+        dx: 0,
+        hideLine: false,
+        fill: "#8a8a8a",
+        opacity: 1,
+        stroke: noop,
+        strokeOpacity: 1,
+        strokeWidth: 1,
+        textFill: "#FFFFFF",
+        type: "horizontal",
+    };
+
+    public render() {
+        return (
+            <GenericChartComponent
+                edgeClip
+                clip={false}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getAxisCanvas}
+                drawOn={["pan"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const edge = this.helper(this.props, moreProps);
+        if (edge === undefined) {
+            return;
+        }
+
+        const props = {
+            ...this.props,
+            ...edge,
+        };
+
+        drawOnCanvas(ctx, props);
+    };
+
+    private readonly helper = (props: EdgeIndicatorProps, moreProps: any) => {
+        const { itemType, yAccessor } = props;
+
+        const { plotData } = moreProps;
+
+        const item = itemType === "first" ? first(plotData, yAccessor) : last(plotData, yAccessor);
+
+        const edge = item !== undefined ? this.getEdge(moreProps, item) : undefined;
+
+        return edge;
+    };
+
+    private readonly getEdge = (moreProps: any, item: any) => {
+        const {
+            fontFamily,
+            fontSize,
+            type: edgeType,
+            displayFormat = EdgeIndicator.defaultProps.displayFormat,
+            edgeAt,
+            yAxisPad = EdgeIndicator.defaultProps.yAxisPad,
+            orient,
+            lineStroke,
+            yAccessor,
+            fill,
+            fullWidth,
+            textFill,
+            rectHeight,
+            rectWidth,
+            arrowWidth,
+            stroke,
+        } = this.props;
+
+        const {
+            xScale,
+            chartConfig: { yScale },
+            xAccessor,
+            width,
+        } = moreProps;
+
+        const yValue = yAccessor(item);
+        if (yValue === undefined) {
+            return undefined;
+        }
+
+        const xValue = xAccessor(item);
+
+        const x1 = fullWidth ? 0 : Math.round(xScale(xValue));
+        const y1 = Math.round(yScale(yValue));
+
+        const [left, right] = [0, width];
+        const edgeX = edgeAt === "left" ? left - yAxisPad : right + yAxisPad;
+
+        return {
+            coordinate: displayFormat(yValue),
+            show: true,
+            type: edgeType,
+            orient,
+            edgeAt: edgeX,
+            fill: functor(fill)(item),
+            lineStroke: functor(lineStroke)(item),
+            stroke: functor(stroke)(item),
+            fontFamily,
+            fontSize,
+            textFill: functor(textFill)(item),
+            rectHeight,
+            rectWidth,
+            arrowWidth,
+            x1,
+            y1,
+            x2: right,
+            y2: y1,
+        };
+    };
+}

package/src/MouseCoordinateX.tsx

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { isNotDefined, getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+import { drawOnCanvas } from "./EdgeCoordinateV3";
+
+export interface MouseCoordinateXProps {
+    readonly at?: "bottom" | "top";
+    readonly customX: (props: MouseCoordinateXProps, moreProps: any) => { x: number; coordinate: string };
+    readonly displayFormat: (item: any) => string;
+    readonly fill?: string;
+    readonly fitToText?: boolean;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly opacity?: number;
+    readonly orient?: "bottom" | "top";
+    readonly rectRadius?: number;
+    readonly rectWidth?: number;
+    readonly rectHeight?: number;
+    readonly snapX?: boolean;
+    readonly stroke?: string;
+    readonly strokeOpacity?: number;
+    readonly strokeWidth?: number;
+    readonly textFill?: string;
+    readonly yAxisPad?: number;
+}
+
+const defaultCustomX = (props: MouseCoordinateXProps, moreProps: any) => {
+    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<MouseCoordinateXProps> {
+    public static 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,
+    };
+
+    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 === null) {
+            return;
+        }
+
+        drawOnCanvas(ctx, props);
+    };
+
+    private readonly helper = (props: MouseCoordinateXProps, moreProps: any) => {
+        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;
+    };
+}