@tradingaction/interactive 2.0.13

package/src/ZoomButtons.tsx

@@ -0,0 +1,165 @@
+import { ChartContext, last } from "@tradingaction/core";
+import { interpolateNumber } from "d3-interpolate";
+import * as React from "react";
+
+export interface ZoomButtonsProps {
+    readonly fill: string;
+    readonly fillOpacity: number;
+    readonly heightFromBase: number;
+    readonly onReset?: () => void;
+    readonly r: number;
+    readonly stroke: string;
+    readonly strokeWidth: number;
+    readonly textFill: string;
+    readonly zoomMultiplier: number;
+}
+
+export class ZoomButtons extends React.Component<ZoomButtonsProps> {
+    public static defaultProps = {
+        fill: "#ffffff",
+        fillOpacity: 0.75,
+        heightFromBase: 32,
+        r: 16,
+        stroke: "#e0e3eb",
+        strokeWidth: 1,
+        textFill: "#000000",
+        zoomMultiplier: 1.5,
+    };
+
+    public static contextType = ChartContext;
+
+    private interval?: number;
+
+    public render() {
+        const { chartConfig } = this.context;
+
+        const { width, height } = chartConfig;
+
+        const { heightFromBase, r, fill, fillOpacity, onReset, stroke, strokeWidth, textFill } = this.props;
+
+        const centerX = Math.round(width / 2);
+        const y = height - heightFromBase;
+
+        const zoomOutX = centerX - 16 - r * 2;
+        const zoomInX = centerX - 8;
+        const resetX = centerX + 16 + r * 2;
+
+        return (
+            <g className="react-financial-charts-zoom-buttons">
+                <circle
+                    className="react-financial-charts-button"
+                    cx={zoomOutX - r / 2}
+                    cy={y + r / 2}
+                    fill={fill}
+                    fillOpacity={fillOpacity}
+                    stroke={stroke}
+                    strokeWidth={strokeWidth}
+                    r={r}
+                />
+                <g transform={`translate (${zoomOutX - 20}, ${y - 8 + r / 4})`}>
+                    <path d="M19,13H5V11H19V13Z" fill={textFill} />
+                </g>
+                <circle
+                    className="react-financial-charts-button"
+                    cx={zoomInX - r / 2}
+                    cy={y + r / 2}
+                    fill={fill}
+                    fillOpacity={fillOpacity}
+                    stroke={stroke}
+                    strokeWidth={strokeWidth}
+                    r={r}
+                />
+                <g transform={`translate (${zoomInX - 20}, ${y - 8 + r / 4})`}>
+                    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" fill={textFill} />
+                </g>
+                <circle
+                    className="react-financial-charts-button"
+                    cx={resetX - r / 2}
+                    cy={y + r / 2}
+                    fill={fill}
+                    fillOpacity={fillOpacity}
+                    stroke={stroke}
+                    strokeWidth={strokeWidth}
+                    r={r}
+                />
+                <g transform={`translate (${resetX - r}, ${y - 4 + r / 4})`}>
+                    <path
+                        d="M2.35 2.35A7.958 7.958 0 018 0a8 8 0 110 16c-3.73 0-6.84-2.55-7.73-6h2.08c.82 2.33 3.04 4 5.65 4A6 6 0 108 2c-1.66 0-3.14.69-4.22 1.78L7 7H0V0l2.35 2.35z"
+                        fill={textFill}
+                    />
+                </g>
+                <circle
+                    className="react-financial-charts-enable-interaction out"
+                    onClick={this.handleZoomOut}
+                    cx={zoomOutX - r / 2}
+                    cy={y + r / 2}
+                    r={r}
+                    fill="none"
+                />
+                <circle
+                    className="react-financial-charts-enable-interaction in"
+                    onClick={this.handleZoomIn}
+                    cx={zoomInX - r / 2}
+                    cy={y + r / 2}
+                    r={r}
+                    fill="none"
+                />
+                <circle
+                    className="react-financial-charts-enable-interaction reset"
+                    onClick={onReset}
+                    cx={resetX - r / 2}
+                    cy={y + r / 2}
+                    r={r}
+                    fill="none"
+                />
+            </g>
+        );
+    }
+
+    private readonly handleZoomIn = () => {
+        if (this.interval) {
+            return;
+        }
+
+        this.zoom(-1);
+    };
+
+    private readonly handleZoomOut = () => {
+        if (this.interval) {
+            return;
+        }
+
+        this.zoom(1);
+    };
+
+    private readonly zoom = (direction: number) => {
+        const { xAxisZoom, xScale, plotData, xAccessor } = this.context;
+
+        const cx = xScale(xAccessor(last(plotData)));
+
+        const { zoomMultiplier } = this.props;
+
+        const c = direction > 0 ? 1 * zoomMultiplier : 1 / zoomMultiplier;
+
+        const [start, end] = xScale.domain();
+        const [newStart, newEnd] = xScale
+            .range()
+            .map((x: number) => cx + (x - cx) * c)
+            .map(xScale.invert);
+
+        const left = interpolateNumber(start, newStart);
+        const right = interpolateNumber(end, newEnd);
+
+        const foo = [0.25, 0.3, 0.5, 0.6, 0.75, 1].map((i) => {
+            return [left(i), right(i)];
+        });
+
+        this.interval = window.setInterval(() => {
+            xAxisZoom(foo.shift());
+            if (foo.length === 0) {
+                clearInterval(this.interval);
+                delete this.interval;
+            }
+        }, 10);
+    };
+}

