@tradingaction/interactive 2.0.13

package/src/wrapper/EachFibRetracement.tsx

@@ -0,0 +1,359 @@
+import * as React from "react";
+import { head, last, noop } from "@tradingaction/core";
+import { getXValue } from "@tradingaction/core/lib/utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+import { ClickableCircle, HoverTextNearMouse, InteractiveStraightLine, generateLine, Text } from "../components";
+import { getNewXY } from "./EachTrendLine";
+
+export interface EachFibRetracementProps {
+    readonly x1: any;
+    readonly x2: any;
+    readonly y1: number;
+    readonly y2: number;
+    readonly yDisplayFormat: (value: number) => string;
+    readonly type: string;
+    readonly selected: boolean;
+    readonly appearance: {
+        readonly strokeStyle: string;
+        readonly strokeWidth: number;
+        readonly fontFamily: string;
+        readonly fontSize: number;
+        readonly fontFill: string;
+        readonly edgeStroke: string;
+        readonly edgeFill: string;
+        readonly nsEdgeFill: string;
+        readonly edgeStrokeWidth: number;
+        readonly r: number;
+    };
+    readonly interactive: boolean;
+    readonly hoverText: {
+        readonly enable: boolean;
+        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 selectedText: string;
+    };
+    readonly index?: number;
+    readonly onDrag: (e: React.MouseEvent, index: number | undefined, moreProps: any) => void;
+    readonly onDragComplete?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDoubleClick?: (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;
+}
+
+interface EachFibRetracementState {
+    hover: boolean;
+}
+
+export class EachFibRetracement extends React.Component<EachFibRetracementProps, EachFibRetracementState> {
+    public static defaultProps = {
+        yDisplayFormat: (d: number) => d.toFixed(2),
+        interactive: true,
+        appearance: {
+            strokeStyle: "#000000",
+            strokeWidth: 1,
+            fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+            fontSize: 10,
+            fontFill: "#000000",
+            edgeStroke: "#000000",
+            edgeFill: "#FFFFFF",
+            nsEdgeFill: "#000000",
+            edgeStrokeWidth: 1,
+            r: 5,
+        },
+        selected: false,
+        onDrag: noop,
+        hoverText: {
+            enable: false,
+        },
+    };
+
+    private dragStart: any;
+    // @ts-ignore
+    private isHover: any;
+    private saveNodeType: any;
+
+    public constructor(props: EachFibRetracementProps) {
+        super(props);
+
+        this.isHover = isHover.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    public render() {
+        const { x1, x2, y1, y2 } = this.props;
+        const { interactive, yDisplayFormat, type, appearance } = this.props;
+        const { strokeStyle, strokeWidth } = appearance;
+        const { fontFamily, fontSize, fontFill } = appearance;
+        const { edgeStroke, edgeFill, nsEdgeFill, edgeStrokeWidth, r } = appearance;
+        const { hoverText, selected } = this.props;
+        const { hover } = this.state;
+        const { onDragComplete } = this.props;
+        const lines = helper({ x1, x2, y1, y2 });
+
+        const {
+            enable: hoverTextEnabled,
+            selectedText: hoverTextSelected,
+            text: hoverTextUnselected,
+            ...restHoverTextProps
+        } = hoverText;
+
+        const lineType = type === "EXTEND" ? "XLINE" : type === "BOUND" ? "LINE" : "RAY";
+        const dir = head(lines).y1 > last(lines).y1 ? 3 : -1.3;
+
+        return (
+            <g>
+                {lines.map((line, j) => {
+                    const text = `${yDisplayFormat(line.y)} (${line.percent.toFixed(2)}%)`;
+
+                    const xyProvider = ({ xScale, chartConfig }: any) => {
+                        const { yScale } = chartConfig;
+                        const {
+                            x1: lineX1,
+                            y1: lineY1,
+                            x2: lineX2,
+                        } = generateLine({
+                            type: lineType,
+                            start: [line.x1, line.y],
+                            end: [line.x2, line.y],
+                            xScale,
+                            yScale,
+                        });
+
+                        const x = xScale(Math.min(lineX1, lineX2)) + 10;
+                        const y = yScale(lineY1) + dir * 4;
+                        return [x, y];
+                    };
+
+                    const firstOrLast = j === 0 || j === lines.length - 1;
+
+                    const interactiveCursorClass = firstOrLast
+                        ? "react-financial-charts-ns-resize-cursor"
+                        : "react-financial-charts-move-cursor";
+
+                    const interactiveEdgeCursorClass = firstOrLast
+                        ? "react-financial-charts-ns-resize-cursor"
+                        : "react-financial-charts-ew-resize-cursor";
+
+                    const dragHandler =
+                        j === 0
+                            ? this.handleLineNSResizeTop
+                            : j === lines.length - 1
+                            ? this.handleLineNSResizeBottom
+                            : this.handleLineMove;
+
+                    const edge1DragHandler =
+                        j === 0
+                            ? this.handleLineNSResizeTop
+                            : j === lines.length - 1
+                            ? this.handleLineNSResizeBottom
+                            : this.handleEdge1Drag;
+                    const edge2DragHandler =
+                        j === 0
+                            ? this.handleLineNSResizeTop
+                            : j === lines.length - 1
+                            ? this.handleLineNSResizeBottom
+                            : this.handleEdge2Drag;
+
+                    const hoverHandler = interactive ? { onHover: this.handleHover, onUnHover: this.handleHover } : {};
+                    return (
+                        <g key={j}>
+                            <InteractiveStraightLine
+                                onContextMenuWhenHover={(e, moreProps) => {
+                                    if (this.props.onContextMenuWhenHover && j == 0) {
+                                        console.log(this.props);
+                                        this.props.onContextMenuWhenHover(e, moreProps);
+                                    }
+                                }}
+                                onDoubleClickWhenHover={this.props.onDoubleClick}
+                                onClickOutside={this.props.onClickOutside}
+                                onClickWhenHover={this.props.onClickWhenHover}
+                                ref={this.saveNodeType(`line_${j}`)}
+                                selected={selected || hover}
+                                {...hoverHandler}
+                                type={lineType}
+                                x1Value={line.x1}
+                                y1Value={line.y}
+                                x2Value={line.x2}
+                                y2Value={line.y}
+                                strokeStyle={strokeStyle}
+                                strokeWidth={hover || selected ? strokeWidth + 1 : strokeWidth}
+                                interactiveCursorClass={interactiveCursorClass}
+                                onDragStart={this.handleLineDragStart}
+                                onDrag={dragHandler}
+                                onDragComplete={onDragComplete}
+                            />
+                            <Text
+                                selected={selected}
+                                xyProvider={xyProvider}
+                                fontFamily={fontFamily}
+                                fontSize={fontSize}
+                                fillStyle={fontFill}
+                            >
+                                {text}
+                            </Text>
+                            <ClickableCircle
+                                ref={this.saveNodeType("edge1")}
+                                show={selected || hover}
+                                cx={line.x1}
+                                cy={line.y}
+                                r={r}
+                                fillStyle={firstOrLast ? nsEdgeFill : edgeFill}
+                                strokeStyle={edgeStroke}
+                                strokeWidth={edgeStrokeWidth}
+                                interactiveCursorClass={interactiveEdgeCursorClass}
+                                onDrag={edge1DragHandler}
+                                onDragComplete={onDragComplete}
+                            />
+                            <ClickableCircle
+                                ref={this.saveNodeType("edge2")}
+                                show={selected || hover}
+                                cx={line.x2}
+                                cy={line.y}
+                                r={r}
+                                fillStyle={firstOrLast ? nsEdgeFill : edgeFill}
+                                strokeStyle={edgeStroke}
+                                strokeWidth={edgeStrokeWidth}
+                                interactiveCursorClass={interactiveEdgeCursorClass}
+                                onDrag={edge2DragHandler}
+                                onDragComplete={onDragComplete}
+                            />
+                        </g>
+                    );
+                })}
+                <HoverTextNearMouse
+                    show={hoverTextEnabled && hover}
+                    {...restHoverTextProps}
+                    text={selected ? hoverTextSelected : hoverTextUnselected}
+                />
+            </g>
+        );
+    }
+
+    private readonly handleEdge2Drag = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag, x1, y1, y2 } = this.props;
+
+        const [x2] = getNewXY(moreProps);
+
+        onDrag(e, index, {
+            x1,
+            y1,
+            x2,
+            y2,
+        });
+    };
+
+    private readonly handleEdge1Drag = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag, y1, x2, y2 } = this.props;
+
+        const [x1] = getNewXY(moreProps);
+
+        onDrag(e, index, {
+            x1,
+            y1,
+            x2,
+            y2,
+        });
+    };
+
+    private readonly handleLineNSResizeBottom = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag, x1, y1, x2 } = this.props;
+
+        const [, y2] = getNewXY(moreProps);
+
+        onDrag(e, index, {
+            x1,
+            y1,
+            x2,
+            y2,
+        });
+    };
+
+    private readonly handleLineNSResizeTop = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag, x1, x2, y2 } = this.props;
+
+        const [, y1] = getNewXY(moreProps);
+
+        onDrag(e, index, {
+            x1,
+            y1,
+            x2,
+            y2,
+        });
+    };
+
+    private readonly handleLineMove = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag } = this.props;
+
+        const { x1: x1Value, y1: y1Value, x2: x2Value, y2: y2Value } = this.dragStart;
+
+        const {
+            xScale,
+            chartConfig: { yScale },
+            xAccessor,
+            fullData,
+        } = moreProps;
+        const { startPos, mouseXY } = moreProps;
+
+        const x1 = xScale(x1Value);
+        const y1 = yScale(y1Value);
+        const x2 = xScale(x2Value);
+        const y2 = yScale(y2Value);
+
+        const dx = startPos[0] - mouseXY[0];
+        const dy = startPos[1] - mouseXY[1];
+
+        const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+        const newY1Value = yScale.invert(y1 - dy);
+        const newX2Value = getXValue(xScale, xAccessor, [x2 - dx, y2 - dy], fullData);
+        const newY2Value = yScale.invert(y2 - dy);
+
+        onDrag(e, index, {
+            x1: newX1Value,
+            y1: newY1Value,
+            x2: newX2Value,
+            y2: newY2Value,
+        });
+    };
+
+    private readonly handleLineDragStart = () => {
+        const { x1, y1, x2, y2 } = this.props;
+
+        this.dragStart = {
+            x1,
+            y1,
+            x2,
+            y2,
+        };
+    };
+
+    private readonly handleHover = (_: React.MouseEvent, moreProps: any) => {
+        if (this.state.hover !== moreProps.hovering) {
+            this.setState({
+                hover: moreProps.hovering,
+            });
+        }
+    };
+}
+
+function helper({ x1, y1, x2, y2 }: any) {
+    const dy = y2 - y1;
+    const retracements = [100, 61.8, 50, 38.2, 23.6, 0].map((each) => ({
+        percent: each,
+        x1,
+        x2,
+        y: y2 - (each / 100) * dy,
+    }));
+
+    return retracements;
+}

