@tradingaction/interactive 2.0.13

package/src/StandardDeviationChannel.tsx

@@ -0,0 +1,269 @@
+import * as React from "react";
+import { isDefined, isNotDefined } from "@tradingaction/core";
+import { getValueFromOverride, isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
+import { HoverTextNearMouse, MouseLocationIndicator } from "./components";
+import { EachLinearRegressionChannel } from "./wrapper";
+
+export interface StandardDeviationChannelProps {
+    readonly enabled: boolean;
+    readonly snapTo?: (datum: any) => number;
+    readonly onStart?: () => void;
+    readonly onComplete?: (e: React.MouseEvent, newChannels: 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 strokeWidth?: number;
+        readonly fill?: string;
+        readonly fillOpacity?: number;
+        readonly edgeStrokeWidth?: number;
+        readonly edgeStroke?: string;
+        readonly edgeFill?: string;
+        readonly r?: number;
+    };
+    readonly hoverText: object;
+    readonly channels: any[];
+}
+
+interface StandardDeviationChannelState {
+    current?: any;
+    override?: any;
+}
+
+export class StandardDeviationChannel extends React.Component<
+    StandardDeviationChannelProps,
+    StandardDeviationChannelState
+> {
+    public static defaultProps = {
+        snapTo: (d: any) => d.close,
+        appearance: {
+            stroke: "#000000",
+            fillOpacity: 0.2,
+            strokeOpacity: 1,
+            strokeWidth: 1,
+            fill: "#8AAFE2",
+            edgeStrokeWidth: 2,
+            edgeStroke: "#000000",
+            edgeFill: "#FFFFFF",
+            r: 5,
+        },
+        currentPositionStroke: "#000000",
+        currentPositionOpacity: 1,
+        currentPositionStrokeWidth: 3,
+        currentPositionRadius: 4,
+        hoverText: {
+            ...HoverTextNearMouse.defaultProps,
+            enable: true,
+            bgHeight: "auto",
+            bgWidth: "auto",
+            text: "Click and drag the edge circles",
+            selectedText: "",
+        },
+        channels: [],
+    };
+
+    // @ts-ignore
+    private getSelectionState: any;
+    private mouseMoved: any;
+    private saveNodeType: any;
+
+    // @ts-ignore
+    private terminate: any;
+
+    public constructor(props: StandardDeviationChannelProps) {
+        super(props);
+
+        this.terminate = terminate.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+        this.getSelectionState = isHoverForInteractiveType("channels").bind(this);
+
+        this.state = {};
+    }
+
+    public render() {
+        const {
+            appearance,
+            channels,
+            currentPositionOpacity,
+            currentPositionRadius = StandardDeviationChannel.defaultProps.currentPositionRadius,
+            currentPositionStroke,
+            currentPositionStrokeWidth,
+            enabled,
+            hoverText,
+            snapTo,
+        } = this.props;
+        const { current, override } = this.state;
+
+        const eachDefaultAppearance = {
+            ...StandardDeviationChannel.defaultProps.appearance,
+            ...appearance,
+        };
+
+        const hoverTextDefault = {
+            ...StandardDeviationChannel.defaultProps.hoverText,
+            ...hoverText,
+        };
+
+        const tempLine =
+            isDefined(current) && isDefined(current.end) ? (
+                <EachLinearRegressionChannel
+                    interactive={false}
+                    x1Value={current.start[0]}
+                    x2Value={current.end[0]}
+                    appearance={eachDefaultAppearance}
+                    hoverText={hoverTextDefault}
+                />
+            ) : null;
+
+        return (
+            <g>
+                {channels.map((each, idx) => {
+                    const eachAppearance = isDefined(each.appearance)
+                        ? { ...eachDefaultAppearance, ...each.appearance }
+                        : eachDefaultAppearance;
+
+                    const eachHoverText = isDefined(each.hoverText)
+                        ? { ...hoverTextDefault, ...each.hoverText }
+                        : hoverTextDefault;
+
+                    return (
+                        <EachLinearRegressionChannel
+                            key={idx}
+                            ref={this.saveNodeType(idx)}
+                            index={idx}
+                            selected={each.selected}
+                            x1Value={getValueFromOverride(override, idx, "x1Value", each.start[0])}
+                            x2Value={getValueFromOverride(override, idx, "x2Value", each.end[0])}
+                            appearance={eachAppearance}
+                            snapTo={snapTo}
+                            hoverText={eachHoverText}
+                            onDrag={this.handleDragLine}
+                            onDragComplete={this.handleDragLineComplete}
+                            edgeInteractiveCursor="react-financial-charts-move-cursor"
+                        />
+                    );
+                })}
+                {tempLine}
+                <MouseLocationIndicator
+                    enabled={enabled}
+                    snap
+                    snapTo={snapTo}
+                    r={currentPositionRadius}
+                    stroke={currentPositionStroke}
+                    opacity={currentPositionOpacity}
+                    strokeWidth={currentPositionStrokeWidth}
+                    onMouseDown={this.handleStart}
+                    onClick={this.handleEnd}
+                    onMouseMove={this.handleDrawLine}
+                />
+            </g>
+        );
+    }
+
+    private handleEnd = (e: React.MouseEvent, xyValue: any, moreProps: any) => {
+        const { current } = this.state;
+        const { appearance, channels } = this.props;
+
+        if (this.mouseMoved && isDefined(current) && isDefined(current.start)) {
+            const newChannels = [
+                ...channels.map((d) => ({ ...d, selected: false })),
+                {
+                    start: current.start,
+                    end: xyValue,
+                    selected: true,
+                    appearance,
+                },
+            ];
+
+            this.setState(
+                {
+                    current: null,
+                },
+                () => {
+                    const { onComplete } = this.props;
+                    if (onComplete !== undefined) {
+                        onComplete(e, newChannels, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleStart = (_: React.MouseEvent, xyValue: any) => {
+        const { current } = this.state;
+
+        if (isNotDefined(current) || isNotDefined(current.start)) {
+            this.mouseMoved = false;
+
+            this.setState(
+                {
+                    current: {
+                        start: xyValue,
+                        end: null,
+                    },
+                },
+                () => {
+                    const { onStart } = this.props;
+                    if (onStart !== undefined) {
+                        onStart();
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleDrawLine = (e: React.MouseEvent, xyValue: any) => {
+        const { current } = this.state;
+
+        if (isDefined(current) && isDefined(current.start)) {
+            this.mouseMoved = true;
+            this.setState({
+                current: {
+                    start: current.start,
+                    end: xyValue,
+                },
+            });
+        }
+    };
+
+    private readonly handleDragLineComplete = (e: React.MouseEvent, moreProps: any) => {
+        const { override } = this.state;
+        const { channels } = this.props;
+        if (isDefined(override)) {
+            const newChannels = channels.map((each, idx) =>
+                idx === override.index
+                    ? {
+                          ...each,
+                          start: [override.x1Value, override.y1Value],
+                          end: [override.x2Value, override.y2Value],
+                          selected: true,
+                      }
+                    : each,
+            );
+            this.setState(
+                {
+                    override: null,
+                },
+                () => {
+                    const { onComplete } = this.props;
+                    if (onComplete !== undefined) {
+                        onComplete(e, newChannels, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleDragLine = (e: React.MouseEvent, index: number | undefined, newXYValue: any) => {
+        this.setState({
+            override: {
+                index,
+                ...newXYValue,
+            },
+        });
+    };
+}

package/src/TrendLine.tsx

@@ -0,0 +1,294 @@
+import * as React from "react";
+import { isDefined, isNotDefined, noop, strokeDashTypes } from "@tradingaction/core";
+import { getValueFromOverride, isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
+import { HoverTextNearMouse, MouseLocationIndicator, InteractiveStraightLine } from "./components";
+import { EachTrendLine } from "./wrapper";
+
+export interface TrendLineProps {
+    readonly snap: boolean;
+    readonly enabled: boolean;
+    readonly snapTo?: (datum: any) => number | number[];
+    readonly shouldDisableSnap?: (e: React.MouseEvent) => boolean;
+    readonly onStart: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onComplete?: (e: React.MouseEvent, newTrends: any[], moreProps: any) => void;
+    readonly onSelect?: (e: React.MouseEvent, interactives: any[], moreProps: any) => void;
+    readonly onDoubleClickWhenHover?: (e: React.MouseEvent, moreProps: any, index: any) => void;
+    readonly onClickWhenHover?: (e: React.MouseEvent, moreProps: any, index: any) => void;
+    readonly onClickOutside?: (e: React.MouseEvent, moreProps: any, index: any) => void;
+    readonly onContextMenuWhenHover?: (e: React.MouseEvent, moreProps: any, index: any) => void;
+    readonly currentPositionStroke?: string;
+    readonly currentPositionStrokeWidth?: number;
+    readonly currentPositionstrokeOpacity?: number;
+    readonly currentPositionRadius?: number;
+    readonly type:
+        | "XLINE" // extends from -Infinity to +Infinity
+        | "RAY" // extends to +/-Infinity in one direction
+        | "LINE"; // extends between the set bounds
+    readonly hoverText: object;
+    readonly trends: any[];
+    readonly appearance: {
+        readonly strokeStyle: string;
+        readonly strokeWidth: number;
+        readonly strokeDasharray: strokeDashTypes;
+        readonly edgeStrokeWidth: number;
+        readonly edgeFill: string;
+        readonly edgeStroke: string;
+    };
+}
+
+interface TrendLineState {
+    current?: any;
+    override?: any;
+    trends?: any;
+}
+
+export class TrendLine extends React.Component<TrendLineProps, TrendLineState> {
+    public static defaultProps = {
+        type: "XLINE",
+        onStart: noop,
+        onSelect: noop,
+        onDoubleClickWhenHover: noop,
+        onClickWhenHover: noop,
+        onClickOutside: noop,
+        currentPositionStroke: "#000000",
+        currentPositionstrokeOpacity: 1,
+        currentPositionStrokeWidth: 3,
+        currentPositionRadius: 0,
+        shouldDisableSnap: (e: React.MouseEvent) => e.button === 2 || e.shiftKey,
+        hoverText: {
+            ...HoverTextNearMouse.defaultProps,
+            enable: true,
+            bgHeight: "auto",
+            bgWidth: "auto",
+            text: "Click to select object",
+            selectedText: "",
+        },
+        trends: [],
+        appearance: {
+            strokeStyle: "#000000",
+            strokeWidth: 1,
+            strokeDasharray: "Solid",
+            edgeStrokeWidth: 1,
+            edgeFill: "#FFFFFF",
+            edgeStroke: "#000000",
+            r: 6,
+        },
+    };
+
+    // @ts-ignore
+    private getSelectionState: any;
+    private mouseMoved: any;
+    private saveNodeType: any;
+    // @ts-ignore
+    private terminate: any;
+
+    public constructor(props: TrendLineProps) {
+        super(props);
+
+        this.terminate = terminate.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+
+        this.getSelectionState = isHoverForInteractiveType("trends").bind(this);
+
+        this.state = {};
+    }
+
+    public render() {
+        const {
+            appearance,
+            currentPositionstrokeOpacity,
+            currentPositionRadius = TrendLine.defaultProps.currentPositionRadius,
+            currentPositionStroke,
+            currentPositionStrokeWidth,
+            enabled,
+            hoverText,
+            shouldDisableSnap,
+            snap,
+            snapTo,
+            trends,
+            type,
+        } = this.props;
+
+        const { current, override } = this.state;
+
+        const tempLine =
+            isDefined(current) && isDefined(current.end) ? (
+                <InteractiveStraightLine
+                    type={type}
+                    x1Value={current.start[0]}
+                    y1Value={current.start[1]}
+                    x2Value={current.end[0]}
+                    y2Value={current.end[1]}
+                    strokeStyle={appearance.strokeStyle}
+                    strokeWidth={appearance.strokeWidth}
+                />
+            ) : null;
+
+        return (
+            <g>
+                {trends.map((each, idx) => {
+                    const eachAppearance = isDefined(each.appearance)
+                        ? { ...appearance, ...each.appearance }
+                        : appearance;
+
+                    const hoverTextWithDefault = {
+                        ...TrendLine.defaultProps.hoverText,
+                        ...hoverText,
+                    };
+
+                    return (
+                        <EachTrendLine
+                            key={idx}
+                            ref={this.saveNodeType(idx)}
+                            index={idx}
+                            type={each.type}
+                            selected={each.selected}
+                            x1Value={getValueFromOverride(override, idx, "x1Value", each.start[0])}
+                            y1Value={getValueFromOverride(override, idx, "y1Value", each.start[1])}
+                            x2Value={getValueFromOverride(override, idx, "x2Value", each.end[0])}
+                            y2Value={getValueFromOverride(override, idx, "y2Value", each.end[1])}
+                            strokeStyle={eachAppearance.strokeStyle}
+                            strokeWidth={eachAppearance.strokeWidth}
+                            strokeOpacity={eachAppearance.strokeOpacity}
+                            strokeDasharray={eachAppearance.strokeDasharray}
+                            edgeStroke={eachAppearance.edgeStroke}
+                            edgeFill={eachAppearance.edgeFill}
+                            edgeStrokeWidth={eachAppearance.edgeStrokeWidth}
+                            r={eachAppearance.r}
+                            hoverText={hoverTextWithDefault}
+                            onDrag={this.handleDragLine}
+                            onDragComplete={this.handleDragLineComplete}
+                            edgeInteractiveCursor="react-financial-charts-move-cursor"
+                            lineInteractiveCursor="react-financial-charts-move-cursor"
+                            onDoubleClickWhenHover={this.props.onDoubleClickWhenHover}
+                            onClickWhenHover={this.props.onClickWhenHover}
+                            onClickOutside={this.props.onClickOutside}
+                            onContextMenuWhenHover={this.props.onContextMenuWhenHover}
+                        />
+                    );
+                })}
+                {tempLine}
+                <MouseLocationIndicator
+                    enabled={enabled}
+                    snap={snap}
+                    shouldDisableSnap={shouldDisableSnap}
+                    snapTo={snapTo}
+                    r={currentPositionRadius}
+                    stroke={currentPositionStroke}
+                    opacity={currentPositionstrokeOpacity}
+                    strokeWidth={currentPositionStrokeWidth}
+                    onMouseDown={this.handleStart}
+                    onClick={this.handleEnd}
+                    onMouseMove={this.handleDrawLine}
+                />
+            </g>
+        );
+    }
+
+    private readonly handleEnd = (e: React.MouseEvent, xyValue: any, moreProps: any) => {
+        const { current } = this.state;
+        const { trends, appearance, type } = this.props;
+
+        if (this.mouseMoved && isDefined(current) && isDefined(current.start)) {
+            const newTrends = [
+                ...trends.map((d) => ({ ...d, selected: false })),
+                {
+                    start: current.start,
+                    end: xyValue,
+                    selected: true,
+                    appearance,
+                    type,
+                },
+            ];
+            this.setState(
+                {
+                    current: null,
+                    trends: newTrends,
+                },
+                () => {
+                    const { onComplete } = this.props;
+                    if (onComplete !== undefined) {
+                        onComplete(e, newTrends, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleStart = (e: React.MouseEvent, xyValue: any, moreProps: any) => {
+        const { current } = this.state;
+
+        if (isNotDefined(current) || isNotDefined(current.start)) {
+            this.mouseMoved = false;
+
+            this.setState(
+                {
+                    current: {
+                        start: xyValue,
+                        end: null,
+                    },
+                },
+                () => {
+                    const { onStart } = this.props;
+                    if (onStart !== undefined) {
+                        onStart(e, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleDrawLine = (_: React.MouseEvent, xyValue: any) => {
+        const { current } = this.state;
+        if (isDefined(current) && isDefined(current.start)) {
+            this.mouseMoved = true;
+            this.setState({
+                current: {
+                    start: current.start,
+                    end: xyValue,
+                },
+            });
+        }
+    };
+
+    private readonly handleDragLineComplete = (e: React.MouseEvent, moreProps: any) => {
+        const { override } = this.state;
+        if (isDefined(override)) {
+            const { trends } = this.props;
+            const newTrends = trends.map((each, idx) =>
+                idx === override.index
+                    ? {
+                          ...each,
+                          start: [override.x1Value, override.y1Value],
+                          end: [override.x2Value, override.y2Value],
+                          selected: true,
+                      }
+                    : {
+                          ...each,
+                          selected: false,
+                      },
+            );
+
+            this.setState(
+                {
+                    override: null,
+                },
+                () => {
+                    const { onComplete } = this.props;
+                    if (onComplete !== undefined) {
+                        onComplete(e, newTrends, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleDragLine = (_: React.MouseEvent, index: number | undefined, newXYValue: any) => {
+        this.setState({
+            override: {
+                index,
+                ...newXYValue,
+            },
+        });
+    };
+}