@tradingaction/interactive 2.0.13

package/lib/wrapper/EachText.js

@@ -0,0 +1,83 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import { getXValue } from "@tradingaction/core/lib/utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+import { HoverTextNearMouse, InteractiveText } from "../components";
+export class EachText extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleHover = (_, moreProps) => {
+            if (this.state.hover !== moreProps.hovering) {
+                this.setState({
+                    hover: moreProps.hovering,
+                });
+            }
+        };
+        this.handleDrag = (e, moreProps) => {
+            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);
+        };
+        this.handleDragStart = (_, moreProps) => {
+            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,
+            };
+        };
+        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,
+        };
+    }
+    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 } = hoverText, restHoverTextProps = __rest(hoverText, ["enable", "selectedText", "text"]);
+        return (React.createElement("g", null,
+            React.createElement(InteractiveText, Object.assign({ 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 })),
+            React.createElement(HoverTextNearMouse, Object.assign({ show: hoverTextEnabled && hover }, restHoverTextProps, { text: selected ? hoverTextSelected : hoverTextUnselected }))));
+    }
+}
+EachText.defaultProps = {
+    bgStrokeWidth: 1,
+    selected: false,
+    hoverText: Object.assign(Object.assign({}, HoverTextNearMouse.defaultProps), { enable: true, bgHeight: "auto", bgWidth: "auto", text: "Click to select object" }),
+};
+//# sourceMappingURL=EachText.js.map

package/lib/wrapper/EachText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EachText.js","sourceRoot":"","sources":["../../src/wrapper/EachText.tsx"],"names":[],"mappings":"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"}