package/src/wrapper/EachGannFan.tsx

@@ -0,0 +1,289 @@
+import * as React from "react";
+import { isDefined, noop } from "@tradingaction/core";
+import { getXValue } from "@tradingaction/core/lib/utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+import { ClickableCircle, GannFan, HoverTextNearMouse } from "../components";
+
+export interface EachGannFanProps {
+    readonly startXY: number[];
+    readonly endXY: number[];
+    readonly dy?: number;
+    readonly interactive: boolean;
+    readonly selected: boolean;
+    readonly appearance: {
+        readonly stroke: string;
+        readonly strokeWidth: number;
+        readonly edgeStroke: string;
+        readonly edgeFill: string;
+        readonly edgeStrokeWidth: number;
+        readonly r: number;
+        readonly fill: Array<string>;
+        readonly fontFamily: string;
+        readonly fontSize: number;
+        readonly fontFill: string;
+    };
+    readonly hoverText: {
+        readonly enable: boolean;
+        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 selectedText: string;
+    };
+    readonly index?: number;
+    readonly onDrag: (e: React.MouseEvent, index: number | undefined, moreProps: any) => void;
+    readonly onDragComplete?: (e: React.MouseEvent, moreProps: any) => void;
+}
+
+interface EachGannFanState {
+    hover: boolean;
+}
+
+export class EachGannFan extends React.Component<EachGannFanProps, EachGannFanState> {
+    public static defaultProps = {
+        yDisplayFormat: (d: number) => d.toFixed(2),
+        interactive: true,
+        selected: false,
+        appearance: {
+            stroke: "#000000",
+            strokeWidth: 1,
+            edgeStroke: "#000000",
+            edgeFill: "#FFFFFF",
+            edgeStrokeWidth: 1,
+            r: 5,
+            fill: [
+                "rgba(31, 119, 180, 0.2)",
+                "rgba(255, 126, 14, 0.2)",
+                "rgba(44, 160, 44, 0.2)",
+                "rgba(214, 39, 39, 0.2)",
+                "rgba(148, 103, 189, 0.2)",
+                "rgba(140, 86, 75, 0.2)",
+                "rgba(227, 119, 194, 0.2)",
+                "rgba(127, 127, 127, 0.2)",
+            ],
+            fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+            fontSize: 10,
+            fontFill: "#000000",
+        },
+        onDrag: noop,
+        hoverText: {
+            ...HoverTextNearMouse.defaultProps,
+            enable: true,
+            bgHeight: 18,
+            bgWidth: 120,
+            text: "Click to select object",
+        },
+    };
+
+    // @ts-ignore
+    private isHover: any;
+    private dragStart: any;
+    private saveNodeType: any;
+
+    public constructor(props: EachGannFanProps) {
+        super(props);
+
+        this.isHover = isHover.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    public render() {
+        const { startXY, endXY } = this.props;
+        const { interactive, appearance } = this.props;
+        const { edgeFill, stroke, strokeWidth, fill } = appearance;
+        const { fontFamily, fontSize, fontFill } = appearance;
+        const { hoverText, selected } = this.props;
+        const { onDragComplete } = this.props;
+        const { hover } = this.state;
+        const { enable: hoverTextEnabled, ...restHoverTextProps } = hoverText;
+
+        const hoverHandler = interactive ? { onHover: this.handleHover, onUnHover: this.handleHover } : {};
+
+        const line1Edge =
+            isDefined(startXY) && isDefined(endXY) ? (
+                <g>
+                    {this.getEdgeCircle({
+                        xy: startXY,
+                        dragHandler: this.handleLine1Edge1Drag,
+                        cursor: "react-financial-charts-move-cursor",
+                        fill: edgeFill,
+                        edge: "edge1",
+                    })}
+                    {this.getEdgeCircle({
+                        xy: endXY,
+                        dragHandler: this.handleLine1Edge2Drag,
+                        cursor: "react-financial-charts-move-cursor",
+                        fill: edgeFill,
+                        edge: "edge2",
+                    })}
+                </g>
+            ) : null;
+
+        return (
+            <g>
+                <GannFan
+                    ref={this.saveNodeType("fan")}
+                    selected={hover || selected}
+                    {...hoverHandler}
+                    startXY={startXY}
+                    endXY={endXY}
+                    strokeStyle={stroke}
+                    strokeWidth={hover || selected ? strokeWidth + 1 : strokeWidth}
+                    fillStyle={fill}
+                    fontFamily={fontFamily}
+                    fontSize={fontSize}
+                    fontFill={fontFill}
+                    interactiveCursorClass="react-financial-charts-move-cursor"
+                    onDragStart={this.handleDragStart}
+                    onDrag={this.handleFanDrag}
+                    onDragComplete={onDragComplete}
+                />
+                {line1Edge}
+                <HoverTextNearMouse show={hoverTextEnabled && hover && !selected} {...restHoverTextProps} />
+            </g>
+        );
+    }
+
+    private readonly getEdgeCircle = ({ xy, dragHandler, cursor, fill, edge }: any) => {
+        const { hover } = this.state;
+        const { selected, appearance } = this.props;
+        const { edgeStroke, edgeStrokeWidth, r } = appearance;
+        const { onDragComplete } = this.props;
+
+        return (
+            <ClickableCircle
+                ref={this.saveNodeType(edge)}
+                show={selected || hover}
+                cx={xy[0]}
+                cy={xy[1]}
+                r={r}
+                fillStyle={fill}
+                strokeStyle={edgeStroke}
+                strokeWidth={edgeStrokeWidth}
+                interactiveCursorClass={cursor}
+                onDragStart={this.handleDragStart}
+                onDrag={dragHandler}
+                onDragComplete={onDragComplete}
+            />
+        );
+    };
+
+    private readonly handleLine1Edge2Drag = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag } = this.props;
+        const { endXY } = this.dragStart;
+
+        const {
+            startPos,
+            mouseXY,
+            xAccessor,
+            xScale,
+            fullData,
+            chartConfig: { yScale },
+        } = moreProps;
+
+        const dx = startPos[0] - mouseXY[0];
+        const dy = startPos[1] - mouseXY[1];
+
+        const x1 = xScale(endXY[0]);
+        const y1 = yScale(endXY[1]);
+
+        const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+        const newY1Value = yScale.invert(y1 - dy);
+
+        onDrag(e, index, {
+            startXY: this.dragStart.startXY,
+            endXY: [newX1Value, newY1Value],
+            dy: this.dragStart.dy,
+        });
+    };
+
+    private readonly handleLine1Edge1Drag = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag } = this.props;
+        const { startXY } = this.dragStart;
+
+        const {
+            startPos,
+            mouseXY,
+            xAccessor,
+            xScale,
+            fullData,
+            chartConfig: { yScale },
+        } = moreProps;
+
+        const dx = startPos[0] - mouseXY[0];
+        const dy = startPos[1] - mouseXY[1];
+
+        const x1 = xScale(startXY[0]);
+        const y1 = yScale(startXY[1]);
+
+        const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+        const newY1Value = yScale.invert(y1 - dy);
+
+        onDrag(e, index, {
+            startXY: [newX1Value, newY1Value],
+            endXY: this.dragStart.endXY,
+            dy: this.dragStart.dy,
+        });
+    };
+
+    private readonly handleFanDrag = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag } = this.props;
+
+        const { startXY, endXY } = this.dragStart;
+
+        const {
+            xScale,
+            chartConfig: { yScale },
+            xAccessor,
+            fullData,
+        } = moreProps;
+        const { startPos, mouseXY } = moreProps;
+
+        const x1 = xScale(startXY[0]);
+        const y1 = yScale(startXY[1]);
+        const x2 = xScale(endXY[0]);
+        const y2 = yScale(endXY[1]);
+
+        const dx = startPos[0] - mouseXY[0];
+        const dy = startPos[1] - mouseXY[1];
+
+        const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+        const newY1Value = yScale.invert(y1 - dy);
+        const newX2Value = getXValue(xScale, xAccessor, [x2 - dx, y2 - dy], fullData);
+        const newY2Value = yScale.invert(y2 - dy);
+
+        // const newDy = newY2Value - endXY[1] + this.dragStart.dy;
+
+        onDrag(e, index, {
+            startXY: [newX1Value, newY1Value],
+            endXY: [newX2Value, newY2Value],
+            dy: this.dragStart.dy,
+        });
+    };
+
+    private readonly handleDragStart = () => {
+        const { startXY, endXY, dy } = this.props;
+
+        this.dragStart = {
+            startXY,
+            endXY,
+            dy,
+        };
+    };
+
+    private readonly handleHover = (moreProps: any) => {
+        if (this.state.hover !== moreProps.hovering) {
+            this.setState({
+                hover: moreProps.hovering,
+            });
+        }
+    };
+}