@tradingaction/interactive 2.0.13

package/src/wrapper/EachInteractiveYCoordinate.tsx

@@ -0,0 +1,198 @@
+import * as React from "react";
+import { strokeDashTypes } from "@tradingaction/core";
+import { isHover, saveNodeType } from "../utils";
+import { ClickableShape, InteractiveYCoordinate } from "../components";
+
+export interface EachInteractiveYCoordinateProps {
+    readonly index?: number;
+    readonly draggable: boolean;
+    readonly yValue: number;
+    readonly bgFill: string;
+    readonly stroke: string;
+    readonly strokeWidth: number;
+    readonly strokeDasharray: strokeDashTypes;
+    readonly textFill: string;
+    readonly fontWeight: string;
+    readonly fontFamily: string;
+    readonly fontStyle: string;
+    readonly fontSize: number;
+    readonly text: string;
+    readonly selected: boolean;
+    readonly edge: object;
+    readonly textBox: {
+        readonly closeIcon: any;
+        readonly left: number;
+        readonly height: number;
+        readonly padding: any;
+    };
+    readonly onDrag?: (e: React.MouseEvent, index: number | undefined, moreProps: any) => void;
+    readonly onDragComplete?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDelete?: (e: React.MouseEvent, index: number | undefined, moreProps: any) => void;
+}
+
+interface EachInteractiveYCoordinateState {
+    closeIconHover: boolean;
+    hover: boolean;
+}
+
+export class EachInteractiveYCoordinate extends React.Component<
+    EachInteractiveYCoordinateProps,
+    EachInteractiveYCoordinateState
+> {
+    public static defaultProps = {
+        strokeWidth: 1,
+        selected: false,
+        draggable: false,
+    };
+
+    private dragStartPosition: any;
+    // @ts-ignore
+    private isHover: any;
+    private saveNodeType: any;
+
+    public constructor(props: EachInteractiveYCoordinateProps) {
+        super(props);
+
+        this.isHover = isHover.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+
+        this.state = {
+            hover: false,
+            closeIconHover: false,
+        };
+    }
+
+    public render() {
+        const {
+            yValue,
+            bgFill,
+            textFill,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            fontStyle,
+            text,
+            selected,
+            onDragComplete,
+            stroke,
+            strokeDasharray,
+            strokeWidth,
+            edge,
+            textBox,
+            draggable,
+        } = this.props;
+
+        const { hover, closeIconHover } = this.state;
+
+        const hoverHandler = {
+            onHover: this.handleHover,
+            onUnHover: this.handleHover,
+        };
+
+        const dragProps = draggable
+            ? {
+                  onDragStart: this.handleDragStart,
+                  onDrag: this.handleDrag,
+                  onDragComplete,
+              }
+            : {};
+        return (
+            <g>
+                <InteractiveYCoordinate
+                    ref={this.saveNodeType("priceCoordinate")}
+                    selected={selected && !closeIconHover}
+                    hovering={hover || closeIconHover}
+                    interactiveCursorClass="react-financial-charts-move-cursor"
+                    {...hoverHandler}
+                    {...dragProps}
+                    yValue={yValue}
+                    bgFillStyle={bgFill}
+                    textFill={textFill}
+                    fontFamily={fontFamily}
+                    fontStyle={fontStyle}
+                    fontWeight={fontWeight}
+                    fontSize={fontSize}
+                    strokeStyle={stroke}
+                    strokeDasharray={strokeDasharray}
+                    strokeWidth={strokeWidth}
+                    text={text}
+                    textBox={textBox}
+                    edge={edge}
+                />
+                <ClickableShape
+                    show
+                    hovering={closeIconHover}
+                    text={text}
+                    yValue={yValue}
+                    fontFamily={fontFamily}
+                    fontStyle={fontStyle}
+                    fontWeight={fontWeight}
+                    fontSize={fontSize}
+                    textBox={textBox}
+                    strokeStyle={stroke}
+                    onHover={this.handleCloseIconHover}
+                    onUnHover={this.handleCloseIconHover}
+                    onClick={this.handleDelete}
+                />
+            </g>
+        );
+    }
+
+    private readonly handleCloseIconHover = (_: React.MouseEvent, moreProps: any) => {
+        if (this.state.closeIconHover !== moreProps.hovering) {
+            this.setState({
+                closeIconHover: moreProps.hovering,
+            });
+        }
+    };
+
+    private readonly handleHover = (e: React.MouseEvent, moreProps: any) => {
+        if (this.state.hover !== moreProps.hovering) {
+            this.setState({
+                hover: moreProps.hovering,
+                closeIconHover: moreProps.hovering ? this.state.closeIconHover : false,
+            });
+        }
+    };
+
+    private readonly handleDelete = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDelete } = this.props;
+        if (onDelete !== undefined) {
+            onDelete(e, index, moreProps);
+        }
+    };
+
+    private readonly handleDrag = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag } = this.props;
+        if (onDrag === undefined) {
+            return;
+        }
+
+        const {
+            mouseXY: [, mouseY],
+            chartConfig: { yScale },
+        } = moreProps;
+
+        const { dy } = this.dragStartPosition;
+
+        const newYValue = yScale.invert(mouseY - dy);
+
+        onDrag(e, index, newYValue);
+    };
+
+    private readonly handleDragStart = (_: React.MouseEvent, moreProps: any) => {
+        const { yValue } = this.props;
+        const { mouseXY } = moreProps;
+        const {
+            chartConfig: { yScale },
+        } = moreProps;
+        const [, mouseY] = mouseXY;
+
+        const dy = mouseY - yScale(yValue);
+
+        this.dragStartPosition = {
+            yValue,
+            dy,
+        };
+    };
+}