package/lib/wrapper/EachTrendLine.d.ts

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { strokeDashTypes } from "@tradingaction/core";
+export interface EachTrendLineProps {
+    readonly x1Value: any;
+    readonly x2Value: any;
+    readonly y1Value: any;
+    readonly y2Value: any;
+    readonly index?: number;
+    readonly type: "XLINE" | "RAY" | "LINE";
+    readonly onDrag: (e: React.MouseEvent, index: number | undefined, moreProps: any) => void;
+    readonly onEdge1Drag: any;
+    readonly onEdge2Drag: any;
+    readonly onDragComplete?: (e: React.MouseEvent, 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?: (e: React.MouseEvent, moreProps: any, index: any) => void;
+    readonly r: number;
+    readonly strokeOpacity: number;
+    readonly defaultClassName?: string;
+    readonly selected?: boolean;
+    readonly strokeStyle: string;
+    readonly strokeWidth: number;
+    readonly strokeDasharray: strokeDashTypes;
+    readonly edgeStrokeWidth: number;
+    readonly edgeStroke: string;
+    readonly edgeInteractiveCursor: string;
+    readonly lineInteractiveCursor: string;
+    readonly edgeFill: string;
+    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 EachTrendLineState {
+    anchor?: string;
+    hover?: any;
+}
+export declare class EachTrendLine extends React.Component<EachTrendLineProps, EachTrendLineState> {
+    static defaultProps: {
+        onDrag: () => void;
+        onEdge1Drag: () => void;
+        onEdge2Drag: () => void;
+        onSelect: () => void;
+        selected: boolean;
+        edgeStroke: string;
+        edgeFill: string;
+        edgeStrokeWidth: number;
+        r: number;
+        strokeWidth: number;
+        strokeDasharray: string;
+        hoverText: {
+            enable: boolean;
+        };
+    };
+    private dragStart;
+    private isHover;
+    private saveNodeType;
+    constructor(props: EachTrendLineProps);
+    render(): JSX.Element;
+    private readonly handleHover;
+    private readonly handleEdge2Drag;
+    private readonly handleDoubleClickWhenHover;
+    private readonly handleClickWhenHover;
+    private readonly handleClickOutside;
+    private readonly handleContextMenuWhenHover;
+    private readonly handleEdge1Drag;
+    private readonly handleDragComplete;
+    private readonly handleEdge2DragStart;
+    private readonly handleEdge1DragStart;
+    private readonly handleLineDrag;
+    private readonly handleLineDragStart;
+}
+export declare function getNewXY(moreProps: any): any[];
+export {};

package/lib/wrapper/EachTrendLine.js

@@ -0,0 +1,165 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import { ascending as d3Ascending } from "d3-array";
+import { noop } from "@tradingaction/core";
+import { getXValue } from "@tradingaction/core/lib/utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+import { ClickableCircle, HoverTextNearMouse, InteractiveStraightLine } from "../components";
+export class EachTrendLine extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleHover = (_, moreProps) => {
+            if (this.state.hover !== moreProps.hovering) {
+                this.setState({
+                    hover: moreProps.hovering,
+                });
+            }
+        };
+        this.handleEdge2Drag = (e, moreProps) => {
+            const { index, onDrag, x1Value, y1Value } = this.props;
+            const [x2Value, y2Value] = getNewXY(moreProps);
+            onDrag(e, index, {
+                x1Value,
+                y1Value,
+                x2Value,
+                y2Value,
+            });
+        };
+        this.handleDoubleClickWhenHover = (e, moreProps) => {
+            if (this.props.onDoubleClickWhenHover) {
+                const { index, onDoubleClickWhenHover } = this.props;
+                onDoubleClickWhenHover(e, moreProps, index);
+            }
+        };
+        this.handleClickWhenHover = (e, moreProps) => {
+            if (this.props.onClickWhenHover) {
+                const { index, onClickWhenHover } = this.props;
+                onClickWhenHover(e, moreProps, index);
+            }
+        };
+        this.handleClickOutside = (e, moreProps) => {
+            if (this.props.onClickOutside) {
+                const { index, onClickOutside } = this.props;
+                onClickOutside(e, moreProps, index);
+            }
+        };
+        this.handleContextMenuWhenHover = (e, moreProps) => {
+            if (this.props.onContextMenuWhenHover) {
+                const { index, onContextMenuWhenHover } = this.props;
+                onContextMenuWhenHover(e, moreProps, index);
+            }
+        };
+        this.handleEdge1Drag = (e, moreProps) => {
+            const { index, onDrag, x2Value, y2Value } = this.props;
+            const [x1Value, y1Value] = getNewXY(moreProps);
+            onDrag(e, index, {
+                x1Value,
+                y1Value,
+                x2Value,
+                y2Value,
+            });
+        };
+        this.handleDragComplete = (e, moreProps) => {
+            this.setState({
+                anchor: undefined,
+            });
+            const { onDragComplete } = this.props;
+            if (onDragComplete === undefined) {
+                return;
+            }
+            onDragComplete(e, moreProps);
+        };
+        this.handleEdge2DragStart = () => {
+            this.setState({
+                anchor: "edge1",
+            });
+        };
+        this.handleEdge1DragStart = () => {
+            this.setState({
+                anchor: "edge2",
+            });
+        };
+        this.handleLineDrag = (e, moreProps) => {
+            const { index, onDrag } = this.props;
+            const { x1Value, y1Value, x2Value, 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, {
+                x1Value: newX1Value,
+                y1Value: newY1Value,
+                x2Value: newX2Value,
+                y2Value: newY2Value,
+            });
+        };
+        this.handleLineDragStart = () => {
+            const { x1Value, y1Value, x2Value, y2Value } = this.props;
+            this.dragStart = {
+                x1Value,
+                y1Value,
+                x2Value,
+                y2Value,
+            };
+        };
+        this.isHover = isHover.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+        this.state = {
+            hover: false,
+        };
+    }
+    render() {
+        const { x1Value, y1Value, x2Value, y2Value, type, strokeStyle, strokeWidth, strokeDasharray, r, edgeStrokeWidth, edgeFill, edgeStroke, edgeInteractiveCursor, lineInteractiveCursor, hoverText, selected, onDragComplete, } = this.props;
+        const { enable: hoverTextEnabled, selectedText: hoverTextSelected, text: hoverTextUnselected } = hoverText, restHoverTextProps = __rest(hoverText, ["enable", "selectedText", "text"]);
+        const { hover, anchor } = this.state;
+        return (React.createElement("g", null,
+            React.createElement(InteractiveStraightLine, { ref: this.saveNodeType("line"), selected: selected || hover, onHover: this.handleHover, onUnHover: this.handleHover, x1Value: x1Value, y1Value: y1Value, x2Value: x2Value, y2Value: y2Value, type: type, strokeStyle: strokeStyle, strokeWidth: hover || selected ? strokeWidth + 1 : strokeWidth, strokeDasharray: strokeDasharray, interactiveCursorClass: lineInteractiveCursor, onDragStart: this.handleLineDragStart, onDrag: this.handleLineDrag, onDragComplete: onDragComplete, onDoubleClickWhenHover: this.handleDoubleClickWhenHover, onClickWhenHover: this.handleClickWhenHover, onClickOutside: this.handleClickOutside, onContextMenuWhenHover: this.handleContextMenuWhenHover }),
+            React.createElement(ClickableCircle, { ref: this.saveNodeType("edge1"), show: selected || hover, cx: x1Value, cy: y1Value, r: r, fillStyle: edgeFill, strokeStyle: anchor === "edge1" ? strokeStyle : edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: edgeInteractiveCursor, onDragStart: this.handleEdge1DragStart, onDrag: this.handleEdge1Drag, onDragComplete: this.handleDragComplete }),
+            React.createElement(ClickableCircle, { ref: this.saveNodeType("edge2"), show: selected || hover, cx: x2Value, cy: y2Value, r: r, fillStyle: edgeFill, strokeStyle: anchor === "edge2" ? strokeStyle : edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: edgeInteractiveCursor, onDragStart: this.handleEdge2DragStart, onDrag: this.handleEdge2Drag, onDragComplete: this.handleDragComplete }),
+            React.createElement(HoverTextNearMouse, Object.assign({ show: hoverTextEnabled && hover }, restHoverTextProps, { text: selected ? hoverTextSelected : hoverTextUnselected }))));
+    }
+}
+EachTrendLine.defaultProps = {
+    onDrag: noop,
+    onEdge1Drag: noop,
+    onEdge2Drag: noop,
+    onSelect: noop,
+    selected: false,
+    edgeStroke: "#000000",
+    edgeFill: "#FFFFFF",
+    edgeStrokeWidth: 2,
+    r: 5,
+    strokeWidth: 1,
+    strokeDasharray: "Solid",
+    hoverText: {
+        enable: false,
+    },
+};
+export function getNewXY(moreProps) {
+    const { xScale, chartConfig: { yScale }, xAccessor, plotData, mouseXY, } = moreProps;
+    const mouseY = mouseXY[1];
+    const x = getXValue(xScale, xAccessor, mouseXY, plotData);
+    const [small, big] = yScale.domain().slice().sort(d3Ascending);
+    const y = yScale.invert(mouseY);
+    const newY = Math.min(Math.max(y, small), big);
+    return [x, newY];
+}
+//# sourceMappingURL=EachTrendLine.js.map

