@tradingaction/coordinates 2.0.0

package/src/CurrentCoordinate.tsx

@@ -0,0 +1,95 @@
+import { getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+import * as React from "react";
+
+export interface CurrentCoordinateProps {
+    /**
+     * Fill style for the circle.
+     */
+    readonly fillStyle?: string | ((datum: any) => string);
+    /**
+     * The radius to draw the circle
+     */
+    readonly r: number;
+    /**
+     * Stroke of the circle
+     */
+    readonly strokeStyle?: string | ((datum: any) => string);
+    /**
+     * Y accessor to use for the circle.
+     */
+    readonly yAccessor: (item: any) => number;
+}
+
+/**
+ * Draws a circle at the current x location of radius `r`.
+ */
+export class CurrentCoordinate extends React.Component<CurrentCoordinateProps> {
+    public static defaultProps = {
+        fillStyle: "#2196f3",
+        r: 3,
+    };
+
+    public render() {
+        return (
+            <GenericChartComponent
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getMouseCanvas}
+                drawOn={["mousemove", "pan"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const circle = this.getCircle(moreProps);
+        if (circle === undefined) {
+            return;
+        }
+
+        const { fillStyle, r, strokeStyle } = this.props;
+
+        const fillColor = fillStyle instanceof Function ? fillStyle(moreProps.currentItem) : fillStyle;
+        if (fillColor !== undefined) {
+            ctx.fillStyle = fillColor;
+        }
+
+        const strokeColor = strokeStyle instanceof Function ? strokeStyle(moreProps.currentItem) : strokeStyle;
+        if (strokeColor !== undefined) {
+            ctx.strokeStyle = strokeColor;
+        }
+
+        ctx.beginPath();
+        ctx.arc(circle.x, circle.y, r, 0, 2 * Math.PI, false);
+        ctx.fill();
+        if (strokeColor !== undefined) {
+            ctx.stroke();
+        }
+    };
+
+    private readonly getCircle = (moreProps: any) => {
+        const {
+            show,
+            xScale,
+            chartConfig: { yScale },
+            currentItem,
+            xAccessor,
+        } = moreProps;
+
+        if (!show || currentItem === undefined) {
+            return undefined;
+        }
+
+        const { yAccessor } = this.props;
+
+        const xValue = xAccessor(currentItem);
+        const yValue = yAccessor(currentItem);
+
+        if (yValue === undefined) {
+            return undefined;
+        }
+
+        const x = Math.round(xScale(xValue));
+        const y = Math.round(yScale(yValue));
+
+        return { x, y };
+    };
+}

package/src/Cursor.tsx

@@ -0,0 +1,174 @@
+import {
+    ChartCanvasContext,
+    first,
+    GenericComponent,
+    getMouseCanvas,
+    getStrokeDasharrayCanvas,
+    last,
+    strokeDashTypes,
+} from "@tradingaction/core";
+import * as React from "react";
+
+export interface CursorProps {
+    readonly customX?: (props: CursorProps, moreProps: any) => number;
+    readonly disableYCursor?: boolean;
+    readonly snapX?: boolean;
+    readonly strokeDasharray?: strokeDashTypes;
+    readonly strokeStyle?: string;
+    readonly useXCursorShape?: boolean;
+    readonly xCursorShapeFillStyle?: string | ((currentItem: any) => string);
+    readonly xCursorShapeStrokeStyle?: string | ((currentItem: any) => string);
+    readonly xCursorShapeStrokeDasharray?: strokeDashTypes;
+}
+
+const defaultCustomSnapX = (props: CursorProps, moreProps: any) => {
+    const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
+    const { snapX } = props;
+    const x = snapX ? Math.round(xScale(xAccessor(currentItem))) : mouseXY[0];
+    return x;
+};
+
+export class Cursor extends React.Component<CursorProps> {
+    public static defaultProps = {
+        strokeStyle: "rgba(55, 71, 79, 0.8)",
+        strokeDasharray: "ShortDash",
+        snapX: true,
+        customX: defaultCustomSnapX,
+        disableYCursor: false,
+        useXCursorShape: false,
+        xCursorShapeStrokeStyle: "rgba(0, 0, 0, 0.5)",
+    };
+
+    public static contextType = ChartCanvasContext;
+
+    public render() {
+        return (
+            <GenericComponent
+                clip={false}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getMouseCanvas}
+                drawOn={["mousemove", "pan", "drag"]}
+            />
+        );
+    }
+
+    private getXCursorShapeStroke({ currentItem }: any): string | undefined {
+        const { xCursorShapeStrokeStyle } = this.props;
+
+        return xCursorShapeStrokeStyle instanceof Function
+            ? xCursorShapeStrokeStyle(currentItem)
+            : xCursorShapeStrokeStyle;
+    }
+
+    private getXCursorShapeFill({ currentItem }: any): string | undefined {
+        const { xCursorShapeFillStyle } = this.props;
+
+        return xCursorShapeFillStyle instanceof Function ? xCursorShapeFillStyle(currentItem) : xCursorShapeFillStyle;
+    }
+
+    private getXCursorShape(moreProps: any) {
+        const { height, xScale, currentItem, plotData } = moreProps;
+        const { xAccessor } = moreProps;
+        const xValue = xAccessor(currentItem);
+        const centerX = xScale(xValue);
+        const shapeWidth =
+            Math.abs(xScale(xAccessor(last(plotData))) - xScale(xAccessor(first(plotData)))) / (plotData.length - 1);
+        const xPos = centerX - shapeWidth / 2;
+
+        return { height, xPos, shapeWidth };
+    }
+
+    private getXYCursor(props: CursorProps, moreProps: any) {
+        const { mouseXY, currentItem, show, height, width } = moreProps;
+
+        const { customX = Cursor.defaultProps.customX, strokeStyle, strokeDasharray, disableYCursor } = props;
+
+        if (!show || currentItem === undefined) {
+            return undefined;
+        }
+
+        const yCursor = {
+            x1: 0,
+            x2: width,
+            y1: mouseXY[1] + 0.5,
+            y2: mouseXY[1] + 0.5,
+            strokeStyle,
+            strokeDasharray,
+            isXCursor: false,
+        };
+
+        const x = customX(props, moreProps);
+
+        const xCursor = {
+            x1: x,
+            x2: x,
+            y1: 0,
+            y2: height,
+            strokeStyle,
+            strokeDasharray,
+            isXCursor: true,
+        };
+
+        return disableYCursor ? [xCursor] : [yCursor, xCursor];
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const cursors = this.getXYCursor(this.props, moreProps);
+        if (cursors === undefined) {
+            return;
+        }
+
+        const { useXCursorShape } = this.props;
+
+        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);
+
+        cursors.forEach((line) => {
+            if (useXCursorShape && line.isXCursor) {
+                const { xCursorShapeStrokeDasharray } = this.props;
+                if (xCursorShapeStrokeDasharray !== undefined) {
+                    const xShapeStrokeStyle = this.getXCursorShapeStroke(moreProps);
+                    if (xShapeStrokeStyle !== undefined) {
+                        ctx.strokeStyle = xShapeStrokeStyle;
+                    }
+                    ctx.setLineDash(getStrokeDasharrayCanvas(xCursorShapeStrokeDasharray));
+                }
+
+                ctx.beginPath();
+                const xShapeFillStyle = this.getXCursorShapeFill(moreProps);
+                if (xShapeFillStyle !== undefined) {
+                    ctx.fillStyle = xShapeFillStyle;
+                }
+
+                ctx.beginPath();
+
+                const xShape = this.getXCursorShape(moreProps);
+                xCursorShapeStrokeDasharray === undefined
+                    ? ctx.fillRect(xShape.xPos, 0, xShape.shapeWidth, xShape.height)
+                    : ctx.rect(xShape.xPos, 0, xShape.shapeWidth, xShape.height);
+                ctx.fill();
+            } else {
+                if (line.strokeStyle !== undefined) {
+                    ctx.strokeStyle = line.strokeStyle;
+                }
+
+                const dashArray = getStrokeDasharrayCanvas(line.strokeDasharray);
+                ctx.setLineDash(dashArray);
+                ctx.beginPath();
+                ctx.moveTo(line.x1, line.y1);
+                ctx.lineTo(line.x2, line.y2);
+            }
+
+            ctx.stroke();
+        });
+
+        ctx.restore();
+    };
+}

package/src/EdgeCoordinate.tsx

@@ -0,0 +1,239 @@
+import * as React from "react";
+
+const helper = (props: any) => {
+    const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
+    const { fill, fontFamily, fontSize, textFill, lineStroke, arrowWidth } = props;
+    const { rectWidth, rectHeight } = props;
+    const { x1, y1, x2, y2 } = props;
+
+    if (!show) {
+        return null;
+    }
+
+    let edgeXRect;
+    let edgeYRect;
+    let edgeXText;
+    let edgeYText;
+
+    if (type === "horizontal") {
+        edgeXRect = orient === "right" ? edgeAt + 1 : edgeAt - rectWidth - arrowWidth - 1;
+        edgeYRect = y1 - rectHeight / 2;
+        edgeXText = orient === "right" ? edgeAt + rectWidth / 2 + arrowWidth : edgeAt - rectWidth / 2 - arrowWidth;
+        edgeYText = y1;
+    } else {
+        edgeXRect = x1 - rectWidth / 2;
+        edgeYRect = orient === "bottom" ? edgeAt : edgeAt - rectHeight;
+        edgeXText = x1;
+        edgeYText = orient === "bottom" ? edgeAt + rectHeight / 2 : edgeAt - rectHeight / 2;
+    }
+
+    let coordinateBase;
+    let coordinate;
+    const textAnchor = "middle";
+    if (displayCoordinate !== undefined) {
+        coordinateBase = {
+            edgeXRect,
+            edgeYRect,
+            rectHeight,
+            rectWidth,
+            fill,
+            arrowWidth,
+        };
+        coordinate = {
+            edgeXText,
+            edgeYText,
+            textAnchor,
+            fontFamily,
+            fontSize,
+            textFill,
+            displayCoordinate,
+        };
+    }
+
+    const line = hideLine
+        ? undefined
+        : {
+              stroke: lineStroke,
+              x1,
+              y1,
+              x2,
+              y2,
+          };
+    return {
+        coordinateBase,
+        coordinate,
+        line,
+        orient,
+    };
+};
+
+export interface EdgeCoordinateProps {
+    readonly className?: string;
+    readonly type: "vertical" | "horizontal";
+    readonly coordinate?: any;
+    readonly x1: number;
+    readonly y1: number;
+    readonly x2: number;
+    readonly y2: number;
+    readonly orient?: "bottom" | "top" | "left" | "right";
+    readonly rectWidth?: number;
+    readonly hideLine?: boolean;
+    readonly fill?: string;
+    readonly fontFamily: string;
+    readonly fontSize: number;
+    readonly lineStroke?: string;
+}
+
+export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-edgecoordinate",
+        orient: "left",
+        hideLine: false,
+        fill: "#8a8a8a",
+        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 13,
+        textFill: "#FFFFFF",
+        lineStroke: "rgba(0, 0, 0, 0.3)",
+        arrowWidth: 10,
+    };
+
+    public static drawOnCanvasStatic = (ctx: CanvasRenderingContext2D, props: any) => {
+        props = { ...EdgeCoordinate.defaultProps, ...props };
+
+        const edge = helper(props);
+        if (edge === null) {
+            return;
+        }
+
+        if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
+            const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
+
+            ctx.fillStyle = edge.coordinateBase.fill;
+
+            const x = edge.coordinateBase.edgeXRect;
+            const y = edge.coordinateBase.edgeYRect;
+
+            ctx.beginPath();
+
+            if (edge.orient === "right") {
+                ctx.moveTo(x, y + rectHeight / 2);
+                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 (edge.orient === "left") {
+                ctx.moveTo(x, y);
+                ctx.lineTo(x + rectWidth, y);
+                ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight / 2);
+                ctx.lineTo(x + rectWidth, y + rectHeight);
+                ctx.lineTo(x, y + rectHeight);
+                ctx.closePath();
+            } else {
+                ctx.rect(x, y, rectWidth, rectHeight);
+            }
+            ctx.fill();
+
+            ctx.font = `${edge.coordinate.fontSize}px ${edge.coordinate.fontFamily}`;
+            ctx.fillStyle = edge.coordinate.textFill;
+            ctx.textAlign =
+                edge.coordinate.textAnchor === "middle" ? "center" : (edge.coordinate.textAnchor as CanvasTextAlign);
+            ctx.textBaseline = "middle";
+
+            ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
+        }
+
+        if (edge.line !== undefined) {
+            ctx.strokeStyle = edge.line.stroke;
+
+            ctx.beginPath();
+            ctx.moveTo(edge.line.x1, edge.line.y1);
+            ctx.lineTo(edge.line.x2, edge.line.y2);
+            ctx.stroke();
+        }
+    };
+
+    public render() {
+        const { className } = this.props;
+
+        const edge = helper(this.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}
+                    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 transform={`translate(${edge.coordinateBase.edgeXRect},${edge.coordinateBase.edgeYRect})`}>
+                        <path
+                            d={path}
+                            key={1}
+                            className="react-financial-charts-text-background"
+                            height={rectHeight}
+                            width={rectWidth}
+                            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>
+        );
+    }
+}

