@tradingaction/interactive 2.0.13

package/src/components/InteractiveText.tsx

@@ -0,0 +1,146 @@
+import * as React from "react";
+import { getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+
+export interface InteractiveTextProps {
+    readonly bgFillStyle: string;
+    readonly bgStrokeWidth: number;
+    readonly bgStroke: string;
+    readonly defaultClassName?: string;
+    readonly fontFamily: string;
+    readonly fontSize: number;
+    readonly fontWeight: number | string;
+    readonly fontStyle: string;
+    readonly onDragStart?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDrag?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDragComplete?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onUnHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDoubleClick?: (e: React.MouseEvent, moreProps: any) => void; //a1
+    readonly position?: any;
+    readonly interactiveCursorClass?: string;
+    readonly selected: boolean;
+    readonly text: string;
+    readonly textFill: string;
+    readonly tolerance: number;
+}
+
+export class InteractiveText extends React.Component<InteractiveTextProps> {
+    public static defaultProps = {
+        type: "SD", // standard dev
+        fontWeight: "normal", // standard dev
+        tolerance: 4,
+        selected: false,
+    };
+
+    private calculateTextWidth = true;
+    private textWidth?: number;
+
+    public componentDidUpdate(previousProps: InteractiveTextProps) {
+        this.calculateTextWidth =
+            previousProps.text !== this.props.text ||
+            previousProps.fontStyle !== this.props.fontStyle ||
+            previousProps.fontWeight !== this.props.fontWeight ||
+            previousProps.fontSize !== this.props.fontSize ||
+            previousProps.fontFamily !== this.props.fontFamily;
+    }
+
+    public render() {
+        const { selected, interactiveCursorClass } = this.props;
+        const { onHover, onUnHover } = this.props;
+        const { onDragStart, onDrag, onDragComplete, onDoubleClick } = this.props;
+
+        return (
+            <GenericChartComponent
+                isHover={this.isHover}
+                canvasToDraw={getMouseCanvas}
+                canvasDraw={this.drawOnCanvas}
+                interactiveCursorClass={interactiveCursorClass}
+                selected={selected}
+                onDragStart={onDragStart}
+                onDrag={onDrag}
+                onDragComplete={onDragComplete}
+                onDoubleClickWhenHover={onDoubleClick}
+                onHover={onHover}
+                onUnHover={onUnHover}
+                drawOn={["mousemove", "mouseleave", "pan", "drag"]}
+            />
+        );
+    }
+
+    private readonly isHover = (moreProps: any) => {
+        const { onHover } = this.props;
+
+        if (onHover !== undefined && this.textWidth !== undefined && !this.calculateTextWidth) {
+            const { rect } = this.helper(moreProps, this.textWidth);
+            const {
+                mouseXY: [x, y],
+            } = moreProps;
+
+            if (x >= rect.x && y >= rect.y && x <= rect.x + rect.width && y <= rect.y + rect.height) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { bgFillStyle, bgStrokeWidth, bgStroke, textFill, fontFamily, fontSize, fontStyle, fontWeight, text } =
+            this.props;
+
+        if (this.calculateTextWidth) {
+            ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+            const { width } = ctx.measureText(text);
+            this.textWidth = width;
+            this.calculateTextWidth = false;
+        }
+
+        const { selected } = this.props;
+
+        const { x, y, rect } = this.helper(moreProps, this.textWidth ?? 0);
+
+        ctx.fillStyle = bgFillStyle;
+
+        ctx.beginPath();
+        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+
+        if (selected) {
+            ctx.strokeStyle = bgStroke;
+            ctx.lineWidth = bgStrokeWidth;
+            ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+        }
+
+        ctx.fillStyle = textFill;
+        ctx.textBaseline = "middle";
+        ctx.textAlign = "center";
+        ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+
+        ctx.beginPath();
+        ctx.fillText(text, x, y);
+    };
+
+    private readonly helper = (moreProps: any, textWidth: number) => {
+        const { position, fontSize } = this.props;
+
+        const {
+            xScale,
+            chartConfig: { yScale },
+        } = moreProps;
+
+        const [xValue, yValue] = position;
+        const x = xScale(xValue);
+        const y = yScale(yValue);
+
+        const rect = {
+            x: x - textWidth / 2 - fontSize,
+            y: y - fontSize,
+            width: textWidth + fontSize * 2,
+            height: fontSize * 2,
+        };
+
+        return {
+            x,
+            y,
+            rect,
+        };
+    };
+}

package/src/components/InteractiveYCoordinate.tsx

@@ -0,0 +1,200 @@
+import * as React from "react";
+import { drawOnCanvas } from "@tradingaction/coordinates/lib/EdgeCoordinateV3";
+import { getYCoordinate } from "@tradingaction/coordinates/lib/MouseCoordinateY";
+import { getStrokeDasharrayCanvas, getMouseCanvas, GenericChartComponent, strokeDashTypes } from "@tradingaction/core";
+
+export interface InteractiveYCoordinateProps {
+    readonly bgFillStyle: string;
+    readonly strokeStyle: string;
+    readonly strokeWidth: number;
+    readonly strokeDasharray: strokeDashTypes;
+    readonly textFill: string;
+    readonly fontFamily: string;
+    readonly fontSize: number;
+    readonly fontWeight: number | string;
+    readonly fontStyle: string;
+    readonly text: string;
+    readonly edge: object;
+    readonly textBox: {
+        readonly closeIcon: any;
+        readonly left: number;
+        readonly height: number;
+        readonly padding: any;
+    };
+    readonly yValue: number;
+    readonly onDragStart?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDrag?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDragComplete?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onUnHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly defaultClassName?: string;
+    readonly interactiveCursorClass?: string;
+    readonly tolerance: number;
+    readonly selected: boolean;
+    readonly hovering: boolean;
+}
+
+export class InteractiveYCoordinate extends React.Component<InteractiveYCoordinateProps> {
+    public static defaultProps = {
+        fontWeight: "normal", // standard dev
+        strokeWidth: 1,
+        tolerance: 4,
+        selected: false,
+        hovering: false,
+    };
+
+    private width = 0;
+
+    public render() {
+        const { interactiveCursorClass } = this.props;
+        const { onHover, onUnHover } = this.props;
+        const { onDragStart, onDrag, onDragComplete } = this.props;
+
+        return (
+            <GenericChartComponent
+                clip={false}
+                isHover={this.isHover}
+                canvasToDraw={getMouseCanvas}
+                canvasDraw={this.drawOnCanvas}
+                interactiveCursorClass={interactiveCursorClass}
+                enableDragOnHover
+                onDragStart={onDragStart}
+                onDrag={onDrag}
+                onDragComplete={onDragComplete}
+                onHover={onHover}
+                onUnHover={onUnHover}
+                drawOn={["mousemove", "mouseleave", "pan", "drag"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const {
+            bgFillStyle,
+            textFill,
+            fontFamily,
+            fontSize,
+            fontStyle,
+            fontWeight,
+            strokeStyle,
+            strokeWidth,
+            strokeDasharray,
+            text,
+            textBox,
+            edge,
+            selected,
+            hovering,
+        } = this.props;
+
+        const values = this.helper(moreProps);
+        if (values == null) {
+            return;
+        }
+
+        const { x1, x2, y, rect } = values;
+
+        ctx.strokeStyle = strokeStyle;
+
+        ctx.beginPath();
+        if (selected || hovering) {
+            ctx.lineWidth = strokeWidth + 1;
+        } else {
+            ctx.lineWidth = strokeWidth;
+        }
+        ctx.textBaseline = "middle";
+        ctx.textAlign = "start";
+        ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+
+        this.width =
+            textBox.padding.left +
+            ctx.measureText(text).width +
+            textBox.padding.right +
+            textBox.closeIcon.padding.left +
+            textBox.closeIcon.width +
+            textBox.closeIcon.padding.right;
+
+        ctx.setLineDash(getStrokeDasharrayCanvas(strokeDasharray));
+        ctx.moveTo(x1, y);
+        ctx.lineTo(rect.x, y);
+
+        ctx.moveTo(rect.x + this.width, y);
+        ctx.lineTo(x2, y);
+        ctx.stroke();
+
+        ctx.setLineDash([]);
+
+        ctx.fillStyle = bgFillStyle;
+
+        ctx.fillRect(rect.x, rect.y, this.width, rect.height);
+        ctx.strokeRect(rect.x, rect.y, this.width, rect.height);
+
+        ctx.fillStyle = textFill;
+
+        ctx.beginPath();
+        ctx.fillText(text, rect.x + 10, y);
+        const newEdge = {
+            ...edge,
+            textFill,
+            fontFamily,
+            fontSize,
+        };
+
+        // @ts-ignore
+        const yValue = edge.displayFormat(this.props.yValue);
+        const yCoord = getYCoordinate(y, yValue, newEdge, moreProps);
+        drawOnCanvas(ctx, yCoord);
+    };
+
+    private readonly isHover = (moreProps: any) => {
+        const { onHover } = this.props;
+
+        if (onHover !== undefined) {
+            const values = this.helper(moreProps);
+            if (values == null) {
+                return false;
+            }
+
+            const { x1, x2, y, rect } = values;
+            const {
+                mouseXY: [mouseX, mouseY],
+            } = moreProps;
+
+            if (
+                mouseX >= rect.x &&
+                mouseX <= rect.x + this.width &&
+                mouseY >= rect.y &&
+                mouseY <= rect.y + rect.height
+            ) {
+                return true;
+            }
+            if (x1 <= mouseX && x2 >= mouseX && Math.abs(mouseY - y) < 4) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    private readonly helper = (moreProps: any) => {
+        const { yValue, textBox } = this.props;
+
+        const {
+            chartConfig: { width, yScale, height },
+        } = moreProps;
+
+        const y = Math.round(yScale(yValue));
+
+        if (y >= 0 && y <= height) {
+            const rect = {
+                x: textBox.left,
+                y: y - textBox.height / 2,
+                height: textBox.height,
+            };
+            return {
+                x1: 0,
+                x2: width,
+                y,
+                rect,
+            };
+        }
+    };
+}

package/src/components/LinearRegressionChannelWithArea.tsx

@@ -0,0 +1,169 @@
+import { deviation, sum, zip } from "d3-array";
+import * as React from "react";
+import { getClosestItemIndexes, getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+import { isHovering2 } from "./InteractiveStraightLine";
+
+export interface LinearRegressionChannelWithAreaProps {
+    readonly x1Value: any;
+    readonly x2Value: any;
+    readonly type:
+        | "SD" // standard deviation channel
+        | "Raff"; // Raff Regression Channel
+    readonly interactiveCursorClass?: string;
+    readonly strokeStyle: string;
+    readonly strokeWidth: number;
+    readonly fillStyle: string;
+    readonly onDragStart?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDrag?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDragComplete?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onUnHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly defaultClassName?: string;
+    readonly tolerance: number;
+    readonly selected: boolean;
+}
+
+export class LinearRegressionChannelWithArea extends React.Component<LinearRegressionChannelWithAreaProps> {
+    public static defaultProps = {
+        type: "SD", // standard dev
+        strokeWidth: 1,
+        tolerance: 4,
+        selected: false,
+    };
+
+    public render() {
+        const { selected, interactiveCursorClass } = this.props;
+        const { onDragStart, onDrag, onDragComplete, onHover, onUnHover } = this.props;
+
+        return (
+            <GenericChartComponent
+                isHover={this.isHover}
+                canvasToDraw={getMouseCanvas}
+                canvasDraw={this.drawOnCanvas}
+                interactiveCursorClass={interactiveCursorClass}
+                selected={selected}
+                onDragStart={onDragStart}
+                onDrag={onDrag}
+                onDragComplete={onDragComplete}
+                onHover={onHover}
+                onUnHover={onUnHover}
+                drawOn={["mousemove", "mouseleave", "pan", "drag"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { strokeStyle, strokeWidth, fillStyle } = this.props;
+        const { x1, y1, x2, y2, dy } = helper(this.props, moreProps);
+
+        ctx.lineWidth = strokeWidth;
+        ctx.strokeStyle = strokeStyle;
+        ctx.fillStyle = fillStyle;
+
+        ctx.beginPath();
+        ctx.moveTo(x1, y1 - dy);
+        ctx.lineTo(x2, y2 - dy);
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.moveTo(x2, y2 + dy);
+        ctx.lineTo(x1, y1 + dy);
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.moveTo(x1, y1 - dy);
+        ctx.lineTo(x2, y2 - dy);
+        ctx.lineTo(x2, y2 + dy);
+        ctx.lineTo(x1, y1 + dy);
+        ctx.closePath();
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.moveTo(x2, y2);
+        ctx.lineTo(x1, y1);
+        ctx.stroke();
+    };
+
+    private readonly isHover = (moreProps: any) => {
+        const { tolerance, onHover } = this.props;
+
+        if (onHover !== undefined) {
+            const { mouseXY } = moreProps;
+
+            const { x1, y1, x2, y2, dy } = helper(this.props, moreProps);
+            const yDiffs = [-dy, 0, dy];
+
+            const hovering = yDiffs.reduce(
+                (result, diff) => result || isHovering2([x1, y1 + diff], [x2, y2 + diff], mouseXY, tolerance),
+                false,
+            );
+            return hovering;
+        }
+        return false;
+    };
+}
+
+export function edge1Provider(props: any) {
+    return function (moreProps: any) {
+        const { x1, y1 } = helper(props, moreProps);
+        return [x1, y1];
+    };
+}
+
+export function edge2Provider(props: any) {
+    return function (moreProps: any) {
+        const { x2, y2 } = helper(props, moreProps);
+        return [x2, y2];
+    };
+}
+
+function helper(props: any, moreProps: any) {
+    const { x1Value, x2Value, type } = props;
+
+    const {
+        xScale,
+        chartConfig: { yScale },
+        fullData,
+    } = moreProps;
+    const { xAccessor } = moreProps;
+
+    const { left } = getClosestItemIndexes(fullData, x1Value, xAccessor);
+    const { right } = getClosestItemIndexes(fullData, x2Value, xAccessor);
+
+    const startIndex = Math.min(left, right);
+    const endIndex = Math.max(left, right) + 1;
+
+    const array = fullData.slice(startIndex, endIndex);
+
+    const xs = array.map((d: any) => xAccessor(d).valueOf());
+    const ys = array.map((d: any) => d.close);
+    const n = array.length;
+
+    const xys = zip<number>(xs, ys).map((d) => {
+        return d[0] * d[1];
+    });
+    const xSquareds = xs.map((x: any) => Math.pow(x, 2));
+
+    const b = (n * sum(xys) - sum(xs) * sum(ys)) / (n * sum(xSquareds) - Math.pow(sum(xs), 2));
+    const a = (sum(ys) - b * sum(xs)) / n;
+
+    const newy1 = a + b * x1Value;
+    const newy2 = a + b * x2Value;
+
+    const x1 = xScale(x1Value);
+    const y1 = yScale(newy1);
+    const x2 = xScale(x2Value);
+    const y2 = yScale(newy2);
+
+    const stdDev = type === "SD" ? deviation<any>(array, (d) => d.close) : 0;
+
+    const dy = yScale(newy1 - stdDev!) - y1;
+
+    return {
+        x1,
+        y1,
+        x2,
+        y2,
+        dy,
+    };
+}

package/src/components/MouseLocationIndicator.tsx

@@ -0,0 +1,128 @@
+import {
+    functor,
+    getClosestValue,
+    getMouseCanvas,
+    GenericChartComponent,
+    isDefined,
+    noop,
+    shallowEqual,
+} from "@tradingaction/core";
+import * as React from "react";
+import { getXValue } from "@tradingaction/core/lib/utils/ChartDataUtil";
+
+export interface MouseLocationIndicatorProps {
+    readonly enabled: boolean;
+    readonly snap: boolean;
+    readonly shouldDisableSnap: (e: React.MouseEvent) => boolean;
+    readonly snapTo?: (datum: any) => number | number[];
+    readonly onMouseMove: (e: React.MouseEvent, xyValue: number[], moreProps: any) => void;
+    readonly onMouseDown: (e: React.MouseEvent, xyValue: number[], moreProps: any) => void;
+    readonly onClick: (e: React.MouseEvent, xyValue: number[], moreProps: any) => void;
+    readonly r: number;
+    readonly stroke: string;
+    readonly strokeWidth: number;
+    readonly opacity: number;
+    readonly disablePan: boolean;
+}
+
+export class MouseLocationIndicator extends React.Component<MouseLocationIndicatorProps> {
+    public static defaultProps = {
+        onMouseMove: noop,
+        onMouseDown: noop,
+        onClick: noop,
+        shouldDisableSnap: functor(false),
+        stroke: "#000000",
+        strokeWidth: 1,
+        opacity: 1,
+        disablePan: true,
+    };
+
+    private mutableState: any = {};
+
+    public render() {
+        const { enabled, disablePan } = this.props;
+
+        return (
+            <GenericChartComponent
+                onMouseDown={this.handleMouseDown}
+                onClick={this.handleClick}
+                onMouseMove={this.handleMousePosChange}
+                onPan={this.handleMousePosChange}
+                disablePan={enabled && disablePan}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getMouseCanvas}
+                drawOn={["mousemove", "pan"]}
+            />
+        );
+    }
+
+    private readonly xy = (e: React.MouseEvent, moreProps: any) => {
+        const { xAccessor, plotData } = moreProps;
+        const {
+            mouseXY,
+            currentItem,
+            xScale,
+            chartConfig: { yScale },
+        } = moreProps;
+        const { enabled, snap, shouldDisableSnap, snapTo } = this.props;
+
+        if (enabled && isDefined(currentItem) && isDefined(e)) {
+            const xValue =
+                snap && !shouldDisableSnap(e)
+                    ? xAccessor(currentItem)
+                    : getXValue(xScale, xAccessor, mouseXY, plotData);
+            const yValue =
+                snap && snapTo !== undefined && !shouldDisableSnap(e)
+                    ? getClosestValue(snapTo(currentItem), yScale.invert(mouseXY[1]))
+                    : yScale.invert(mouseXY[1]);
+
+            const x = xScale(xValue);
+            const y = yScale(yValue);
+
+            return { xValue, yValue, x, y };
+        }
+    };
+
+    private readonly handleClick = (e: React.MouseEvent, moreProps: any) => {
+        const pos = this.xy(e, moreProps);
+        if (pos !== undefined && isDefined(pos)) {
+            const { xValue, yValue, x, y } = pos;
+            this.mutableState = { x, y };
+            this.props.onClick(e, [xValue, yValue], moreProps);
+        }
+    };
+
+    private readonly handleMouseDown = (e: React.MouseEvent, moreProps: any) => {
+        const pos = this.xy(e, moreProps);
+        if (pos !== undefined && isDefined(pos)) {
+            const { xValue, yValue, x, y } = pos;
+            this.mutableState = { x, y };
+            this.props.onMouseDown(e, [xValue, yValue], moreProps);
+        }
+    };
+
+    private readonly handleMousePosChange = (e: React.MouseEvent, moreProps: any) => {
+        if (!shallowEqual(moreProps.mousXY, moreProps.prevMouseXY)) {
+            const pos = this.xy(e, moreProps);
+            if (pos !== undefined && isDefined(pos)) {
+                const { xValue, yValue, x, y } = pos;
+                this.mutableState = { x, y };
+                this.props.onMouseMove(e, [xValue, yValue], moreProps);
+            }
+        }
+    };
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { enabled, r, stroke, strokeWidth } = this.props;
+        const { x, y } = this.mutableState;
+        const { show } = moreProps;
+        if (enabled && show && isDefined(x)) {
+            ctx.lineWidth = strokeWidth;
+            ctx.strokeStyle = stroke;
+            ctx.moveTo(x, y);
+            ctx.beginPath();
+            ctx.arc(x, y, r, 0, 2 * Math.PI, false);
+            ctx.stroke();
+        }
+    };
+}

package/src/components/Text.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+
+export interface TextProps {
+    readonly children: string;
+    readonly fontFamily: string;
+    readonly fontSize: number;
+    readonly fillStyle: string;
+    readonly selected?: boolean;
+    readonly xyProvider: (moreProps: any) => number[];
+}
+
+export class Text extends React.Component<TextProps> {
+    public static defaultProps = {
+        selected: false,
+    };
+
+    public render() {
+        const { selected } = this.props;
+
+        return (
+            <GenericChartComponent
+                isHover={this.isHover}
+                selected={selected}
+                canvasToDraw={getMouseCanvas}
+                canvasDraw={this.drawOnCanvas}
+                drawOn={["mousemove", "pan", "drag"]}
+            />
+        );
+    }
+
+    private readonly isHover = () => {
+        return false;
+    };
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { xyProvider, fontFamily, fontSize, fillStyle, children } = this.props;
+
+        const [x, y] = xyProvider(moreProps);
+
+        ctx.font = `${fontSize}px ${fontFamily}`;
+        ctx.fillStyle = fillStyle;
+
+        ctx.beginPath();
+        ctx.fillText(children, x, y);
+    };
+}

package/src/components/index.ts

@@ -0,0 +1,11 @@
+export * from "./ChannelWithArea";
+export * from "./ClickableCircle";
+export * from "./ClickableShape";
+export * from "./GannFan";
+export * from "./HoverTextNearMouse";
+export * from "./InteractiveStraightLine";
+export * from "./InteractiveText";
+export * from "./InteractiveYCoordinate";
+export * from "./LinearRegressionChannelWithArea";
+export * from "./MouseLocationIndicator";
+export * from "./Text";