package/lib/wrapper/EachTrendLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EachTrendLine.js","sourceRoot":"","sources":["../../src/wrapper/EachTrendLine.tsx"],"names":[],"mappings":"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"}

package/lib/wrapper/index.d.ts

@@ -0,0 +1,7 @@
+export { EachEquidistantChannel } from "./EachEquidistantChannel";
+export { EachFibRetracement } from "./EachFibRetracement";
+export { EachGannFan } from "./EachGannFan";
+export { EachInteractiveYCoordinate } from "./EachInteractiveYCoordinate";
+export { EachLinearRegressionChannel } from "./EachLinearRegressionChannel";
+export { EachText } from "./EachText";
+export { EachTrendLine } from "./EachTrendLine";

package/lib/wrapper/index.js

@@ -0,0 +1,8 @@
+export { EachEquidistantChannel } from "./EachEquidistantChannel";
+export { EachFibRetracement } from "./EachFibRetracement";
+export { EachGannFan } from "./EachGannFan";
+export { EachInteractiveYCoordinate } from "./EachInteractiveYCoordinate";
+export { EachLinearRegressionChannel } from "./EachLinearRegressionChannel";
+export { EachText } from "./EachText";
+export { EachTrendLine } from "./EachTrendLine";
+//# sourceMappingURL=index.js.map

