@tradingaction/interactive 2.0.13

package/src/components/GannFan.tsx

@@ -0,0 +1,189 @@
+import { pairs } from "d3-array";
+import * as React from "react";
+import { generateLine, isHovering2 } from "./InteractiveStraightLine";
+import { isDefined, isNotDefined, getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+
+export interface GannFanProps {
+    readonly startXY: number[];
+    readonly defaultClassName?: string;
+    readonly endXY: number[];
+    readonly fillStyle: Array<string>;
+    readonly fontFamily: string;
+    readonly fontSize: number;
+    readonly fontFill: string;
+    readonly interactiveCursorClass?: 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 selected: boolean;
+    readonly strokeStyle: string;
+    readonly strokeWidth: number;
+    readonly tolerance: number;
+}
+
+export class GannFan extends React.Component<GannFanProps> {
+    public static defaultProps = {
+        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, fontFamily, fontSize, fontFill } = this.props;
+
+        const lines = this.helper(this.props, moreProps);
+
+        ctx.lineWidth = strokeWidth;
+        ctx.strokeStyle = strokeStyle;
+        ctx.font = `${fontSize}px ${fontFamily}`;
+        ctx.fillStyle = fontFill;
+
+        lines.forEach((line) => {
+            const { x1, y1, x2, y2, label } = line;
+
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.fillText(label.text, label.x, label.y);
+        });
+        const pairsOfLines = pairs(lines);
+
+        pairsOfLines.forEach(([line1, line2], idx) => {
+            ctx.fillStyle = fillStyle[idx];
+
+            ctx.beginPath();
+            ctx.moveTo(line1.x1, line1.y1);
+            ctx.lineTo(line1.x2, line1.y2);
+            ctx.lineTo(line2.x2, line2.y2);
+            ctx.closePath();
+            ctx.fill();
+        });
+    };
+
+    private readonly isHover = (moreProps: any) => {
+        const { tolerance, onHover } = this.props;
+        const { mouseXY } = moreProps;
+        const [mouseX, mouseY] = mouseXY;
+
+        let hovering = false;
+        if (isDefined(onHover)) {
+            const lines = this.helper(this.props, moreProps);
+
+            // tslint:disable-next-line: prefer-for-of
+            for (let i = 0; i < lines.length; i++) {
+                const line1 = lines[i];
+
+                const left = Math.min(line1.x1, line1.x2);
+                const right = Math.max(line1.x1, line1.x2);
+                const top = Math.min(line1.y1, line1.y2);
+                const bottom = Math.max(line1.y1, line1.y2);
+
+                const isWithinLineBounds = mouseX >= left && mouseX <= right && mouseY >= top && mouseY <= bottom;
+
+                hovering =
+                    isWithinLineBounds && isHovering2([line1.x1, line1.y1], [line1.x2, line1.y2], mouseXY, tolerance);
+
+                if (hovering) {
+                    break;
+                }
+            }
+        }
+        return hovering;
+    };
+
+    private readonly getLineCoordinates = (start: number[], endX: number, endY: number, text: string) => {
+        const end = [endX, endY];
+        return {
+            start,
+            end,
+            text,
+        };
+    };
+
+    private readonly helper = (props: GannFanProps, moreProps: any) => {
+        const { startXY, endXY } = props;
+
+        const {
+            xScale,
+            chartConfig: { yScale },
+        } = moreProps;
+        if (isNotDefined(startXY) || isNotDefined(endXY)) {
+            return [];
+        }
+        const [x1, y1] = startXY;
+        const [x2, y2] = endXY;
+
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+
+        if (dx !== 0 && dy !== 0) {
+            const halfY = this.getLineCoordinates(startXY, x2, y1 + dy / 2, "2/1");
+            const oneThirdY = this.getLineCoordinates(startXY, x2, y1 + dy / 3, "3/1");
+            const oneFourthY = this.getLineCoordinates(startXY, x2, y1 + dy / 4, "4/1");
+            const oneEighthY = this.getLineCoordinates(startXY, x2, y1 + dy / 8, "8/1");
+            const halfX = this.getLineCoordinates(startXY, x1 + dx / 2, y2, "1/2");
+            const oneThirdX = this.getLineCoordinates(startXY, x1 + dx / 3, y2, "1/3");
+            const oneFourthX = this.getLineCoordinates(startXY, x1 + dx / 4, y2, "1/4");
+            const oneEighthX = this.getLineCoordinates(startXY, x1 + dx / 8, y2, "1/8");
+            const lines = [
+                oneEighthX,
+                oneFourthX,
+                oneThirdX,
+                halfX,
+                { start: startXY, end: endXY, text: "1/1" },
+                halfY,
+                oneThirdY,
+                oneFourthY,
+                oneEighthY,
+            ];
+            const lineCoods = lines.map((line) => {
+                // tslint:disable-next-line: no-shadowed-variable
+                const { x1, y1, x2, y2 } = generateLine({
+                    type: "RAY",
+                    start: line.start,
+                    end: line.end,
+                    xScale,
+                    yScale,
+                });
+                return {
+                    x1: xScale(x1),
+                    y1: yScale(y1),
+                    x2: xScale(x2),
+                    y2: yScale(y2),
+                    label: {
+                        x: xScale(line.end[0]),
+                        y: yScale(line.end[1]),
+                        text: line.text,
+                    },
+                };
+            });
+            return lineCoods;
+        }
+        return [];
+    };
+}