package/src/EdgeCoordinateV2.tsx

@@ -0,0 +1,204 @@
+import * as React from "react";
+
+export function 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}
+                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 transform={`translate(${edge.coordinateBase.edgeXRect},${edge.coordinateBase.edgeYRect})`}>
+                    <path
+                        d={path}
+                        key={1}
+                        className="react-financial-charts-text-background"
+                        height={rectHeight}
+                        width={rectWidth}
+                        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>
+    );
+}
+
+function helper(props: any) {
+    const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
+    const { fill, fontFamily, fontSize, textFill, lineStroke, arrowWidth } = props;
+    const { rectWidth, rectHeight } = props;
+    const { x1, y1, x2, y2, dx } = props;
+
+    if (!show) {
+        return null;
+    }
+
+    let edgeXRect;
+    let edgeYRect;
+    let edgeXText;
+    let edgeYText;
+
+    if (type === "horizontal") {
+        edgeXRect = dx + (orient === "right" ? edgeAt + 1 : edgeAt - rectWidth - arrowWidth - 1);
+        edgeYRect = y1 - rectHeight / 2;
+        edgeXText =
+            dx + (orient === "right" ? edgeAt + rectWidth / 2 + arrowWidth : edgeAt - rectWidth / 2 - arrowWidth);
+        edgeYText = y1;
+    } else {
+        edgeXRect = x1 - rectWidth / 2;
+        edgeYRect = orient === "bottom" ? edgeAt : edgeAt - rectHeight;
+        edgeXText = x1;
+        edgeYText = orient === "bottom" ? edgeAt + rectHeight / 2 : edgeAt - rectHeight / 2;
+    }
+    let coordinateBase;
+    let coordinate;
+    const textAnchor = "middle";
+    if (displayCoordinate !== undefined) {
+        coordinateBase = {
+            edgeXRect,
+            edgeYRect,
+            rectHeight,
+            rectWidth,
+            fill,
+            arrowWidth,
+        };
+        coordinate = {
+            edgeXText,
+            edgeYText,
+            textAnchor,
+            fontFamily,
+            fontSize,
+            textFill,
+            displayCoordinate,
+        };
+    }
+
+    const line = hideLine
+        ? undefined
+        : {
+              stroke: lineStroke,
+              x1,
+              y1,
+              x2,
+              y2,
+          };
+    return {
+        coordinateBase,
+        coordinate,
+        line,
+        orient,
+    };
+}
+
+export function drawOnCanvas(ctx: CanvasRenderingContext2D, props: any) {
+    const edge = helper(props);
+
+    if (edge === null) {
+        return;
+    }
+
+    if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
+        const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
+
+        ctx.fillStyle = edge.coordinateBase.fill;
+
+        const x = edge.coordinateBase.edgeXRect;
+        const y = edge.coordinateBase.edgeYRect;
+
+        ctx.beginPath();
+
+        if (edge.orient === "right") {
+            ctx.moveTo(x, y + rectHeight / 2);
+            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 (edge.orient === "left") {
+            ctx.moveTo(x, y);
+            ctx.lineTo(x + rectWidth, y);
+            ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight / 2);
+            ctx.lineTo(x + rectWidth, y + rectHeight);
+            ctx.lineTo(x, y + rectHeight);
+            ctx.closePath();
+        } else {
+            ctx.rect(x, y, rectWidth, rectHeight);
+        }
+        ctx.fill();
+
+        ctx.font = `${edge.coordinate.fontSize}px ${edge.coordinate.fontFamily}`;
+        ctx.fillStyle = edge.coordinate.textFill;
+        ctx.textAlign =
+            edge.coordinate.textAnchor === "middle" ? "center" : (edge.coordinate.textAnchor as CanvasTextAlign);
+        ctx.textBaseline = "middle";
+
+        ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
+    }
+    if (edge.line !== undefined) {
+        ctx.strokeStyle = edge.line.stroke;
+
+        ctx.beginPath();
+        ctx.moveTo(edge.line.x1, edge.line.y1);
+        ctx.lineTo(edge.line.x2, edge.line.y2);
+        ctx.stroke();
+    }
+}