package/lib/wrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/wrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "@tradingaction/interactive",
+    "version": "2.0.13",
+    "description": "Interactive features for react-financial-charts",
+    "publishConfig": {
+        "access": "public"
+    },
+    "main": "./lib/index.js",
+    "typings": "./lib/index.d.ts",
+    "files": [
+        "lib",
+        "src"
+    ],
+    "sideEffects": false,
+    "author": "Reactive Markets",
+    "keywords": [
+        "charts",
+        "charting",
+        "stockcharts",
+        "finance",
+        "financial",
+        "finance-chart",
+        "react",
+        "d3"
+    ],
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/reactivemarkets/react-financial-charts.git"
+    },
+    "bugs": {
+        "url": "https://github.com/reactivemarkets/react-financial-charts/issues"
+    },
+    "scripts": {
+        "build": "npm run clean && npm run compile",
+        "clean": "rimraf lib",
+        "compile": "tsc -p tsconfig.json",
+        "watch": "tsc -p tsconfig.json --watch --preserveWatchOutput"
+    },
+    "dependencies": {
+        "@tradingaction/coordinates": "^2.0.13",
+        "@tradingaction/core": "^2.0.13",
+        "d3-array": "^2.9.1",
+        "d3-format": "^2.0.0",
+        "d3-interpolate": "^2.0.1",
+        "d3-path": "^2.0.0"
+    },
+    "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    },
+    "gitHead": "9c9bc635a2291c8da0e1dd5befa4000e96d83119"
+}

package/src/Brush.tsx