package/src/wrapper/EachLinearRegressionChannel.tsx

@@ -0,0 +1,202 @@
+import { getCurrentItem } from "@tradingaction/core/lib/utils/ChartDataUtil";
+import * as React from "react";
+import { isHover, saveNodeType } from "../utils";
+import { HoverTextNearMouse, ClickableCircle } from "../components";
+import {
+    edge1Provider,
+    edge2Provider,
+    LinearRegressionChannelWithArea,
+} from "../components/LinearRegressionChannelWithArea";
+
+export interface EachLinearRegressionChannelProps {
+    readonly defaultClassName?: string;
+    readonly x1Value: any;
+    readonly x2Value: any;
+    readonly index?: number;
+    readonly appearance: {
+        readonly stroke: string;
+        readonly strokeWidth: number;
+        readonly fill: string;
+        readonly edgeStrokeWidth: number;
+        readonly edgeStroke: string;
+        readonly edgeFill: string;
+        readonly r: number;
+    };
+    readonly edgeInteractiveCursor?: string;
+    readonly onDrag?: (e: React.MouseEvent, index: number | undefined, x1y1: { x1Value: any; x2Value: any }) => void;
+    readonly onDragComplete?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly snapTo?: (datum: any) => number;
+    readonly interactive: boolean;
+    readonly selected: 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;
+    };
+}
+
+interface EachLinearRegressionChannelState {
+    hover: boolean;
+}
+
+export class EachLinearRegressionChannel extends React.Component<
+    EachLinearRegressionChannelProps,
+    EachLinearRegressionChannelState
+> {
+    public static defaultProps = {
+        appearance: {
+            stroke: "#000000",
+            strokeWidth: 1,
+            fill: "rgba(138, 175, 226, 0.7)",
+            edgeStrokeWidth: 2,
+            edgeStroke: "#000000",
+            edgeFill: "#FFFFFF",
+            r: 5,
+        },
+        interactive: true,
+        selected: false,
+        hoverText: {
+            ...HoverTextNearMouse.defaultProps,
+            enable: true,
+            bgHeight: 18,
+            bgWidth: 175,
+            text: "Click and drag the edge circles",
+        },
+    };
+
+    // @ts-ignore
+    private isHover: any;
+    private saveNodeType: any;
+
+    public constructor(props: EachLinearRegressionChannelProps) {
+        super(props);
+
+        this.isHover = isHover.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    public render() {
+        const {
+            x1Value,
+            x2Value,
+            appearance,
+            edgeInteractiveCursor,
+            hoverText,
+            interactive,
+            selected,
+            onDragComplete,
+        } = this.props;
+        const { stroke, strokeWidth, fill, r, edgeStrokeWidth, edgeFill, edgeStroke } = appearance;
+        const { hover } = this.state;
+
+        const hoverHandler = interactive ? { onHover: this.handleHover, onUnHover: this.handleHover } : {};
+
+        const {
+            enable: hoverTextEnabled,
+            selectedText: hoverTextSelected,
+            text: hoverTextUnselected,
+            ...restHoverTextProps
+        } = hoverText;
+
+        return (
+            <g>
+                <LinearRegressionChannelWithArea
+                    ref={this.saveNodeType("area")}
+                    selected={selected || hover}
+                    {...hoverHandler}
+                    x1Value={x1Value}
+                    x2Value={x2Value}
+                    fillStyle={fill}
+                    strokeStyle={stroke}
+                    strokeWidth={hover || selected ? strokeWidth + 1 : strokeWidth}
+                />
+                <ClickableCircle
+                    ref={this.saveNodeType("edge1")}
+                    show={selected || hover}
+                    xyProvider={edge1Provider(this.props)}
+                    r={r}
+                    fillStyle={edgeFill}
+                    strokeStyle={edgeStroke}
+                    strokeWidth={edgeStrokeWidth}
+                    interactiveCursorClass={edgeInteractiveCursor}
+                    onDrag={this.handleEdge1Drag}
+                    onDragComplete={onDragComplete}
+                />
+                <ClickableCircle
+                    ref={this.saveNodeType("edge2")}
+                    show={selected || hover}
+                    xyProvider={edge2Provider(this.props)}
+                    r={r}
+                    fillStyle={edgeFill}
+                    strokeStyle={edgeStroke}
+                    strokeWidth={edgeStrokeWidth}
+                    interactiveCursorClass={edgeInteractiveCursor}
+                    onDrag={this.handleEdge2Drag}
+                    onDragComplete={onDragComplete}
+                />
+                <HoverTextNearMouse
+                    show={hoverTextEnabled && hover}
+                    {...restHoverTextProps}
+                    text={selected ? hoverTextSelected : hoverTextUnselected}
+                />
+            </g>
+        );
+    }
+
+    private readonly handleHover = (_: React.MouseEvent, moreProps: any) => {
+        if (this.state.hover !== moreProps.hovering) {
+            this.setState({
+                hover: moreProps.hovering,
+            });
+        }
+    };
+
+    private readonly handleEdge2Drag = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag, snapTo, x1Value } = this.props;
+        if (onDrag === undefined) {
+            return;
+        }
+
+        const [x2Value] = getNewXY(moreProps, snapTo);
+
+        onDrag(e, index, {
+            x1Value,
+            x2Value,
+        });
+    };
+
+    private readonly handleEdge1Drag = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag, snapTo, x2Value } = this.props;
+        if (onDrag === undefined) {
+            return;
+        }
+
+        const [x1Value] = getNewXY(moreProps, snapTo);
+
+        onDrag(e, index, {
+            x1Value,
+            x2Value,
+        });
+    };
+}
+
+export function getNewXY(moreProps: any, snapTo: any) {
+    const { xScale, xAccessor, plotData, mouseXY } = moreProps;
+
+    const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+    const x = xAccessor(currentItem);
+    const y = snapTo(currentItem);
+
+    return [x, y];
+}

