@tradingaction/interactive 2.0.13

package/src/GannFan.tsx

@@ -0,0 +1,233 @@
+import * as React from "react";
+import { isDefined, isNotDefined, noop } from "@tradingaction/core";
+import { HoverTextNearMouse, MouseLocationIndicator } from "./components";
+import { isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
+import { EachGannFan } from "./wrapper";
+
+export interface GannFanProps {
+    readonly enabled: boolean;
+    readonly onStart?: () => void;
+    readonly onComplete: (e: React.MouseEvent, newfans: any[], moreProps: any) => void;
+    readonly onSelect?: (e: React.MouseEvent, interactives: any[], moreProps: any) => void;
+    readonly currentPositionStroke?: string;
+    readonly currentPositionStrokeWidth?: number;
+    readonly currentPositionOpacity?: number;
+    readonly currentPositionRadius?: number;
+    readonly appearance: {
+        readonly stroke: string;
+        readonly strokeOpacity: number;
+        readonly fillOpacity: number;
+        readonly strokeWidth: number;
+        readonly edgeStroke: string;
+        readonly edgeFill: string;
+        readonly edgeStrokeWidth: number;
+        readonly r: number;
+        readonly fill: string[];
+        readonly fontFamily: string;
+        readonly fontSize: number;
+        readonly fontFill: string;
+    };
+    readonly hoverText: object;
+    readonly fans: any[];
+}
+
+interface GannFanState {
+    current?: any;
+    override?: any;
+}
+
+export class GannFan extends React.Component<GannFanProps, GannFanState> {
+    public static defaultProps = {
+        appearance: {
+            stroke: "#000000",
+            fillOpacity: 0.2,
+            strokeOpacity: 1,
+            strokeWidth: 1,
+            edgeStroke: "#000000",
+            edgeFill: "#FFFFFF",
+            edgeStrokeWidth: 1,
+            r: 5,
+            fill: ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"],
+            fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+            fontSize: 12,
+            fontFill: "#000000",
+        },
+        onSelect: noop,
+        currentPositionStroke: "#000000",
+        currentPositionOpacity: 1,
+        currentPositionStrokeWidth: 3,
+        currentPositionRadius: 4,
+        hoverText: {
+            ...HoverTextNearMouse.defaultProps,
+            enable: true,
+            bgHeight: 18,
+            bgWidth: 120,
+            text: "Click to select object",
+        },
+        fans: [],
+    };
+
+    private mouseMoved: any;
+    // @ts-ignore
+    private getSelectionState: any;
+    private saveNodeType: any;
+
+    // @ts-ignore
+    private terminate: any;
+
+    public constructor(props: GannFanProps) {
+        super(props);
+
+        this.terminate = terminate.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+
+        this.getSelectionState = isHoverForInteractiveType("fans").bind(this);
+
+        this.state = {};
+    }
+
+    public render() {
+        const {
+            appearance,
+            currentPositionOpacity,
+            currentPositionRadius = GannFan.defaultProps.currentPositionRadius,
+            currentPositionStroke,
+            currentPositionStrokeWidth,
+            enabled,
+            fans,
+            hoverText,
+        } = this.props;
+
+        const { current, override } = this.state;
+        const overrideIndex = isDefined(override) ? override.index : null;
+
+        const tempChannel =
+            isDefined(current) && isDefined(current.endXY) ? (
+                <EachGannFan interactive={false} {...current} appearance={appearance} hoverText={hoverText} />
+            ) : null;
+
+        return (
+            <g>
+                {fans.map((each, idx) => {
+                    const eachAppearance = isDefined(each.appearance)
+                        ? { ...appearance, ...each.appearance }
+                        : appearance;
+
+                    return (
+                        <EachGannFan
+                            key={idx}
+                            ref={this.saveNodeType(idx)}
+                            index={idx}
+                            selected={each.selected}
+                            {...(idx === overrideIndex ? override : each)}
+                            appearance={eachAppearance}
+                            hoverText={hoverText}
+                            onDrag={this.handleDragFan}
+                            onDragComplete={this.handleDragFanComplete}
+                        />
+                    );
+                })}
+                {tempChannel}
+                <MouseLocationIndicator
+                    enabled={enabled}
+                    snap={false}
+                    r={currentPositionRadius}
+                    stroke={currentPositionStroke}
+                    opacity={currentPositionOpacity}
+                    strokeWidth={currentPositionStrokeWidth}
+                    onMouseDown={this.handleStart}
+                    onClick={this.handleEnd}
+                    onMouseMove={this.handleDrawFan}
+                />
+            </g>
+        );
+    }
+
+    private readonly handleEnd = (e: React.MouseEvent, _: any, moreProps: any) => {
+        const { current } = this.state;
+        const { fans, appearance } = this.props;
+
+        if (this.mouseMoved && isDefined(current) && isDefined(current.startXY)) {
+            const newfans = [
+                ...fans.map((d) => ({ ...d, selected: false })),
+                { ...current, selected: true, appearance },
+            ];
+            this.setState(
+                {
+                    current: null,
+                },
+                () => {
+                    const { onComplete } = this.props;
+                    if (onComplete !== undefined) {
+                        onComplete(e, newfans, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleStart = (_: React.MouseEvent, xyValue: any) => {
+        const { current } = this.state;
+
+        if (isNotDefined(current) || isNotDefined(current.startXY)) {
+            this.mouseMoved = false;
+
+            this.setState(
+                {
+                    current: {
+                        startXY: xyValue,
+                        endXY: null,
+                    },
+                },
+                () => {
+                    const { onStart } = this.props;
+                    if (onStart !== undefined) {
+                        onStart();
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleDrawFan = (_: React.MouseEvent, xyValue: any) => {
+        const { current } = this.state;
+
+        if (isDefined(current) && isDefined(current.startXY)) {
+            this.mouseMoved = true;
+
+            this.setState({
+                current: {
+                    startXY: current.startXY,
+                    endXY: xyValue,
+                },
+            });
+        }
+    };
+
+    private readonly handleDragFanComplete = (e: React.MouseEvent, moreProps: any) => {
+        const { override } = this.state;
+        const { fans } = this.props;
+
+        if (isDefined(override)) {
+            const { index, ...rest } = override;
+            const newfans = fans.map((each, idx) => (idx === index ? { ...each, ...rest, selected: true } : each));
+            this.setState(
+                {
+                    override: null,
+                },
+                () => {
+                    this.props.onComplete(e, newfans, moreProps);
+                },
+            );
+        }
+    };
+
+    private readonly handleDragFan = (_: React.MouseEvent, index: number | undefined, newXYValue: any) => {
+        this.setState({
+            override: {
+                index,
+                ...newXYValue,
+            },
+        });
+    };
+}

package/src/InteractiveText.tsx

@@ -0,0 +1,182 @@
+import * as React from "react";
+import { ChartContext, GenericChartComponent, getMouseCanvas, isDefined, noop } from "@tradingaction/core";
+import { HoverTextNearMouse } from "./components";
+import { getValueFromOverride, isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
+import { EachText } from "./wrapper";
+
+interface InteractiveTextProps {
+    readonly onChoosePosition: (e: React.MouseEvent, newText: any, moreProps: any) => void;
+    readonly onDragComplete?: (e: React.MouseEvent, newTextList: any[], moreProps: any) => void;
+    readonly onSelect?: (e: React.MouseEvent, interactives: any[], moreProps: any) => void;
+    readonly onDoubleClick?: (e: React.MouseEvent, moreProps: any) => void; //a1
+    readonly defaultText: {
+        readonly bgFill: string;
+        readonly bgOpacity: number;
+        readonly bgStrokeWidth?: number;
+        readonly bgStroke?: string;
+        readonly textFill: string;
+        readonly fontFamily: string;
+        readonly fontWeight: string;
+        readonly fontStyle: string;
+        readonly fontSize: number;
+        readonly text: string;
+    };
+    readonly hoverText: object;
+    readonly textList: any[];
+    readonly enabled: boolean;
+}
+
+interface InteractiveTextState {
+    current?: any;
+    override?: any;
+}
+
+export class InteractiveText extends React.Component<InteractiveTextProps, InteractiveTextState> {
+    public static defaultProps = {
+        onSelect: noop,
+        defaultText: {
+            bgFill: "#D3D3D3",
+            bgOpacity: 1,
+            bgStrokeWidth: 1,
+            textFill: "#F10040",
+            fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+            fontSize: 12,
+            fontStyle: "normal",
+            fontWeight: "normal",
+            text: "Lorem ipsum...",
+        },
+        hoverText: {
+            ...HoverTextNearMouse.defaultProps,
+            enable: true,
+            bgHeight: "auto",
+            bgWidth: "auto",
+            text: "Click to select object",
+            selectedText: "",
+        },
+        textList: [],
+    };
+
+    public static contextType = ChartContext;
+
+    // @ts-ignore
+    private getSelectionState: any;
+    private saveNodeType: any;
+
+    // @ts-ignore
+    private terminate: any;
+
+    public constructor(props: InteractiveTextProps) {
+        super(props);
+
+        this.terminate = terminate.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+        this.getSelectionState = isHoverForInteractiveType("textList").bind(this);
+
+        this.state = {};
+    }
+
+    public render() {
+        const { textList, defaultText, hoverText, onDoubleClick } = this.props;
+        const { override } = this.state;
+        return (
+            <g>
+                {textList.map((each, idx) => {
+                    const defaultHoverText = InteractiveText.defaultProps.hoverText;
+                    const props = {
+                        ...defaultText,
+                        ...each,
+                        hoverText: {
+                            ...defaultHoverText,
+                            ...hoverText,
+                            ...(each.hoverText || {}),
+                        },
+                        onDoubleClick,
+                    };
+                    return (
+                        <EachText
+                            key={idx}
+                            ref={this.saveNodeType(idx)}
+                            index={idx}
+                            {...props}
+                            selected={each.selected}
+                            position={getValueFromOverride(override, idx, "position", each.position)}
+                            onDrag={this.handleDrag}
+                            onDragComplete={this.handleDragComplete}
+                            edgeInteractiveCursor="react-financial-charts-move-cursor"
+                            onDoubleClick={props.onDoubleClick}
+                        />
+                    );
+                })}
+                <GenericChartComponent
+                    onClick={this.handleDraw}
+                    canvasToDraw={getMouseCanvas}
+                    drawOn={["mousemove", "pan"]}
+                />
+                ;
+            </g>
+        );
+    }
+
+    private readonly handleDraw = (e: React.MouseEvent, moreProps: any) => {
+        const { enabled } = this.props;
+        if (enabled) {
+            const {
+                mouseXY: [, mouseY],
+                chartConfig: { yScale },
+                xAccessor,
+                currentItem,
+            } = moreProps;
+
+            const { defaultText, onChoosePosition } = this.props;
+
+            if (onChoosePosition !== undefined) {
+                const xyValue = [xAccessor(currentItem), yScale.invert(mouseY)];
+                const newText = {
+                    ...defaultText,
+                    position: xyValue,
+                };
+                onChoosePosition(e, newText, moreProps);
+            }
+        }
+    };
+
+    private readonly handleDragComplete = (e: React.MouseEvent, moreProps: any) => {
+        const { override } = this.state;
+        if (isDefined(override)) {
+            const { textList } = this.props;
+            const newTextList = textList.map((each, idx) => {
+                const selected = idx === override.index;
+                return selected
+                    ? {
+                          ...each,
+                          position: override.position,
+                          selected,
+                      }
+                    : {
+                          ...each,
+                          selected,
+                      };
+            });
+            this.setState(
+                {
+                    override: null,
+                },
+                () => {
+                    const { onDragComplete } = this.props;
+                    if (onDragComplete !== undefined) {
+                        onDragComplete(e, newTextList, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleDrag = (_: React.MouseEvent, index: any, position: any) => {
+        this.setState({
+            override: {
+                index,
+                position,
+            },
+        });
+    };
+}

package/src/InteractiveYCoordinate.tsx

@@ -0,0 +1,199 @@
+import { format } from "d3-format";
+import * as React from "react";
+import { ChartContext, isDefined, strokeDashTypes } from "@tradingaction/core";
+import { HoverTextNearMouse } from "./components";
+import { getValueFromOverride, isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
+import { EachInteractiveYCoordinate } from "./wrapper";
+
+interface InteractiveYCoordinateProps {
+    readonly onChoosePosition: (e: React.MouseEvent, newText: any, moreProps: any) => void;
+    readonly onDragComplete: (e: React.MouseEvent, newAlertList: any[], moreProps: any, draggedAlert: any) => void;
+    readonly onSelect?: (e: React.MouseEvent, interactives: any[], moreProps: any) => void;
+    readonly onDelete?: (e: React.MouseEvent, yCoordinate: any, moreProps: any) => void;
+    readonly defaultPriceCoordinate: {
+        readonly bgFill: string;
+        readonly bgOpacity: number;
+        readonly stroke: string;
+        readonly strokeDasharray: strokeDashTypes;
+        readonly strokeOpacity: number;
+        readonly strokeWidth: number;
+        readonly textFill: string;
+        readonly fontFamily: string;
+        readonly fontWeight: string;
+        readonly fontStyle: string;
+        readonly fontSize: number;
+        readonly text: string;
+        readonly textBox: {
+            readonly height: number;
+            readonly left: number;
+            readonly padding: {
+                left: number;
+                right: number;
+            };
+            readonly closeIcon: {
+                padding: {
+                    left: number;
+                    right: number;
+                };
+                width: number;
+            };
+        };
+        readonly edge: {
+            readonly stroke: string;
+            readonly strokeOpacity: number;
+            readonly strokeWidth: number;
+            readonly fill: string;
+            readonly fillOpacity: number;
+        };
+    };
+    readonly hoverText: object;
+    readonly yCoordinateList: any[];
+    readonly enabled: boolean;
+}
+
+interface InteractiveYCoordinateState {
+    current?: any;
+    override?: any;
+}
+
+export class InteractiveYCoordinate extends React.Component<InteractiveYCoordinateProps, InteractiveYCoordinateState> {
+    public static defaultProps = {
+        defaultPriceCoordinate: {
+            bgFill: "#FFFFFF",
+            bgOpacity: 1,
+            stroke: "#6574CD",
+            strokeOpacity: 1,
+            strokeDasharray: "ShortDash2",
+            strokeWidth: 1,
+            textFill: "#6574CD",
+            fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+            fontSize: 12,
+            fontStyle: "normal",
+            fontWeight: "normal",
+            text: "Alert",
+            textBox: {
+                height: 24,
+                left: 20,
+                padding: { left: 10, right: 5 },
+                closeIcon: {
+                    padding: { left: 5, right: 8 },
+                    width: 8,
+                },
+            },
+            edge: {
+                stroke: "#6574CD",
+                strokeOpacity: 1,
+                strokeWidth: 1,
+                fill: "#FFFFFF",
+                fillOpacity: 1,
+                orient: "right",
+                at: "right",
+                arrowWidth: 10,
+                dx: 0,
+                rectWidth: 50,
+                rectHeight: 20,
+                displayFormat: format(".2f"),
+            },
+        },
+        hoverText: {
+            ...HoverTextNearMouse.defaultProps,
+            enable: true,
+            bgHeight: 18,
+            bgWidth: 175,
+            text: "Click and drag the edge circles",
+        },
+        yCoordinateList: [],
+    };
+
+    public static contextType = ChartContext;
+
+    // @ts-ignore
+    private getSelectionState: any;
+    private saveNodeType: any;
+    // @ts-ignore
+    private terminate: any;
+
+    public constructor(props: InteractiveYCoordinateProps) {
+        super(props);
+
+        this.terminate = terminate.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+        this.getSelectionState = isHoverForInteractiveType("yCoordinateList").bind(this);
+
+        this.state = {};
+    }
+
+    public render() {
+        const { yCoordinateList } = this.props;
+        const { override } = this.state;
+        return (
+            <g>
+                {yCoordinateList.map((each, idx) => {
+                    const props = each;
+                    return (
+                        <EachInteractiveYCoordinate
+                            key={each.id}
+                            ref={this.saveNodeType(idx)}
+                            index={idx}
+                            {...props}
+                            selected={each.selected}
+                            yValue={getValueFromOverride(override, idx, "yValue", each.yValue)}
+                            onDelete={this.handleDelete}
+                            onDrag={this.handleDrag}
+                            onDragComplete={this.handleDragComplete}
+                            edgeInteractiveCursor="react-financial-charts-move-cursor"
+                        />
+                    );
+                })}
+            </g>
+        );
+    }
+
+    private readonly handleDelete = (e: React.MouseEvent, index: number | undefined, moreProps: any) => {
+        const { onDelete, yCoordinateList } = this.props;
+        if (onDelete !== undefined && index !== undefined) {
+            onDelete(e, yCoordinateList[index], moreProps);
+        }
+    };
+
+    private readonly handleDragComplete = (e: React.MouseEvent, moreProps: any) => {
+        const { override } = this.state;
+        if (isDefined(override)) {
+            const { yCoordinateList } = this.props;
+            const newAlertList = yCoordinateList.map((each, idx) => {
+                const selected = idx === override.index;
+                return selected
+                    ? {
+                          ...each,
+                          yValue: override.yValue,
+                          selected,
+                      }
+                    : {
+                          ...each,
+                          selected,
+                      };
+            });
+            const draggedAlert = newAlertList[override.index];
+            this.setState(
+                {
+                    override: null,
+                },
+                () => {
+                    const { onDragComplete } = this.props;
+                    if (onDragComplete !== undefined) {
+                        onDragComplete(e, newAlertList, moreProps, draggedAlert);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleDrag = (_: React.MouseEvent, index: any, yValue: any) => {
+        this.setState({
+            override: {
+                index,
+                yValue,
+            },
+        });
+    };
+}