@@ -0,0 +1,172 @@
+import * as React from "react";
+import { getStrokeDasharrayCanvas, getMouseCanvas, GenericChartComponent, strokeDashTypes } from "@tradingaction/core";
+
+interface BrushProps {
+    readonly enabled: boolean;
+    readonly onBrush: ({ start, end }: any, moreProps: any) => void;
+    readonly type?: "1D" | "2D";
+    readonly strokeStyle?: string;
+    readonly fillStyle?: string;
+    readonly interactiveState: object;
+    readonly strokeDashArray?: strokeDashTypes;
+}
+
+interface BrushState {
+    end?: any;
+    rect: any | null;
+    selected?: boolean;
+    start?: any;
+    x1y1?: any;
+}
+
+export class Brush extends React.Component<BrushProps, BrushState> {
+    public static defaultProps = {
+        type: "2D",
+        strokeStyle: "#000000",
+        fillStyle: "#3h3h3h",
+        strokeDashArray: "ShortDash",
+    };
+
+    private zoomHappening?: boolean;
+
+    public constructor(props: BrushProps) {
+        super(props);
+
+        this.terminate = this.terminate.bind(this);
+        this.state = {
+            rect: null,
+        };
+    }
+
+    public terminate() {
+        this.zoomHappening = false;
+        this.setState({
+            x1y1: null,
+            start: null,
+            end: null,
+            rect: null,
+        });
+    }
+
+    public render() {
+        const { enabled } = this.props;
+        if (!enabled) {
+            return null;
+        }
+
+        return (
+            <GenericChartComponent
+                disablePan={enabled}
+                canvasToDraw={getMouseCanvas}
+                canvasDraw={this.drawOnCanvas}
+                onMouseDown={this.handleZoomStart}
+                onMouseMove={this.handleDrawSquare}
+                onClick={this.handleZoomComplete}
+                drawOn={["mousemove", "pan", "drag"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D) => {
+        const { rect } = this.state;
+        if (rect === null) {
+            return;
+        }
+
+        const { x, y, height, width } = rect;
+        const {
+            strokeStyle = Brush.defaultProps.strokeStyle,
+            fillStyle = Brush.defaultProps.fillStyle,
+            strokeDashArray,
+        } = this.props;
+
+        const dashArray = getStrokeDasharrayCanvas(strokeDashArray);
+
+        ctx.strokeStyle = strokeStyle;
+        ctx.fillStyle = fillStyle;
+        ctx.setLineDash(dashArray);
+        ctx.beginPath();
+        ctx.fillRect(x, y, width, height);
+        ctx.strokeRect(x, y, width, height);
+    };
+
+    private readonly handleZoomStart = (_: React.MouseEvent, moreProps: any) => {
+        this.zoomHappening = false;
+        const {
+            mouseXY: [, mouseY],
+            currentItem,
+            chartConfig: { yScale },
+            xAccessor,
+            xScale,
+        } = moreProps;
+
+        const x1y1 = [xScale(xAccessor(currentItem)), mouseY];
+
+        this.setState({
+            selected: true,
+            x1y1,
+            start: {
+                item: currentItem,
+                xValue: xAccessor(currentItem),
+                yValue: yScale.invert(mouseY),
+            },
+        });
+    };
+
+    private readonly handleDrawSquare = (_: React.MouseEvent, moreProps: any) => {
+        if (this.state.x1y1 == null) {
+            return;
+        }
+
+        this.zoomHappening = true;
+
+        const {
+            mouseXY: [, mouseY],
+            currentItem,
+            chartConfig: { yScale },
+            xAccessor,
+            xScale,
+        } = moreProps;
+
+        const [x2, y2] = [xScale(xAccessor(currentItem)), mouseY];
+
+        const {
+            x1y1: [x1, y1],
+        } = this.state;
+
+        const x = Math.min(x1, x2);
+        const y = Math.min(y1, y2);
+        const height = Math.abs(y2 - y1);
+        const width = Math.abs(x2 - x1);
+
+        this.setState({
+            selected: true,
+            end: {
+                item: currentItem,
+                xValue: xAccessor(currentItem),
+                yValue: yScale.invert(mouseY),
+            },
+            rect: {
+                x,
+                y,
+                height,
+                width,
+            },
+        });
+    };
+
+    private readonly handleZoomComplete = (_: React.MouseEvent, moreProps: any) => {
+        if (this.zoomHappening) {
+            const { onBrush } = this.props;
+            if (onBrush !== undefined) {
+                const { start, end } = this.state;
+                onBrush({ start, end }, moreProps);
+            }
+        }
+
+        this.setState({
+            selected: false,
+            rect: null,
+        });
+    };
+}

package/src/ClickCallback.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
+
+interface ClickCallbackProps {
+    readonly disablePan: boolean;
+    readonly onMouseDown?: (e: React.MouseEvent<Element, MouseEvent>, moreProps: any) => void;
+    readonly onClick?: (e: React.MouseEvent<Element, MouseEvent>, moreProps: any) => void;
+    readonly onDoubleClick?: (e: React.MouseEvent<Element, MouseEvent>, moreProps: any) => void;
+    readonly onContextMenu?: (e: React.MouseEvent<Element, MouseEvent>, moreProps: any) => void;
+    readonly onMouseMove?: (e: React.MouseEvent<Element, MouseEvent>, moreProps: any) => void;
+    readonly onPan?: (e: React.MouseEvent<Element, MouseEvent>, moreProps: any) => void;
+    readonly onPanEnd?: (e: React.MouseEvent<Element, MouseEvent>, moreProps: any) => void;
+}
+
+export class ClickCallback extends React.Component<ClickCallbackProps> {
+    public static defaultProps = {
+        disablePan: false,
+    };
+
+    public render() {
+        const { onMouseDown, onClick, onDoubleClick, onContextMenu, onMouseMove, onPan, onPanEnd } = this.props;
+
+        return (
+            <GenericChartComponent
+                onMouseDown={onMouseDown}
+                onClick={onClick}
+                onDoubleClick={onDoubleClick}
+                onContextMenu={onContextMenu}
+                onMouseMove={onMouseMove}
+                onPan={onPan}
+                onPanEnd={onPanEnd}
+                canvasToDraw={getMouseCanvas}
+                drawOn={["mousemove", "pan"]}
+            />
+        );
+    }
+}