package/src/wrapper/EachText.tsx

@@ -0,0 +1,190 @@
+import * as React from "react";
+import { getXValue } from "@tradingaction/core/lib/utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+import { HoverTextNearMouse, InteractiveText } from "../components";
+
+export interface EachTextProps {
+    readonly index?: number;
+    readonly position?: any;
+    readonly bgFill: string;
+    readonly bgStrokeWidth: number;
+    readonly bgStroke?: string;
+    readonly textFill: string;
+    readonly fontWeight: string;
+    readonly fontFamily: string;
+    readonly fontStyle: string;
+    readonly fontSize: number;
+    readonly text: string;
+    readonly selected: boolean;
+    readonly onDrag?: (e: React.MouseEvent, index: number | undefined, xyValue: number[]) => void;
+    readonly onDragComplete?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDoubleClick?: (e: React.MouseEvent, moreProps: any, index?: number) => void; //a1
+    readonly hoverText: {
+        readonly enable: boolean;
+        readonly fontFamily: string;
+        readonly fontSize: number;
+        readonly fill: string;
+        readonly text: string;
+        readonly selectedText: string;
+        readonly bgFill: string;
+        readonly bgOpacity: number;
+        readonly bgWidth: number | string;
+        readonly bgHeight: number | string;
+    };
+}
+
+interface EachTextState {
+    hover: boolean;
+}
+
+export class EachText extends React.Component<EachTextProps, EachTextState> {
+    public static defaultProps = {
+        bgStrokeWidth: 1,
+        selected: false,
+        hoverText: {
+            ...HoverTextNearMouse.defaultProps,
+            enable: true,
+            bgHeight: "auto",
+            bgWidth: "auto",
+            text: "Click to select object",
+        },
+    };
+
+    private dragStartPosition: any;
+    // @ts-ignore
+    private isHover: any;
+    private saveNodeType: any;
+
+    public constructor(props: EachTextProps) {
+        super(props);
+
+        this.handleHover = this.handleHover.bind(this);
+
+        this.handleDragStart = this.handleDragStart.bind(this);
+        this.handleDrag = this.handleDrag.bind(this);
+
+        this.isHover = isHover.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    public render() {
+        const {
+            position,
+            bgFill,
+            bgStroke,
+            bgStrokeWidth,
+            textFill,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            fontStyle,
+            text,
+            hoverText,
+            selected,
+            onDragComplete,
+            onDoubleClick,
+        } = this.props;
+        const { hover } = this.state;
+
+        const hoverHandler = {
+            onHover: this.handleHover,
+            onUnHover: this.handleHover,
+        };
+
+        const {
+            enable: hoverTextEnabled,
+            selectedText: hoverTextSelected,
+            text: hoverTextUnselected,
+            ...restHoverTextProps
+        } = hoverText;
+
+        return (
+            <g>
+                <InteractiveText
+                    ref={this.saveNodeType("text")}
+                    selected={selected || hover}
+                    interactiveCursorClass="react-financial-charts-move-cursor"
+                    {...hoverHandler}
+                    onDragStart={this.handleDragStart}
+                    onDrag={this.handleDrag}
+                    onDragComplete={onDragComplete}
+                    onDoubleClick={(e, moreProps) => {
+                        if (onDoubleClick) {
+                            onDoubleClick(e, moreProps, this.props.index);
+                        }
+                    }}
+                    position={position}
+                    bgFillStyle={bgFill}
+                    bgStroke={bgStroke || textFill}
+                    bgStrokeWidth={bgStrokeWidth}
+                    textFill={textFill}
+                    fontFamily={fontFamily}
+                    fontStyle={fontStyle}
+                    fontWeight={fontWeight}
+                    fontSize={fontSize}
+                    text={text}
+                />
+                <HoverTextNearMouse
+                    show={hoverTextEnabled && hover}
+                    {...restHoverTextProps}
+                    text={selected ? hoverTextSelected : hoverTextUnselected}
+                />
+            </g>
+        );
+    }
+
+    private readonly handleHover = (_: React.MouseEvent, moreProps: any) => {
+        if (this.state.hover !== moreProps.hovering) {
+            this.setState({
+                hover: moreProps.hovering,
+            });
+        }
+    };
+
+    private readonly handleDrag = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag } = this.props;
+        if (onDrag === undefined) {
+            return;
+        }
+
+        const {
+            mouseXY: [, mouseY],
+            chartConfig: { yScale },
+            xAccessor,
+            mouseXY,
+            plotData,
+            xScale,
+        } = moreProps;
+
+        const { dx, dy } = this.dragStartPosition;
+        const xValue = xScale.invert(xScale(getXValue(xScale, xAccessor, mouseXY, plotData)) - dx);
+        // xScale.invert(xScale(xAccessor(currentItem)) - dx);
+        const xyValue = [xValue, yScale.invert(mouseY - dy)];
+
+        onDrag(e, index, xyValue);
+    };
+
+    private readonly handleDragStart = (_: React.MouseEvent, moreProps: any) => {
+        const { position } = this.props;
+        const { mouseXY } = moreProps;
+        const {
+            chartConfig: { yScale },
+            xScale,
+        } = moreProps;
+        const [mouseX, mouseY] = mouseXY;
+
+        const [textCX, textCY] = position;
+        const dx = mouseX - xScale(textCX);
+        const dy = mouseY - yScale(textCY);
+
+        this.dragStartPosition = {
+            position,
+            dx,
+            dy,
+        };
+    };
+}