package/src/components/HoverTextNearMouse.tsx

@@ -0,0 +1,174 @@
+import * as React from "react";
+import { isDefined, GenericChartComponent } from "@tradingaction/core";
+
+const PADDING = 10;
+const MIN_WIDTH = PADDING;
+
+export interface HoverTextNearMouseProps {
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fill?: string;
+    readonly text?: string;
+    readonly bgFill?: string;
+    readonly bgOpacity?: number;
+    readonly bgWidth: number | string;
+    readonly bgHeight: number | string;
+    readonly show: boolean;
+}
+
+interface HoverTextNearMouseState {
+    textHeight?: number;
+    textWidth?: number;
+}
+
+export class HoverTextNearMouse extends React.Component<HoverTextNearMouseProps, HoverTextNearMouseState> {
+    public static defaultProps = {
+        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 12,
+        fill: "#000000",
+        bgFill: "#FA9325",
+        bgOpacity: 0.5,
+    };
+
+    private readonly textNode = React.createRef<SVGTextElement>();
+
+    public constructor(props: HoverTextNearMouseProps) {
+        super(props);
+
+        this.state = {
+            textWidth: undefined,
+            textHeight: undefined,
+        };
+    }
+
+    public componentDidMount() {
+        this.updateTextSize();
+    }
+
+    public componentDidUpdate() {
+        this.updateTextSize();
+    }
+
+    public render() {
+        const { text } = this.props;
+        if (text) {
+            return <GenericChartComponent svgDraw={this.renderSVG} drawOn={["mousemove"]} />;
+        } else {
+            return null;
+        }
+    }
+
+    private readonly renderSVG = (moreProps: any) => {
+        const { fontFamily, fontSize, fill, bgFill, bgOpacity } = this.props;
+
+        const textMetaData = helper(
+            {
+                ...this.props,
+                bgWidth: this.getBgWidth(),
+                bgHeight: this.getBgHeight(),
+            },
+            moreProps,
+        );
+
+        if (textMetaData !== undefined && isDefined(textMetaData)) {
+            const { rect, text } = textMetaData;
+            return (
+                <g>
+                    <rect fill={bgFill} fillOpacity={bgOpacity} stroke={bgFill} {...rect} />
+                    <text
+                        ref={this.textNode}
+                        fontSize={fontSize}
+                        fontFamily={fontFamily}
+                        textAnchor="start"
+                        alignmentBaseline={"central"}
+                        fill={fill}
+                        x={text.x}
+                        y={text.y}
+                    >
+                        {text.text}
+                    </text>
+                </g>
+            );
+        }
+
+        return null;
+    };
+
+    private readonly getBgHeight = () => {
+        const { bgHeight } = this.props;
+        const { textHeight } = this.state;
+
+        if (bgHeight !== "auto") {
+            return bgHeight;
+        } else if (textHeight !== undefined) {
+            return textHeight + PADDING;
+        } else {
+            return MIN_WIDTH;
+        }
+    };
+
+    private readonly getBgWidth = () => {
+        const { bgWidth } = this.props;
+        const { textWidth } = this.state;
+
+        if (bgWidth !== "auto") {
+            return bgWidth;
+        } else if (textWidth !== undefined) {
+            return textWidth + PADDING;
+        } else {
+            return MIN_WIDTH;
+        }
+    };
+
+    private readonly updateTextSize = () => {
+        const { bgWidth, bgHeight } = this.props;
+        if (bgWidth === "auto" || bgHeight === "auto") {
+            const textNode = this.textNode.current;
+            if (textNode !== null) {
+                const { width, height } = textNode.getBBox();
+                if (this.state.textWidth !== width || this.state.textHeight !== height) {
+                    this.setState({
+                        textWidth: width,
+                        textHeight: height,
+                    });
+                }
+            }
+        }
+    };
+}
+
+function helper(props: any, moreProps: any) {
+    const { show, bgWidth, bgHeight } = props;
+
+    const {
+        mouseXY,
+        chartConfig: { height, width },
+        show: mouseInsideCanvas,
+    } = moreProps;
+
+    if (show && mouseInsideCanvas) {
+        const [x, y] = mouseXY;
+
+        const cx = x < width / 2 ? x + PADDING : x - bgWidth - PADDING;
+
+        const cy = y < height / 2 ? y + PADDING : y - bgHeight - PADDING;
+
+        const rect = {
+            x: cx,
+            y: cy,
+            width: bgWidth,
+            height: bgHeight,
+        };
+
+        const text = {
+            text: props.text,
+            x: cx + PADDING / 2,
+            y: cy + bgHeight / 2,
+        };
+
+        return {
+            rect,
+            text,
+        };
+    }
+}