package/src/components/ChannelWithArea.tsx

@@ -0,0 +1,199 @@
+import * as React from "react";
+import { isDefined, isNotDefined, getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+import { generateLine, isHovering } from "./InteractiveStraightLine";
+
+export interface ChannelWithAreaProps {
+    readonly startXY?: number[];
+    readonly endXY?: number[];
+    readonly dy?: number;
+    readonly interactiveCursorClass?: string;
+    readonly strokeStyle: string;
+    readonly strokeWidth: number;
+    readonly fillStyle: string;
+    readonly type:
+        | "XLINE" // extends from -Infinity to +Infinity
+        | "RAY" // extends to +/-Infinity in one direction
+        | "LINE"; // extends between the set bounds
+    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 defaultClassName?: string;
+    readonly tolerance: number;
+    readonly selected: boolean;
+}
+
+export class ChannelWithArea extends React.Component<ChannelWithAreaProps> {
+    public static defaultProps = {
+        type: "LINE",
+        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 } = this.props;
+        const { line1, line2 } = helper(this.props, moreProps);
+
+        if (line1 !== undefined) {
+            const { x1, y1, x2, y2 } = line1;
+
+            ctx.lineWidth = strokeWidth;
+            ctx.strokeStyle = strokeStyle;
+
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.stroke();
+
+            if (line2 !== undefined) {
+                const { y1: line2Y1, y2: line2Y2 } = line2;
+
+                ctx.beginPath();
+                ctx.moveTo(x1, line2Y1);
+                ctx.lineTo(x2, line2Y2);
+                ctx.stroke();
+
+                ctx.fillStyle = fillStyle;
+                ctx.beginPath();
+                ctx.moveTo(x1, y1);
+
+                ctx.lineTo(x2, y2);
+                ctx.lineTo(x2, line2Y2);
+                ctx.lineTo(x1, line2Y1);
+
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+    };
+
+    private readonly isHover = (moreProps: any) => {
+        const { tolerance, onHover } = this.props;
+
+        if (onHover !== undefined) {
+            const { line1, line2 } = helper(this.props, moreProps);
+
+            if (line1 !== undefined && line2 !== undefined) {
+                const {
+                    mouseXY,
+                    xScale,
+                    chartConfig: { yScale },
+                } = moreProps;
+
+                const line1Hovering = isHovering({
+                    x1Value: line1.x1,
+                    y1Value: line1.y1,
+                    x2Value: line1.x2,
+                    y2Value: line1.y2,
+                    type: "LINE",
+                    mouseXY,
+                    tolerance,
+                    xScale,
+                    yScale,
+                });
+
+                const line2Hovering = isHovering({
+                    x1Value: line2.x1,
+                    y1Value: line2.y1,
+                    x2Value: line2.x2,
+                    y2Value: line2.y2,
+                    type: "LINE",
+                    mouseXY,
+                    tolerance,
+                    xScale,
+                    yScale,
+                });
+
+                return line1Hovering || line2Hovering;
+            }
+        }
+        return false;
+    };
+}
+
+function getLines(props: ChannelWithAreaProps, moreProps: any) {
+    const { startXY, endXY, dy, type } = props;
+    const { xScale } = moreProps;
+
+    if (isNotDefined(startXY) || isNotDefined(endXY)) {
+        return {};
+    }
+
+    const line1 = generateLine({
+        type,
+        start: startXY,
+        end: endXY,
+        xScale,
+        yScale: undefined,
+    });
+
+    const line2 = isDefined(dy)
+        ? {
+              ...line1,
+              y1: line1.y1 + dy,
+              y2: line1.y2 + dy,
+          }
+        : undefined;
+
+    return {
+        line1,
+        line2,
+    };
+}
+
+function helper(props: ChannelWithAreaProps, moreProps: any) {
+    const lines = getLines(props, moreProps);
+    const {
+        xScale,
+        chartConfig: { yScale },
+    } = moreProps;
+
+    const line1 =
+        lines.line1 !== undefined
+            ? {
+                  x1: xScale(lines.line1.x1),
+                  y1: yScale(lines.line1.y1),
+                  x2: xScale(lines.line1.x2),
+                  y2: yScale(lines.line1.y2),
+              }
+            : undefined;
+
+    const line2 =
+        lines.line2 !== undefined
+            ? {
+                  x1: line1!.x1,
+                  y1: yScale(lines.line2.y1),
+                  x2: line1!.x2,
+                  y2: yScale(lines.line2.y2),
+              }
+            : undefined;
+
+    return {
+        lines,
+        line1,
+        line2,
+    };
+}

package/src/components/ClickableCircle.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+
+import { getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+
+export interface ClickableCircleProps {
+    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 strokeWidth: number;
+    readonly strokeStyle: string;
+    readonly fillStyle: string;
+    readonly r: number;
+    readonly cx?: number;
+    readonly cy?: number;
+    readonly className: string;
+    readonly show: boolean;
+    readonly interactiveCursorClass?: string;
+    readonly xyProvider?: (moreProps: any) => number[];
+}
+
+export class ClickableCircle extends React.Component<ClickableCircleProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-interactive-line-edge",
+        show: false,
+    };
+
+    public render() {
+        const { interactiveCursorClass, onDragStart, onDrag, onDragComplete, show } = this.props;
+
+        if (!show) {
+            return null;
+        }
+
+        return (
+            <GenericChartComponent
+                interactiveCursorClass={interactiveCursorClass}
+                selected
+                isHover={this.isHover}
+                onDragStart={onDragStart}
+                onDrag={onDrag}
+                onDragComplete={onDragComplete}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getMouseCanvas}
+                drawOn={["pan", "mousemove", "drag"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { strokeStyle, strokeWidth, fillStyle, r } = this.props;
+
+        ctx.lineWidth = strokeWidth;
+        ctx.fillStyle = fillStyle;
+        ctx.strokeStyle = strokeStyle;
+
+        const [x, y] = this.helper(moreProps);
+
+        ctx.beginPath();
+        ctx.arc(x, y, r, 0, 2 * Math.PI, false);
+        ctx.fill();
+        ctx.stroke();
+    };
+
+    private readonly isHover = (moreProps: any) => {
+        const { mouseXY } = moreProps;
+        const r = this.props.r + 7;
+        const [x, y] = this.helper(moreProps);
+
+        const [mx, my] = mouseXY;
+        const hover = x - r < mx && mx < x + r && y - r < my && my < y + r;
+
+        return hover;
+    };
+
+    private readonly helper = (moreProps: any) => {
+        const { xyProvider, cx, cy } = this.props;
+
+        if (xyProvider !== undefined) {
+            return xyProvider(moreProps);
+        }
+
+        const {
+            xScale,
+            chartConfig: { yScale },
+        } = moreProps;
+
+        const x = xScale(cx);
+        const y = yScale(cy);
+        return [x, y];
+    };
+}

package/src/components/ClickableShape.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+import { isHovering2 } from "./InteractiveStraightLine";
+
+export interface ClickableShapeProps {
+    readonly fontWeight: string;
+    readonly fontFamily: string;
+    readonly fontStyle: string;
+    readonly fontSize: number;
+    readonly strokeStyle: string;
+    readonly strokeWidth: number;
+    readonly text: string;
+    readonly textBox: {
+        readonly closeIcon: any;
+        readonly left: number;
+        readonly padding: any;
+    };
+    readonly hovering?: boolean;
+    readonly interactiveCursorClass?: string;
+    readonly show?: boolean;
+    readonly onHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onUnHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onClick?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly yValue: number;
+}
+
+export class ClickableShape extends React.Component<ClickableShapeProps> {
+    public static defaultProps = {
+        show: false,
+        strokeWidth: 1,
+    };
+
+    private closeIcon: any;
+
+    public render() {
+        const { interactiveCursorClass, onHover, onUnHover, onClick, show } = this.props;
+
+        if (!show) {
+            return null;
+        }
+
+        return (
+            <GenericChartComponent
+                interactiveCursorClass={interactiveCursorClass}
+                isHover={this.isHover}
+                onClickWhenHover={onClick}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getMouseCanvas}
+                onHover={onHover}
+                onUnHover={onUnHover}
+                drawOn={["pan", "mousemove", "drag"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { strokeStyle, strokeWidth, hovering, textBox } = this.props;
+
+        const [x, y] = this.helper(this.props, moreProps, ctx);
+
+        this.closeIcon = { x, y };
+        ctx.beginPath();
+
+        ctx.lineWidth = hovering ? strokeWidth + 1 : strokeWidth;
+        ctx.strokeStyle = strokeStyle;
+        const halfWidth = textBox.closeIcon.width / 2;
+        ctx.moveTo(x - halfWidth, y - halfWidth);
+        ctx.lineTo(x + halfWidth, y + halfWidth);
+        ctx.moveTo(x - halfWidth, y + halfWidth);
+        ctx.lineTo(x + halfWidth, y - halfWidth);
+        ctx.stroke();
+    };
+
+    private readonly isHover = (moreProps: any) => {
+        const { mouseXY } = moreProps;
+        if (this.closeIcon) {
+            const { textBox } = this.props;
+            const { x, y } = this.closeIcon;
+            const halfWidth = textBox.closeIcon.width / 2;
+
+            const start1 = [x - halfWidth, y - halfWidth];
+            const end1 = [x + halfWidth, y + halfWidth];
+            const start2 = [x - halfWidth, y + halfWidth];
+            const end2 = [x + halfWidth, y - halfWidth];
+
+            if (isHovering2(start1, end1, mouseXY, 3) || isHovering2(start2, end2, mouseXY, 3)) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    private readonly helper = (props: ClickableShapeProps, moreProps: any, ctx: CanvasRenderingContext2D) => {
+        const { yValue, text, textBox } = props;
+        const { fontFamily, fontStyle, fontWeight, fontSize } = props;
+        ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+
+        const {
+            chartConfig: { yScale },
+        } = moreProps;
+
+        const x =
+            textBox.left +
+            textBox.padding.left +
+            ctx.measureText(text).width +
+            textBox.padding.right +
+            textBox.closeIcon.padding.left +
+            textBox.closeIcon.width / 2;
+
+        const y = yScale(yValue);
+
+        return [x, y];
+    };
+}