package/src/components/InteractiveStraightLine.tsx

@@ -0,0 +1,335 @@
+import {
+    getStrokeDasharrayCanvas,
+    getMouseCanvas,
+    GenericChartComponent,
+    noop,
+    strokeDashTypes,
+} from "@tradingaction/core";
+import * as React from "react";
+
+export interface StraightLineProps {
+    readonly x1Value: any;
+    readonly x2Value: any;
+    readonly y1Value: any;
+    readonly y2Value: any;
+    readonly interactiveCursorClass?: string;
+    readonly strokeStyle: string;
+    readonly strokeWidth?: number;
+    readonly strokeDasharray?: strokeDashTypes;
+    readonly type:
+        | "XLINE" // extends from -Infinity to +Infinity
+        | "RAY" // extends to +/-Infinity in one direction
+        | "LINE"; // extends between the set bounds
+    readonly onEdge1Drag?: any; // func
+    readonly onEdge2Drag?: any; // func
+    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 onDoubleClickWhenHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onClickWhenHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onClickOutside?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onContextMenuWhenHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly defaultClassName?: string;
+    readonly r?: number;
+    readonly edgeFill?: string;
+    readonly edgeStroke?: string;
+    readonly edgeStrokeWidth?: number;
+    readonly withEdge?: boolean;
+    readonly tolerance?: number;
+    readonly selected?: boolean;
+}
+
+export class InteractiveStraightLine extends React.Component<StraightLineProps> {
+    public static defaultProps = {
+        onEdge1Drag: noop,
+        onEdge2Drag: noop,
+        edgeStrokeWidth: 3,
+        edgeStroke: "#000000",
+        edgeFill: "#FFFFFF",
+        r: 10,
+        withEdge: false,
+        strokeWidth: 1,
+        strokeDasharray: "Solid",
+        children: noop,
+        tolerance: 7,
+        selected: false,
+    };
+
+    public render() {
+        const { selected, interactiveCursorClass } = this.props;
+        const {
+            onDragStart,
+            onDrag,
+            onDragComplete,
+            onHover,
+            onUnHover,
+            onDoubleClickWhenHover,
+            onClickWhenHover,
+            onClickOutside,
+            onContextMenuWhenHover,
+        } = 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", "pan", "drag"]}
+                onDoubleClickWhenHover={onDoubleClickWhenHover}
+                onClickWhenHover={onClickWhenHover}
+                onClickOutside={onClickOutside}
+                onContextMenuWhenHover={onContextMenuWhenHover}
+            />
+        );
+    }
+
+    private readonly isHover = (moreProps: any) => {
+        const { tolerance, onHover } = this.props;
+
+        if (onHover !== undefined) {
+            const { x1Value, x2Value, y1Value, y2Value, type } = this.props;
+            const { mouseXY, xScale } = moreProps;
+            const {
+                chartConfig: { yScale },
+            } = moreProps;
+
+            const hovering = isHovering({
+                x1Value,
+                y1Value,
+                x2Value,
+                y2Value,
+                mouseXY,
+                type,
+                tolerance,
+                xScale,
+                yScale,
+            });
+
+            return hovering;
+        }
+        return false;
+    };
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const {
+            strokeWidth = InteractiveStraightLine.defaultProps.strokeWidth,
+            strokeDasharray,
+            strokeStyle,
+        } = this.props;
+        const { x1, y1, x2, y2 } = helper(this.props, moreProps);
+
+        ctx.lineWidth = strokeWidth;
+        ctx.strokeStyle = strokeStyle;
+
+        const lineDash = getStrokeDasharrayCanvas(strokeDasharray);
+
+        ctx.setLineDash(lineDash);
+
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+    };
+}
+
+export function isHovering2(start: any, end: any, [mouseX, mouseY]: any, tolerance: any) {
+    const m = getSlope(start, end);
+
+    if (m !== undefined) {
+        const b = getYIntercept(m, end);
+        const y = m * mouseX + b;
+        return (
+            mouseY < y + tolerance &&
+            mouseY > y - tolerance &&
+            mouseX > Math.min(start[0], end[0]) - tolerance &&
+            mouseX < Math.max(start[0], end[0]) + tolerance
+        );
+    } else {
+        return (
+            mouseY >= Math.min(start[1], end[1]) &&
+            mouseY <= Math.max(start[1], end[1]) &&
+            mouseX < start[0] + tolerance &&
+            mouseX > start[0] - tolerance
+        );
+    }
+}
+
+export function isHovering({ x1Value, y1Value, x2Value, y2Value, mouseXY, type, tolerance, xScale, yScale }: any) {
+    const line = generateLine({
+        type,
+        start: [x1Value, y1Value],
+        end: [x2Value, y2Value],
+        xScale,
+        yScale,
+    });
+
+    const start = [xScale(line.x1), yScale(line.y1)];
+    const end = [xScale(line.x2), yScale(line.y2)];
+
+    const m = getSlope(start, end);
+    const [mouseX, mouseY] = mouseXY;
+
+    if (m !== undefined) {
+        const b = getYIntercept(m, end);
+        const y = m * mouseX + b;
+
+        return (
+            mouseY < y + tolerance &&
+            mouseY > y - tolerance &&
+            mouseX > Math.min(start[0], end[0]) - tolerance &&
+            mouseX < Math.max(start[0], end[0]) + tolerance
+        );
+    } else {
+        return (
+            mouseY >= Math.min(start[1], end[1]) &&
+            mouseY <= Math.max(start[1], end[1]) &&
+            mouseX < start[0] + tolerance &&
+            mouseX > start[0] - tolerance
+        );
+    }
+}
+
+function helper(props: any, moreProps: any) {
+    const { x1Value, x2Value, y1Value, y2Value, type } = props;
+
+    const {
+        xScale,
+        chartConfig: { yScale },
+    } = moreProps;
+
+    const modLine = generateLine({
+        type,
+        start: [x1Value, y1Value],
+        end: [x2Value, y2Value],
+        xScale,
+        yScale,
+    });
+
+    const x1 = xScale(modLine.x1);
+    const y1 = yScale(modLine.y1);
+    const x2 = xScale(modLine.x2);
+    const y2 = yScale(modLine.y2);
+
+    return {
+        x1,
+        y1,
+        x2,
+        y2,
+    };
+}
+
+export function getSlope(start: any, end: any) {
+    const m /* slope */ = end[0] === start[0] ? undefined : (end[1] - start[1]) / (end[0] - start[0]);
+    return m;
+}
+export function getYIntercept(m: any, end: any) {
+    const b /* y intercept */ = -1 * m * end[0] + end[1];
+    return b;
+}
+
+export function generateLine({ type, start, end, xScale, yScale }: any) {
+    const m /* slope */ = getSlope(start, end);
+    const b /* y intercept */ = getYIntercept(m, start);
+
+    switch (type) {
+        case "XLINE":
+            return getXLineCoordinates({
+                start,
+                end,
+                xScale,
+                yScale,
+                m,
+                b,
+            });
+        case "RAY":
+            return getRayCoordinates({
+                start,
+                end,
+                xScale,
+                yScale,
+                m,
+                b,
+            });
+        default:
+        case "LINE":
+            return getLineCoordinates({
+                start,
+                end,
+            });
+    }
+}
+
+function getXLineCoordinates({ start, end, xScale, yScale, m, b }: any) {
+    const [xBegin, xFinish] = xScale.domain();
+    const [yBegin, yFinish] = yScale.domain();
+
+    if (end[0] === start[0]) {
+        return {
+            x1: end[0],
+            y1: yBegin,
+            x2: end[0],
+            y2: yFinish,
+        };
+    }
+    const [x1, x2] = end[0] > start[0] ? [xBegin, xFinish] : [xFinish, xBegin];
+
+    return {
+        x1,
+        y1: m * x1 + b,
+        x2,
+        y2: m * x2 + b,
+    };
+}
+
+function getRayCoordinates({ start, end, xScale, yScale, m, b }: any) {
+    const [xBegin, xFinish] = xScale.domain();
+    const [yBegin, yFinish] = yScale.domain();
+
+    const x1 = start[0];
+    if (end[0] === start[0]) {
+        return {
+            x1,
+            y1: start[1],
+            x2: x1,
+            y2: end[1] > start[1] ? yFinish : yBegin,
+        };
+    }
+
+    const x2 = end[0] > start[0] ? xFinish : xBegin;
+
+    return {
+        x1,
+        y1: m * x1 + b,
+        x2,
+        y2: m * x2 + b,
+    };
+}
+
+function getLineCoordinates({ start, end }: any) {
+    const [x1, y1] = start;
+    const [x2, y2] = end;
+    if (end[0] === start[0]) {
+        return {
+            x1,
+            y1: start[1],
+            x2: x1,
+            y2: end[1],
+        };
+    }
+
+    return {
+        x1,
+        y1,
+        x2,
+        y2,
+    };
+}