@react-financial-charts/core - npm Package Compare versions

Comparing version 1.0.0-alpha.0 to 1.0.0-alpha.1

CHANGELOG.md

@@ -6,2 +6,20 @@ # Change Log
 
+# [1.0.0-alpha.1](https://github.com/reactivemarkets/react-financial-charts/compare/v1.0.0-alpha.0...v1.0.0-alpha.1) (2020-07-10)
+
+
+### Bug Fixes
+
+* **core:** CanvasContainer is now a PureComponent ([ec4c43e](https://github.com/reactivemarkets/react-financial-charts/commit/ec4c43e2a15dbf50d60d9547633c4dab44398fe5))
+* **core:** fixing issues with empty data sets ([23c2458](https://github.com/reactivemarkets/react-financial-charts/commit/23c2458bfe55e97eef96f80030fe32b9cf5ac1e1))
+* **core:** fixing re-rendering of svg components ([af0f156](https://github.com/reactivemarkets/react-financial-charts/commit/af0f156c66cd302ec8a45ff6c49e4121385b3ca9))
+
+
+### Features
+
+* **core:** adding onDoubleClick to Chart ([1b6498b](https://github.com/reactivemarkets/react-financial-charts/commit/1b6498b2fba108d930004ddbaaea6573692a1fb4))
+
+
+
+
+
 # [1.0.0-alpha.0](https://github.com/reactivemarkets/react-financial-charts/compare/v0.5.1...v1.0.0-alpha.0) (2020-07-08)
@@ -8,0 +26,0 @@

lib/CanvasContainer.d.ts

@@ -5,13 +5,17 @@ import * as React from "react";
     readonly ratio: number;
+    readonly style?: React.CSSProperties;
     readonly width: number;
     readonly zIndex?: number;
 }
-export declare class CanvasContainer extends React.Component<CanvasContainerProps> {
-    private drawCanvas;
+export declare class CanvasContainer extends React.PureComponent<CanvasContainerProps> {
+    private readonly bgRef;
+    private readonly axesRef;
+    private readonly mouseRef;
     getCanvasContexts(): {
-        [key: string]: CanvasRenderingContext2D;
+        bg: CanvasRenderingContext2D | null | undefined;
+        axes: CanvasRenderingContext2D | null | undefined;
+        mouseCoord: CanvasRenderingContext2D | null | undefined;
     };
     render(): JSX.Element;
-    private readonly setDrawCanvas;
 }
 export {};

lib/CanvasContainer.js

 import * as React from "react";
-export class CanvasContainer extends React.Component {
+export class CanvasContainer extends React.PureComponent {
     constructor() {
         super(...arguments);
-        this.drawCanvas = {};
-        this.setDrawCanvas = (node) => {
-            const context = node === null || node === void 0 ? void 0 : node.getContext("2d");
-            if (context !== null && context !== undefined) {
-                this.drawCanvas[node.id] = context;
-            }
-        };
+        this.bgRef = React.createRef();
+        this.axesRef = React.createRef();
+        this.mouseRef = React.createRef();
     }
     getCanvasContexts() {
-        return this.drawCanvas;
+        var _a, _b, _c;
+        return {
+            bg: (_a = this.bgRef.current) === null || _a === void 0 ? void 0 : _a.getContext("2d"),
+            axes: (_b = this.axesRef.current) === null || _b === void 0 ? void 0 : _b.getContext("2d"),
+            mouseCoord: (_c = this.mouseRef.current) === null || _c === void 0 ? void 0 : _c.getContext("2d"),
+        };
     }
     render() {
-        const { height, width, zIndex, ratio } = this.props;
+        const { height, ratio, style, width, zIndex } = this.props;
         const adjustedWidth = width * ratio;
         const adjustedHeight = height * ratio;
-        const style = { position: "absolute", width, height };
-        return (React.createElement("div", { style: { position: "absolute", zIndex } },
-            React.createElement("canvas", { id: "bg", ref: this.setDrawCanvas, width: adjustedWidth, height: adjustedHeight, style: style }),
-            React.createElement("canvas", { id: "axes", ref: this.setDrawCanvas, width: adjustedWidth, height: adjustedHeight, style: style }),
-            React.createElement("canvas", { id: "mouseCoord", ref: this.setDrawCanvas, width: adjustedWidth, height: adjustedHeight, style: style })));
+        const canvasStyle = { position: "absolute", width, height };
+        return (React.createElement("div", { style: Object.assign(Object.assign({}, style), { position: "absolute", zIndex }) },
+            React.createElement("canvas", { ref: this.bgRef, width: adjustedWidth, height: adjustedHeight, style: canvasStyle }),
+            React.createElement("canvas", { ref: this.axesRef, width: adjustedWidth, height: adjustedHeight, style: canvasStyle }),
+            React.createElement("canvas", { ref: this.mouseRef, width: adjustedWidth, height: adjustedHeight, style: canvasStyle })));
     }
 }
 //# sourceMappingURL=CanvasContainer.js.map

lib/Chart.d.ts

@@ -8,3 +8,4 @@ import * as PropTypes from "prop-types";
     readonly id: number | string;
-    readonly onContextMenu?: (props: any, event: React.MouseEvent) => void;
+    readonly onContextMenu?: (event: React.MouseEvent, props: unknown) => void;
+    readonly onDoubleClick?: (event: React.MouseEvent, props: unknown) => void;
     readonly origin?: number[] | ((width: number, height: number) => number[]);
@@ -42,4 +43,2 @@ readonly padding?: number | {
     componentWillUnmount(): void;
-    readonly listener: (type: any, moreProps: any, state: any, e: any) => void;
-    readonly yScale: () => any;
     getChildContext(): {
@@ -50,3 +49,4 @@ chartId: string | number;
     render(): JSX.Element;
+    private readonly listener;
 }
 export {};

lib/Chart.js

 import { scaleLinear } from "d3-scale";
 import * as PropTypes from "prop-types";
 import * as React from "react";
-import { find, PureComponent } from "./utils";
+import { PureComponent } from "./utils";
 export class Chart extends PureComponent {
@@ -9,16 +9,24 @@ constructor() {
         this.listener = (type, moreProps, state, e) => {
-            const { id, onContextMenu } = this.props;
-            if (type === "contextmenu") {
-                const { currentCharts } = moreProps;
-                if (currentCharts.indexOf(id) > -1) {
+            const { id, onContextMenu, onDoubleClick } = this.props;
+            switch (type) {
+                case "contextmenu": {
                     if (onContextMenu !== undefined) {
-                        onContextMenu(moreProps, e);
+                        const { currentCharts } = moreProps;
+                        if (currentCharts.indexOf(id) > -1) {
+                            onContextMenu(e, moreProps);
+                        }
                     }
+                    break;
                 }
+                case "dblclick": {
+                    if (onDoubleClick !== undefined) {
+                        const { currentCharts } = moreProps;
+                        if (currentCharts.indexOf(id) > -1) {
+                            onDoubleClick(e, moreProps);
+                        }
+                    }
+                    break;
+                }
             }
         };
-        this.yScale = () => {
-            const chartConfig = find(this.context.chartConfig, (each) => each.id === this.props.id);
-            return chartConfig.yScale.copy();
-        };
     }
@@ -39,3 +47,3 @@ componentDidMount() {
         const { id: chartId } = this.props;
-        const chartConfig = find(this.context.chartConfig, (each) => each.id === chartId);
+        const chartConfig = this.context.chartConfig.find((each) => each.id === chartId);
         return {
@@ -47,3 +55,3 @@ chartId,
     render() {
-        const { origin } = find(this.context.chartConfig, (each) => each.id === this.props.id);
+        const { origin } = this.context.chartConfig.find((each) => each.id === this.props.id);
         const [x, y] = origin;
@@ -50,0 +58,0 @@ return React.createElement("g", { transform: `translate(${x}, ${y})` }, this.props.children);

lib/ChartCanvas.d.ts

@@ -144,4 +144,4 @@ import * as PropTypes from "prop-types";
     constructor(props: ChartCanvasProps);
-    getMutableState(): any;
-    getDataInfo(): {
+    getMutableState: () => {};
+    getDataInfo: () => {
         fullData: any;
@@ -155,16 +155,18 @@ xAccessor?: any;
     };
-    getCanvasContexts(): {
-        [key: string]: CanvasRenderingContext2D;
+    getCanvasContexts: () => {
+        bg: CanvasRenderingContext2D | null | undefined;
+        axes: CanvasRenderingContext2D | null | undefined;
+        mouseCoord: CanvasRenderingContext2D | null | undefined;
     } | undefined;
-    generateSubscriptionId(): any;
+    generateSubscriptionId: () => number;
     clearBothCanvas(): void;
     clearMouseCanvas(): void;
     clearThreeCanvas(): void;
-    subscribe(id: any, rest: any): void;
-    unsubscribe(id: any): void;
-    getAllPanConditions(): any;
-    setCursorClass(className: any): void;
-    amIOnTop(id: any): boolean;
-    handleContextMenu(mouseXY: any, e: any): void;
-    calculateStateForDomain(newDomain: any): {
+    subscribe: (id: any, rest: any) => void;
+    unsubscribe: (id: any) => void;
+    getAllPanConditions: () => any[];
+    setCursorClass: (className: string) => void;
+    amIOnTop: (id: any) => boolean;
+    handleContextMenu: (mouseXY: any, e: any) => void;
+    calculateStateForDomain: (newDomain: any) => {
         xScale: any;
@@ -174,3 +176,3 @@ plotData: any;
     };
-    pinchZoomHelper(initialPinch: any, finalPinch: any): {
+    pinchZoomHelper: (initialPinch: any, finalPinch: any) => {
         chartConfig: any;
@@ -183,14 +185,14 @@ xScale: any;
     cancelDrag(): void;
-    handlePinchZoom(initialPinch: any, finalPinch: any, e: any): void;
-    handlePinchZoomEnd(initialPinch: any, e: any): void;
-    handleZoom(zoomDirection: any, mouseXY: any, e: any): void;
-    xAxisZoom(newDomain: any): void;
-    yAxisZoom(chartId: any, newDomain: any): void;
+    handlePinchZoom: (initialPinch: any, finalPinch: any, e: any) => void;
+    handlePinchZoomEnd: (initialPinch: any, e: any) => void;
+    handleZoom: (zoomDirection: any, mouseXY: any, e: any) => void;
+    xAxisZoom: (newDomain: any) => void;
+    yAxisZoom: (chartId: any, newDomain: any) => void;
     triggerEvent(type: any, props?: any, e?: any): void;
-    draw(props: any): void;
-    redraw(): void;
-    panHelper(mouseXY: any, initialXScale: any, { dx, dy }: {
+    draw: (props: any) => void;
+    redraw: () => void;
+    panHelper: (mouseXY: any, initialXScale: any, { dx, dy }: {
         dx: any;
         dy: any;
-    }, chartsToPan: any): {
+    }, chartsToPan: any) => {
         xScale: any;
@@ -203,20 +205,20 @@ plotData: any;
     };
-    handlePan(mousePosition: any, panStartXScale: any, dxdy: any, chartsToPan: any, e: any): void;
-    handlePanEnd(mousePosition: any, panStartXScale: any, dxdy: any, chartsToPan: any, e: any): void;
-    handleMouseDown(mousePosition: any, currentCharts: any, e: any): void;
-    handleMouseEnter(e: any): void;
-    handleMouseMove(mouseXY: any, inputType: any, e: any): void;
-    handleMouseLeave(e: any): void;
-    handleDragStart({ startPos }: {
+    handlePan: (mousePosition: any, panStartXScale: any, dxdy: any, chartsToPan: any, e: any) => void;
+    handlePanEnd: (mousePosition: any, panStartXScale: any, dxdy: any, chartsToPan: any, e: any) => void;
+    handleMouseDown: (mousePosition: any, currentCharts: any, e: any) => void;
+    handleMouseEnter: (e: any) => void;
+    handleMouseMove: (mouseXY: any, inputType: any, e: any) => void;
+    handleMouseLeave: (e: any) => void;
+    handleDragStart: ({ startPos }: {
         startPos: any;
-    }, e: any): void;
-    handleDrag({ startPos, mouseXY }: {
+    }, e: any) => void;
+    handleDrag: ({ startPos, mouseXY }: {
         startPos: any;
         mouseXY: any;
-    }, e: any): void;
-    handleDragEnd({ mouseXY }: {
+    }, e: any) => void;
+    handleDragEnd: ({ mouseXY }: {
         mouseXY: any;
-    }, e: any): void;
-    handleClick(mousePosition: any, e: any): void;
-    handleDoubleClick(mousePosition: any, e: any): void;
+    }, e: any) => void;
+    handleClick: (mousePosition: any, e: any) => void;
+    handleDoubleClick: (mousePosition: any, e: any) => void;
     getChildContext(): {
@@ -241,3 +243,5 @@ fullData: any;
         getCanvasContexts: () => {
-            [key: string]: CanvasRenderingContext2D;
+            bg: CanvasRenderingContext2D | null | undefined;
+            axes: CanvasRenderingContext2D | null | undefined;
+            mouseCoord: CanvasRenderingContext2D | null | undefined;
         } | undefined;
@@ -247,9 +251,9 @@ redraw: () => void;
         unsubscribe: (id: any) => void;
-        generateSubscriptionId: () => any;
-        getMutableState: () => any;
+        generateSubscriptionId: () => number;
+        getMutableState: () => {};
         amIOnTop: (id: any) => boolean;
-        setCursorClass: (className: any) => void;
+        setCursorClass: (className: string) => void;
     };
     UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    resetYDomain(chartId: any): void;
+    resetYDomain: (chartId?: string | undefined) => void;
     shouldComponentUpdate(): boolean;
@@ -256,0 +260,0 @@ render(): JSX.Element;

lib/ChartCanvas.js

@@ -25,3 +25,2 @@ var __rest = (this && this.__rest) || function (s, e) {
         const result = shallowEqual(thisProps[key], nextProps[key]);
-        // console.log(key, result);
         return result;
@@ -102,10 +101,8 @@ });
 }
-function resetChart(props) {
+const resetChart = (props) => {
     const state = calculateState(props);
-    const { xAccessor, displayXAccessor, fullData } = state;
-    const { plotData: initialPlotData, xScale } = state;
+    const { xAccessor, displayXAccessor, fullData, plotData: initialPlotData, xScale } = state;
     const { postCalculator, children } = props;
     const plotData = postCalculator(initialPlotData);
     const dimensions = getDimensions(props);
-    // @ts-ignore
     const chartConfig = getChartConfigWithUpdatedYScales(getNewChartConfig(dimensions, children), { plotData, xAccessor, displayXAccessor, fullData }, xScale.domain());
@@ -115,3 +112,3 @@ return Object.assign(Object.assign({}, state), { xScale,
         chartConfig });
-}
+};
 function updateChart(newState, initialXScale, props, lastItemWasVisible, initialChartConfig) {
@@ -126,3 +123,2 @@ const { fullData, xScale, xAccessor, displayXAccessor, filterData } = newState;
     const updatedXScale = setXRange(xScale, dimensions, padding, direction);
-    // console.log("lastItemWasVisible =", lastItemWasVisible, end, xAccessor(lastItem), end >= xAccessor(lastItem));
     let initialPlotData;
@@ -137,3 +133,2 @@ if (!lastItemWasVisible || end >= xAccessor(lastItem)) {
         const lastItemX = initialXScale(xAccessor(lastItem));
-        // console.log("pointsPerPixel => ", newStart, start, end, updatedXScale(end));
         const response = filterData(fullData, [newStart, end], xAccessor, updatedXScale, {
@@ -145,3 +140,2 @@ fallbackStart: start,
         updatedXScale.domain(response.domain);
-        // console.log("HERE!!!!!", start, end);
     }
@@ -161,5 +155,3 @@ else if (lastItemWasVisible && end < xAccessor(lastItem)) {
     }
-    // plotData = getDataOfLength(fullData, showingInterval, plotData.length)
     const plotData = postCalculator(initialPlotData);
-    // @ts-ignore
     const chartConfig = getChartConfigWithUpdatedYScales(getNewChartConfig(dimensions, children, initialChartConfig), { plotData, xAccessor, displayXAccessor, fullData }, updatedXScale.domain());
@@ -194,5 +186,2 @@ return {
     const { plotData, domain } = filterData(fullData, extent, inputXAccesor, updatedXScale);
-    if (process.env.NODE_ENV !== "production" && plotData.length <= 1) {
-        throw new Error(`Showing ${plotData.length} datapoints, review the 'xExtents' prop of ChartCanvas`);
-    }
     return {
@@ -248,187 +237,162 @@ plotData,
         this.eventCaptureRef = React.createRef();
-        this.getDataInfo = this.getDataInfo.bind(this);
-        this.getCanvasContexts = this.getCanvasContexts.bind(this);
-        this.handleMouseMove = this.handleMouseMove.bind(this);
-        this.handleMouseEnter = this.handleMouseEnter.bind(this);
-        this.handleMouseLeave = this.handleMouseLeave.bind(this);
-        this.handleZoom = this.handleZoom.bind(this);
-        this.handlePinchZoom = this.handlePinchZoom.bind(this);
-        this.handlePinchZoomEnd = this.handlePinchZoomEnd.bind(this);
-        this.handlePan = this.handlePan.bind(this);
-        this.handlePanEnd = this.handlePanEnd.bind(this);
-        this.handleClick = this.handleClick.bind(this);
-        this.handleMouseDown = this.handleMouseDown.bind(this);
-        this.handleDoubleClick = this.handleDoubleClick.bind(this);
-        this.handleContextMenu = this.handleContextMenu.bind(this);
-        this.handleDragStart = this.handleDragStart.bind(this);
-        this.handleDrag = this.handleDrag.bind(this);
-        this.handleDragEnd = this.handleDragEnd.bind(this);
-        this.panHelper = this.panHelper.bind(this);
-        this.pinchZoomHelper = this.pinchZoomHelper.bind(this);
-        this.xAxisZoom = this.xAxisZoom.bind(this);
-        this.yAxisZoom = this.yAxisZoom.bind(this);
-        this.resetYDomain = this.resetYDomain.bind(this);
-        this.calculateStateForDomain = this.calculateStateForDomain.bind(this);
-        this.generateSubscriptionId = this.generateSubscriptionId.bind(this);
-        this.draw = this.draw.bind(this);
-        this.redraw = this.redraw.bind(this);
-        this.getAllPanConditions = this.getAllPanConditions.bind(this);
+        this.lastSubscriptionId = 0;
+        this.mutableState = {};
+        this.panInProgress = false;
         this.subscriptions = [];
-        this.subscribe = this.subscribe.bind(this);
-        this.unsubscribe = this.unsubscribe.bind(this);
-        this.amIOnTop = this.amIOnTop.bind(this);
-        this.setCursorClass = this.setCursorClass.bind(this);
-        this.getMutableState = this.getMutableState.bind(this);
-        this.panInProgress = false;
-        this.state = {};
-        this.mutableState = {};
-        this.lastSubscriptionId = 0;
-        const _a = resetChart(props), { fullData } = _a, state = __rest(_a, ["fullData"]);
-        this.state = state;
-        this.fullData = fullData;
-    }
-    getMutableState() {
-        return this.mutableState;
-    }
-    getDataInfo() {
-        return Object.assign(Object.assign({}, this.state), { fullData: this.fullData });
-    }
-    getCanvasContexts() {
-        const current = this.canvasContainerRef.current;
-        if (current !== null) {
-            return current.getCanvasContexts();
-        }
-    }
-    generateSubscriptionId() {
-        this.lastSubscriptionId++;
-        return this.lastSubscriptionId;
-    }
-    clearBothCanvas() {
-        const canvases = this.getCanvasContexts();
-        if (canvases && canvases.axes) {
-            clearCanvas([canvases.axes, canvases.mouseCoord], this.props.ratio);
-        }
-    }
-    clearMouseCanvas() {
-        const canvases = this.getCanvasContexts();
-        if (canvases && canvases.mouseCoord) {
-            clearCanvas([canvases.mouseCoord], this.props.ratio);
-        }
-    }
-    clearThreeCanvas() {
-        const canvases = this.getCanvasContexts();
-        if (canvases && canvases.axes) {
-            clearCanvas([canvases.axes, canvases.mouseCoord, canvases.bg], this.props.ratio);
-        }
-    }
-    subscribe(id, rest) {
-        const { getPanConditions = functor({
-            draggable: false,
-            panEnabled: true,
-        }), } = rest;
-        this.subscriptions = this.subscriptions.concat(Object.assign(Object.assign({ id }, rest), { getPanConditions }));
-    }
-    unsubscribe(id) {
-        this.subscriptions = this.subscriptions.filter((each) => each.id !== id);
-    }
-    getAllPanConditions() {
-        return this.subscriptions.map((each) => each.getPanConditions());
-    }
-    setCursorClass(className) {
-        var _a;
-        (_a = this.eventCaptureRef.current) === null || _a === void 0 ? void 0 : _a.setCursorClass(className);
-    }
-    amIOnTop(id) {
-        const dragableComponents = this.subscriptions.filter((each) => each.getPanConditions().draggable);
-        return dragableComponents.length > 0 && last(dragableComponents).id === id;
-    }
-    handleContextMenu(mouseXY, e) {
-        const { xAccessor, chartConfig, plotData, xScale } = this.state;
-        const currentCharts = getCurrentCharts(chartConfig, mouseXY);
-        const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
-        this.triggerEvent("contextmenu", {
-            mouseXY,
-            currentItem,
-            currentCharts,
-        }, e);
-    }
-    calculateStateForDomain(newDomain) {
-        const { xAccessor, displayXAccessor, xScale: initialXScale, chartConfig: initialChartConfig, plotData: initialPlotData, } = this.state;
-        const { filterData } = this.state;
-        const { fullData } = this;
-        const { postCalculator } = this.props;
-        const { plotData: beforePlotData, domain } = filterData(fullData, newDomain, xAccessor, initialXScale, {
-            currentPlotData: initialPlotData,
-            currentDomain: initialXScale.domain(),
-        });
-        const plotData = postCalculator(beforePlotData);
-        const updatedScale = initialXScale.copy().domain(domain);
-        // @ts-ignore
-        const chartConfig = getChartConfigWithUpdatedYScales(initialChartConfig, { plotData, xAccessor, displayXAccessor, fullData }, updatedScale.domain());
-        return {
-            xScale: updatedScale,
-            plotData,
-            chartConfig,
+        this.getMutableState = () => {
+            return this.mutableState;
         };
-    }
-    pinchZoomHelper(initialPinch, finalPinch) {
-        const { xScale: initialPinchXScale } = initialPinch;
-        const { xScale: initialXScale, chartConfig: initialChartConfig, plotData: initialPlotData, xAccessor, displayXAccessor, } = this.state;
-        const { filterData } = this.state;
-        const { fullData } = this;
-        const { postCalculator } = this.props;
-        const { topLeft: iTL, bottomRight: iBR } = pinchCoordinates(initialPinch);
-        const { topLeft: fTL, bottomRight: fBR } = pinchCoordinates(finalPinch);
-        const e = initialPinchXScale.range()[1];
-        const xDash = Math.round(-(iBR[0] * fTL[0] - iTL[0] * fBR[0]) / (iTL[0] - iBR[0]));
-        const yDash = Math.round(e + ((e - iBR[0]) * (e - fTL[0]) - (e - iTL[0]) * (e - fBR[0])) / (e - iTL[0] - (e - iBR[0])));
-        const x = Math.round((-xDash * iTL[0]) / (-xDash + fTL[0]));
-        const y = Math.round(e - ((yDash - e) * (e - iTL[0])) / (yDash + (e - fTL[0])));
-        const newDomain = [x, y].map(initialPinchXScale.invert);
-        // var domainR = initial.right + right;
-        const { plotData: beforePlotData, domain } = filterData(fullData, newDomain, xAccessor, initialPinchXScale, {
-            currentPlotData: initialPlotData,
-            currentDomain: initialXScale.domain(),
-        });
-        const plotData = postCalculator(beforePlotData);
-        const updatedScale = initialXScale.copy().domain(domain);
-        const mouseXY = finalPinch.touch1Pos;
-        // @ts-ignore
-        const chartConfig = getChartConfigWithUpdatedYScales(initialChartConfig, { plotData, xAccessor, displayXAccessor, fullData }, updatedScale.domain());
-        const currentItem = getCurrentItem(updatedScale, xAccessor, mouseXY, plotData);
-        return {
-            chartConfig,
-            xScale: updatedScale,
-            plotData,
-            mouseXY,
-            currentItem,
+        this.getDataInfo = () => {
+            return Object.assign(Object.assign({}, this.state), { fullData: this.fullData });
         };
-    }
-    cancelDrag() {
-        var _a;
-        (_a = this.eventCaptureRef.current) === null || _a === void 0 ? void 0 : _a.cancelDrag();
-        this.triggerEvent("dragcancel");
-    }
-    handlePinchZoom(initialPinch, finalPinch, e) {
-        if (!this.waitingForPinchZoomAnimationFrame) {
-            this.waitingForPinchZoomAnimationFrame = true;
-            const state = this.pinchZoomHelper(initialPinch, finalPinch);
-            this.triggerEvent("pinchzoom", state, e);
-            this.finalPinch = finalPinch;
-            requestAnimationFrame(() => {
-                this.clearBothCanvas();
-                this.draw({ trigger: "pinchzoom" });
-                this.waitingForPinchZoomAnimationFrame = false;
+        this.getCanvasContexts = () => {
+            const current = this.canvasContainerRef.current;
+            if (current !== null) {
+                return current.getCanvasContexts();
+            }
+        };
+        this.generateSubscriptionId = () => {
+            this.lastSubscriptionId++;
+            return this.lastSubscriptionId;
+        };
+        this.subscribe = (id, rest) => {
+            const { getPanConditions = functor({
+                draggable: false,
+                panEnabled: true,
+            }), } = rest;
+            this.subscriptions = this.subscriptions.concat(Object.assign(Object.assign({ id }, rest), { getPanConditions }));
+        };
+        this.unsubscribe = (id) => {
+            this.subscriptions = this.subscriptions.filter((each) => each.id !== id);
+        };
+        this.getAllPanConditions = () => {
+            return this.subscriptions.map((each) => each.getPanConditions());
+        };
+        this.setCursorClass = (className) => {
+            var _a;
+            (_a = this.eventCaptureRef.current) === null || _a === void 0 ? void 0 : _a.setCursorClass(className);
+        };
+        this.amIOnTop = (id) => {
+            const dragableComponents = this.subscriptions.filter((each) => each.getPanConditions().draggable);
+            return dragableComponents.length > 0 && last(dragableComponents).id === id;
+        };
+        this.handleContextMenu = (mouseXY, e) => {
+            const { xAccessor, chartConfig, plotData, xScale } = this.state;
+            const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+            const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+            this.triggerEvent("contextmenu", {
+                mouseXY,
+                currentItem,
+                currentCharts,
+            }, e);
+        };
+        this.calculateStateForDomain = (newDomain) => {
+            const { xAccessor, displayXAccessor, xScale: initialXScale, chartConfig: initialChartConfig, plotData: initialPlotData, } = this.state;
+            const { filterData } = this.state;
+            const { fullData } = this;
+            const { postCalculator } = this.props;
+            const { plotData: beforePlotData, domain } = filterData(fullData, newDomain, xAccessor, initialXScale, {
+                currentPlotData: initialPlotData,
+                currentDomain: initialXScale.domain(),
             });
-        }
-    }
-    handlePinchZoomEnd(initialPinch, e) {
-        const { xAccessor } = this.state;
-        if (this.finalPinch) {
-            const state = this.pinchZoomHelper(initialPinch, this.finalPinch);
-            const { xScale } = state;
-            this.triggerEvent("pinchzoom", state, e);
-            this.finalPinch = undefined;
+            const plotData = postCalculator(beforePlotData);
+            const updatedScale = initialXScale.copy().domain(domain);
+            // @ts-ignore
+            const chartConfig = getChartConfigWithUpdatedYScales(initialChartConfig, { plotData, xAccessor, displayXAccessor, fullData }, updatedScale.domain());
+            return {
+                xScale: updatedScale,
+                plotData,
+                chartConfig,
+            };
+        };
+        this.pinchZoomHelper = (initialPinch, finalPinch) => {
+            const { xScale: initialPinchXScale } = initialPinch;
+            const { xScale: initialXScale, chartConfig: initialChartConfig, plotData: initialPlotData, xAccessor, displayXAccessor, } = this.state;
+            const { filterData } = this.state;
+            const { fullData } = this;
+            const { postCalculator } = this.props;
+            const { topLeft: iTL, bottomRight: iBR } = pinchCoordinates(initialPinch);
+            const { topLeft: fTL, bottomRight: fBR } = pinchCoordinates(finalPinch);
+            const e = initialPinchXScale.range()[1];
+            const xDash = Math.round(-(iBR[0] * fTL[0] - iTL[0] * fBR[0]) / (iTL[0] - iBR[0]));
+            const yDash = Math.round(e + ((e - iBR[0]) * (e - fTL[0]) - (e - iTL[0]) * (e - fBR[0])) / (e - iTL[0] - (e - iBR[0])));
+            const x = Math.round((-xDash * iTL[0]) / (-xDash + fTL[0]));
+            const y = Math.round(e - ((yDash - e) * (e - iTL[0])) / (yDash + (e - fTL[0])));
+            const newDomain = [x, y].map(initialPinchXScale.invert);
+            // var domainR = initial.right + right;
+            const { plotData: beforePlotData, domain } = filterData(fullData, newDomain, xAccessor, initialPinchXScale, {
+                currentPlotData: initialPlotData,
+                currentDomain: initialXScale.domain(),
+            });
+            const plotData = postCalculator(beforePlotData);
+            const updatedScale = initialXScale.copy().domain(domain);
+            const mouseXY = finalPinch.touch1Pos;
+            // @ts-ignore
+            const chartConfig = getChartConfigWithUpdatedYScales(initialChartConfig, { plotData, xAccessor, displayXAccessor, fullData }, updatedScale.domain());
+            const currentItem = getCurrentItem(updatedScale, xAccessor, mouseXY, plotData);
+            return {
+                chartConfig,
+                xScale: updatedScale,
+                plotData,
+                mouseXY,
+                currentItem,
+            };
+        };
+        this.handlePinchZoom = (initialPinch, finalPinch, e) => {
+            if (!this.waitingForPinchZoomAnimationFrame) {
+                this.waitingForPinchZoomAnimationFrame = true;
+                const state = this.pinchZoomHelper(initialPinch, finalPinch);
+                this.triggerEvent("pinchzoom", state, e);
+                this.finalPinch = finalPinch;
+                requestAnimationFrame(() => {
+                    this.clearBothCanvas();
+                    this.draw({ trigger: "pinchzoom" });
+                    this.waitingForPinchZoomAnimationFrame = false;
+                });
+            }
+        };
+        this.handlePinchZoomEnd = (initialPinch, e) => {
+            const { xAccessor } = this.state;
+            if (this.finalPinch) {
+                const state = this.pinchZoomHelper(initialPinch, this.finalPinch);
+                const { xScale } = state;
+                this.triggerEvent("pinchzoom", state, e);
+                this.finalPinch = undefined;
+                this.clearThreeCanvas();
+                const { fullData } = this;
+                const firstItem = head(fullData);
+                const start = head(xScale.domain());
+                const end = xAccessor(firstItem);
+                const { onLoadMore } = this.props;
+                this.setState(state, () => {
+                    if (start < end) {
+                        onLoadMore(start, end);
+                    }
+                });
+            }
+        };
+        this.handleZoom = (zoomDirection, mouseXY, e) => {
+            if (this.panInProgress) {
+                return;
+            }
+            const { xAccessor, xScale: initialXScale, plotData: initialPlotData } = this.state;
+            const { zoomMultiplier = ChartCanvas.defaultProps.zoomMultiplier, zoomAnchor } = this.props;
+            const { fullData } = this;
+            const item = zoomAnchor({
+                xScale: initialXScale,
+                xAccessor,
+                mouseXY,
+                plotData: initialPlotData,
+                fullData,
+            });
+            const cx = initialXScale(item);
+            const c = zoomDirection > 0 ? 1 * zoomMultiplier : 1 / zoomMultiplier;
+            const newDomain = initialXScale
+                .range()
+                .map((x) => cx + (x - cx) * c)
+                .map(initialXScale.invert);
+            const { xScale, plotData, chartConfig } = this.calculateStateForDomain(newDomain);
+            const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+            const currentCharts = getCurrentCharts(chartConfig, mouseXY);
             this.clearThreeCanvas();
-            const { fullData } = this;
             const firstItem = head(fullData);
@@ -438,3 +402,21 @@ const start = head(xScale.domain());
             const { onLoadMore } = this.props;
-            this.setState(state, () => {
+            this.mutableState = {
+                mouseXY,
+                currentItem,
+                currentCharts,
+            };
+            this.triggerEvent("zoom", {
+                xScale,
+                plotData,
+                chartConfig,
+                mouseXY,
+                currentCharts,
+                currentItem,
+                show: true,
+            }, e);
+            this.setState({
+                xScale,
+                plotData,
+                chartConfig,
+            }, () => {
                 if (start < end) {
@@ -444,171 +426,6 @@ onLoadMore(start, end);
             });
-        }
-    }
-    handleZoom(zoomDirection, mouseXY, e) {
-        if (this.panInProgress) {
-            return;
-        }
-        const { xAccessor, xScale: initialXScale, plotData: initialPlotData } = this.state;
-        const { zoomMultiplier = ChartCanvas.defaultProps.zoomMultiplier, zoomAnchor } = this.props;
-        const { fullData } = this;
-        const item = zoomAnchor({
-            xScale: initialXScale,
-            xAccessor,
-            mouseXY,
-            plotData: initialPlotData,
-            fullData,
-        });
-        const cx = initialXScale(item);
-        const c = zoomDirection > 0 ? 1 * zoomMultiplier : 1 / zoomMultiplier;
-        const newDomain = initialXScale
-            .range()
-            .map((x) => cx + (x - cx) * c)
-            .map(initialXScale.invert);
-        const { xScale, plotData, chartConfig } = this.calculateStateForDomain(newDomain);
-        const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
-        const currentCharts = getCurrentCharts(chartConfig, mouseXY);
-        this.clearThreeCanvas();
-        const firstItem = head(fullData);
-        const start = head(xScale.domain());
-        const end = xAccessor(firstItem);
-        const { onLoadMore } = this.props;
-        this.mutableState = {
-            mouseXY,
-            currentItem,
-            currentCharts,
         };
-        this.triggerEvent("zoom", {
-            xScale,
-            plotData,
-            chartConfig,
-            mouseXY,
-            currentCharts,
-            currentItem,
-            show: true,
-        }, e);
-        this.setState({
-            xScale,
-            plotData,
-            chartConfig,
-        }, () => {
-            if (start < end) {
-                onLoadMore(start, end);
-            }
-        });
-    }
-    xAxisZoom(newDomain) {
-        const { xScale, plotData, chartConfig } = this.calculateStateForDomain(newDomain);
-        this.clearThreeCanvas();
-        const { xAccessor } = this.state;
-        const { fullData } = this;
-        const firstItem = head(fullData);
-        const start = head(xScale.domain());
-        const end = xAccessor(firstItem);
-        const { onLoadMore } = this.props;
-        this.setState({
-            xScale,
-            plotData,
-            chartConfig,
-        }, () => {
-            if (start < end) {
-                onLoadMore(start, end);
-            }
-        });
-    }
-    yAxisZoom(chartId, newDomain) {
-        this.clearThreeCanvas();
-        const { chartConfig: initialChartConfig } = this.state;
-        const chartConfig = initialChartConfig.map((each) => {
-            if (each.id === chartId) {
-                const { yScale } = each;
-                return Object.assign(Object.assign({}, each), { yScale: yScale.copy().domain(newDomain), yPanEnabled: true });
-            }
-            else {
-                return each;
-            }
-        });
-        this.setState({
-            chartConfig,
-        });
-    }
-    triggerEvent(type, props, e) {
-        this.subscriptions.forEach((each) => {
-            const state = Object.assign(Object.assign({}, this.state), { fullData: this.fullData, subscriptions: this.subscriptions });
-            each.listener(type, props, state, e);
-        });
-    }
-    draw(props) {
-        this.subscriptions.forEach((each) => {
-            if (isDefined(each.draw)) {
-                each.draw(props);
-            }
-        });
-    }
-    redraw() {
-        this.clearThreeCanvas();
-        this.draw({ force: true });
-    }
-    panHelper(mouseXY, initialXScale, { dx, dy }, chartsToPan) {
-        const { xAccessor, displayXAccessor, chartConfig: initialChartConfig } = this.state;
-        const { filterData } = this.state;
-        const { fullData } = this;
-        const { postCalculator } = this.props;
-        if (isNotDefined(initialXScale.invert)) {
-            throw new Error("xScale provided does not have an invert() method." +
-                "You are likely using an ordinal scale. This scale does not support zoom, pan");
-        }
-        const newDomain = initialXScale
-            .range()
-            .map((x) => x - dx)
-            .map(initialXScale.invert);
-        const { plotData: beforePlotData, domain } = filterData(fullData, newDomain, xAccessor, initialXScale, {
-            currentPlotData: this.hackyWayToStopPanBeyondBounds__plotData,
-            currentDomain: this.hackyWayToStopPanBeyondBounds__domain,
-        });
-        const updatedScale = initialXScale.copy().domain(domain);
-        const plotData = postCalculator(beforePlotData);
-        const currentItem = getCurrentItem(updatedScale, xAccessor, mouseXY, plotData);
-        const chartConfig = getChartConfigWithUpdatedYScales(initialChartConfig, { plotData, xAccessor, displayXAccessor, fullData }, updatedScale.domain(), dy, chartsToPan);
-        const currentCharts = getCurrentCharts(chartConfig, mouseXY);
-        return {
-            xScale: updatedScale,
-            plotData,
-            chartConfig,
-            mouseXY,
-            currentCharts,
-            currentItem,
-        };
-    }
-    handlePan(mousePosition, panStartXScale, dxdy, chartsToPan, e) {
-        if (!this.waitingForPanAnimationFrame) {
-            this.waitingForPanAnimationFrame = true;
-            this.hackyWayToStopPanBeyondBounds__plotData =
-                this.hackyWayToStopPanBeyondBounds__plotData || this.state.plotData;
-            this.hackyWayToStopPanBeyondBounds__domain =
-                this.hackyWayToStopPanBeyondBounds__domain || this.state.xScale.domain();
-            const state = this.panHelper(mousePosition, panStartXScale, dxdy, chartsToPan);
-            this.hackyWayToStopPanBeyondBounds__plotData = state.plotData;
-            this.hackyWayToStopPanBeyondBounds__domain = state.xScale.domain();
-            this.panInProgress = true;
-            this.triggerEvent("pan", state, e);
-            this.mutableState = {
-                mouseXY: state.mouseXY,
-                currentItem: state.currentItem,
-                currentCharts: state.currentCharts,
-            };
-            requestAnimationFrame(() => {
-                this.waitingForPanAnimationFrame = false;
-                this.clearBothCanvas();
-                this.draw({ trigger: "pan" });
-            });
-        }
-    }
-    handlePanEnd(mousePosition, panStartXScale, dxdy, chartsToPan, e) {
-        const state = this.panHelper(mousePosition, panStartXScale, dxdy, chartsToPan);
-        this.hackyWayToStopPanBeyondBounds__plotData = null;
-        this.hackyWayToStopPanBeyondBounds__domain = null;
-        this.panInProgress = false;
-        const { xScale, plotData, chartConfig } = state;
-        this.triggerEvent("panend", state, e);
-        requestAnimationFrame(() => {
+        this.xAxisZoom = (newDomain) => {
+            const { xScale, plotData, chartConfig } = this.calculateStateForDomain(newDomain);
+            this.clearThreeCanvas();
             const { xAccessor } = this.state;
@@ -620,3 +437,2 @@ const { fullData } = this;
             const { onLoadMore } = this.props;
-            this.clearThreeCanvas();
             this.setState({
@@ -631,27 +447,164 @@ xScale,
             });
-        });
-    }
-    handleMouseDown(mousePosition, currentCharts, e) {
-        this.triggerEvent("mousedown", this.mutableState, e);
-    }
-    handleMouseEnter(e) {
-        this.triggerEvent("mouseenter", {
-            show: true,
-        }, e);
-    }
-    handleMouseMove(mouseXY, inputType, e) {
-        if (!this.waitingForMouseMoveAnimationFrame) {
-            this.waitingForMouseMoveAnimationFrame = true;
+        };
+        this.yAxisZoom = (chartId, newDomain) => {
+            this.clearThreeCanvas();
+            const { chartConfig: initialChartConfig } = this.state;
+            const chartConfig = initialChartConfig.map((each) => {
+                if (each.id === chartId) {
+                    const { yScale } = each;
+                    return Object.assign(Object.assign({}, each), { yScale: yScale.copy().domain(newDomain), yPanEnabled: true });
+                }
+                else {
+                    return each;
+                }
+            });
+            this.setState({
+                chartConfig,
+            });
+        };
+        this.draw = (props) => {
+            this.subscriptions.forEach((each) => {
+                if (isDefined(each.draw)) {
+                    each.draw(props);
+                }
+            });
+        };
+        this.redraw = () => {
+            this.clearThreeCanvas();
+            this.draw({ force: true });
+        };
+        this.panHelper = (mouseXY, initialXScale, { dx, dy }, chartsToPan) => {
+            const { xAccessor, displayXAccessor, chartConfig: initialChartConfig } = this.state;
+            const { filterData } = this.state;
+            const { fullData } = this;
+            const { postCalculator } = this.props;
+            if (isNotDefined(initialXScale.invert)) {
+                throw new Error("xScale provided does not have an invert() method." +
+                    "You are likely using an ordinal scale. This scale does not support zoom, pan");
+            }
+            const newDomain = initialXScale
+                .range()
+                .map((x) => x - dx)
+                .map(initialXScale.invert);
+            const { plotData: beforePlotData, domain } = filterData(fullData, newDomain, xAccessor, initialXScale, {
+                currentPlotData: this.hackyWayToStopPanBeyondBounds__plotData,
+                currentDomain: this.hackyWayToStopPanBeyondBounds__domain,
+            });
+            const updatedScale = initialXScale.copy().domain(domain);
+            const plotData = postCalculator(beforePlotData);
+            const currentItem = getCurrentItem(updatedScale, xAccessor, mouseXY, plotData);
+            const chartConfig = getChartConfigWithUpdatedYScales(initialChartConfig, { plotData, xAccessor, displayXAccessor, fullData }, updatedScale.domain(), dy, chartsToPan);
+            const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+            return {
+                xScale: updatedScale,
+                plotData,
+                chartConfig,
+                mouseXY,
+                currentCharts,
+                currentItem,
+            };
+        };
+        this.handlePan = (mousePosition, panStartXScale, dxdy, chartsToPan, e) => {
+            if (!this.waitingForPanAnimationFrame) {
+                this.waitingForPanAnimationFrame = true;
+                this.hackyWayToStopPanBeyondBounds__plotData =
+                    this.hackyWayToStopPanBeyondBounds__plotData || this.state.plotData;
+                this.hackyWayToStopPanBeyondBounds__domain =
+                    this.hackyWayToStopPanBeyondBounds__domain || this.state.xScale.domain();
+                const state = this.panHelper(mousePosition, panStartXScale, dxdy, chartsToPan);
+                this.hackyWayToStopPanBeyondBounds__plotData = state.plotData;
+                this.hackyWayToStopPanBeyondBounds__domain = state.xScale.domain();
+                this.panInProgress = true;
+                this.triggerEvent("pan", state, e);
+                this.mutableState = {
+                    mouseXY: state.mouseXY,
+                    currentItem: state.currentItem,
+                    currentCharts: state.currentCharts,
+                };
+                requestAnimationFrame(() => {
+                    this.waitingForPanAnimationFrame = false;
+                    this.clearBothCanvas();
+                    this.draw({ trigger: "pan" });
+                });
+            }
+        };
+        this.handlePanEnd = (mousePosition, panStartXScale, dxdy, chartsToPan, e) => {
+            const state = this.panHelper(mousePosition, panStartXScale, dxdy, chartsToPan);
+            this.hackyWayToStopPanBeyondBounds__plotData = null;
+            this.hackyWayToStopPanBeyondBounds__domain = null;
+            this.panInProgress = false;
+            const { xScale, plotData, chartConfig } = state;
+            this.triggerEvent("panend", state, e);
+            requestAnimationFrame(() => {
+                const { xAccessor } = this.state;
+                const { fullData } = this;
+                const firstItem = head(fullData);
+                const start = head(xScale.domain());
+                const end = xAccessor(firstItem);
+                const { onLoadMore } = this.props;
+                this.clearThreeCanvas();
+                this.setState({
+                    xScale,
+                    plotData,
+                    chartConfig,
+                }, () => {
+                    if (start < end) {
+                        onLoadMore(start, end);
+                    }
+                });
+            });
+        };
+        this.handleMouseDown = (mousePosition, currentCharts, e) => {
+            this.triggerEvent("mousedown", this.mutableState, e);
+        };
+        this.handleMouseEnter = (e) => {
+            this.triggerEvent("mouseenter", {
+                show: true,
+            }, e);
+        };
+        this.handleMouseMove = (mouseXY, inputType, e) => {
+            if (!this.waitingForMouseMoveAnimationFrame) {
+                this.waitingForMouseMoveAnimationFrame = true;
+                const { chartConfig, plotData, xScale, xAccessor } = this.state;
+                const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+                const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+                this.triggerEvent("mousemove", {
+                    show: true,
+                    mouseXY,
+                    // prevMouseXY is used in interactive components
+                    prevMouseXY: this.prevMouseXY,
+                    currentItem,
+                    currentCharts,
+                }, e);
+                this.prevMouseXY = mouseXY;
+                this.mutableState = {
+                    mouseXY,
+                    currentItem,
+                    currentCharts,
+                };
+                requestAnimationFrame(() => {
+                    this.clearMouseCanvas();
+                    this.draw({ trigger: "mousemove" });
+                    this.waitingForMouseMoveAnimationFrame = false;
+                });
+            }
+        };
+        this.handleMouseLeave = (e) => {
+            this.triggerEvent("mouseleave", { show: false }, e);
+            this.clearMouseCanvas();
+            this.draw({ trigger: "mouseleave" });
+        };
+        this.handleDragStart = ({ startPos }, e) => {
+            this.triggerEvent("dragstart", { startPos }, e);
+        };
+        this.handleDrag = ({ startPos, mouseXY }, e) => {
             const { chartConfig, plotData, xScale, xAccessor } = this.state;
             const currentCharts = getCurrentCharts(chartConfig, mouseXY);
             const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
-            this.triggerEvent("mousemove", {
-                show: true,
+            this.triggerEvent("drag", {
+                startPos,
                 mouseXY,
-                // prevMouseXY is used in interactive components
-                prevMouseXY: this.prevMouseXY,
                 currentItem,
                 currentCharts,
             }, e);
-            this.prevMouseXY = mouseXY;
             this.mutableState = {
@@ -664,52 +617,73 @@ mouseXY,
                 this.clearMouseCanvas();
-                this.draw({ trigger: "mousemove" });
-                this.waitingForMouseMoveAnimationFrame = false;
+                this.draw({ trigger: "drag" });
             });
+        };
+        this.handleDragEnd = ({ mouseXY }, e) => {
+            this.triggerEvent("dragend", { mouseXY }, e);
+            requestAnimationFrame(() => {
+                this.clearMouseCanvas();
+                this.draw({ trigger: "dragend" });
+            });
+        };
+        this.handleClick = (mousePosition, e) => {
+            this.triggerEvent("click", this.mutableState, e);
+            requestAnimationFrame(() => {
+                this.clearMouseCanvas();
+                this.draw({ trigger: "click" });
+            });
+        };
+        this.handleDoubleClick = (mousePosition, e) => {
+            this.triggerEvent("dblclick", {}, e);
+        };
+        this.resetYDomain = (chartId) => {
+            const { chartConfig } = this.state;
+            let changed = false;
+            const newChartConfig = chartConfig.map((each) => {
+                if ((isNotDefined(chartId) || each.id === chartId) &&
+                    !shallowEqual(each.yScale.domain(), each.realYDomain)) {
+                    changed = true;
+                    return Object.assign(Object.assign({}, each), { yScale: each.yScale.domain(each.realYDomain), yPanEnabled: false });
+                }
+                return each;
+            });
+            if (changed) {
+                this.clearThreeCanvas();
+                this.setState({
+                    chartConfig: newChartConfig,
+                });
+            }
+        };
+        const _a = resetChart(props), { fullData } = _a, state = __rest(_a, ["fullData"]);
+        this.state = state;
+        this.fullData = fullData;
+    }
+    clearBothCanvas() {
+        const canvases = this.getCanvasContexts();
+        if (canvases && canvases.axes && canvases.mouseCoord) {
+            clearCanvas([canvases.axes, canvases.mouseCoord], this.props.ratio);
         }
     }
-    handleMouseLeave(e) {
-        this.triggerEvent("mouseleave", { show: false }, e);
-        this.clearMouseCanvas();
-        this.draw({ trigger: "mouseleave" });
+    clearMouseCanvas() {
+        const canvases = this.getCanvasContexts();
+        if (canvases && canvases.mouseCoord) {
+            clearCanvas([canvases.mouseCoord], this.props.ratio);
+        }
     }
-    handleDragStart({ startPos }, e) {
-        this.triggerEvent("dragstart", { startPos }, e);
+    clearThreeCanvas() {
+        const canvases = this.getCanvasContexts();
+        if (canvases && canvases.axes && canvases.mouseCoord && canvases.bg) {
+            clearCanvas([canvases.axes, canvases.mouseCoord, canvases.bg], this.props.ratio);
+        }
     }
-    handleDrag({ startPos, mouseXY }, e) {
-        const { chartConfig, plotData, xScale, xAccessor } = this.state;
-        const currentCharts = getCurrentCharts(chartConfig, mouseXY);
-        const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
-        this.triggerEvent("drag", {
-            startPos,
-            mouseXY,
-            currentItem,
-            currentCharts,
-        }, e);
-        this.mutableState = {
-            mouseXY,
-            currentItem,
-            currentCharts,
-        };
-        requestAnimationFrame(() => {
-            this.clearMouseCanvas();
-            this.draw({ trigger: "drag" });
-        });
+    cancelDrag() {
+        var _a;
+        (_a = this.eventCaptureRef.current) === null || _a === void 0 ? void 0 : _a.cancelDrag();
+        this.triggerEvent("dragcancel");
     }
-    handleDragEnd({ mouseXY }, e) {
-        this.triggerEvent("dragend", { mouseXY }, e);
-        requestAnimationFrame(() => {
-            this.clearMouseCanvas();
-            this.draw({ trigger: "dragend" });
+    triggerEvent(type, props, e) {
+        this.subscriptions.forEach((each) => {
+            const state = Object.assign(Object.assign({}, this.state), { fullData: this.fullData, subscriptions: this.subscriptions });
+            each.listener(type, props, state, e);
         });
     }
-    handleClick(mousePosition, e) {
-        this.triggerEvent("click", this.mutableState, e);
-        requestAnimationFrame(() => {
-            this.clearMouseCanvas();
-            this.draw({ trigger: "click" });
-        });
-    }
-    handleDoubleClick(mousePosition, e) {
-        this.triggerEvent("dblclick", {}, e);
-    }
     getChildContext() {
@@ -765,20 +739,2 @@ const dimensions = getDimensions(this.props);
     }
-    resetYDomain(chartId) {
-        const { chartConfig } = this.state;
-        let changed = false;
-        const newChartConfig = chartConfig.map((each) => {
-            if ((isNotDefined(chartId) || each.id === chartId) &&
-                !shallowEqual(each.yScale.domain(), each.realYDomain)) {
-                changed = true;
-                return Object.assign(Object.assign({}, each), { yScale: each.yScale.domain(each.realYDomain), yPanEnabled: false });
-            }
-            return each;
-        });
-        if (changed) {
-            this.clearThreeCanvas();
-            this.setState({
-                chartConfig: newChartConfig,
-            });
-        }
-    }
     shouldComponentUpdate() {
@@ -785,0 +741,0 @@ return !this.panInProgress;

lib/GenericChartComponent.js

 import * as PropTypes from "prop-types";
 import { GenericComponent } from "./GenericComponent";
-import { find, isDefined } from "./utils";
+import { isDefined } from "./utils";
 const ALWAYS_TRUE_TYPES = ["drag", "dragend"];
@@ -45,3 +45,3 @@ export class GenericChartComponent extends GenericComponent {
             const { chartId } = this.context;
-            const chartConfig = find(chartConfigList, (each) => each.id === chartId);
+            const chartConfig = chartConfigList.find((each) => each.id === chartId);
             this.moreProps.chartConfig = chartConfig;
@@ -48,0 +48,0 @@ }

lib/GenericComponent.d.ts

@@ -82,3 +82,3 @@ import * as PropTypes from "prop-types";
     preEvaluate(): void;
-    listener(type: any, moreProps: any, state: any, e: any): void;
+    listener: (type: any, moreProps: any, state: any, e: any) => void;
     evaluateType(type: any, e: any): void;
@@ -85,0 +85,0 @@ isHover(e: any): any;

lib/GenericComponent.js

@@ -19,5 +19,12 @@ import * as PropTypes from "prop-types";
         super(props, context);
+        this.listener = (type, moreProps, state, e) => {
+            if (isDefined(moreProps)) {
+                this.updateMoreProps(moreProps);
+            }
+            this.evaluationInProgress = true;
+            this.evaluateType(type, e);
+            this.evaluationInProgress = false;
+        };
         this.drawOnCanvas = this.drawOnCanvas.bind(this);
         this.getMoreProps = this.getMoreProps.bind(this);
-        this.listener = this.listener.bind(this);
         this.draw = this.draw.bind(this);
@@ -50,10 +57,2 @@ this.updateMoreProps = this.updateMoreProps.bind(this);
     }
-    listener(type, moreProps, state, e) {
-        if (isDefined(moreProps)) {
-            this.updateMoreProps(moreProps);
-        }
-        this.evaluationInProgress = true;
-        this.evaluateType(type, e);
-        this.evaluationInProgress = false;
-    }
     evaluateType(type, e) {
@@ -218,3 +217,12 @@ const newType = aliases[type] || type;
         if (proceed || this.props.selected /* this is to draw as soon as you select */ || force) {
-            this.drawOnCanvas();
+            const { canvasDraw } = this.props;
+            if (canvasDraw === undefined) {
+                const { updateCount } = this.state;
+                this.setState({
+                    updateCount: updateCount + 1,
+                });
+            }
+            else {
+                this.drawOnCanvas();
+            }
         }
@@ -314,7 +322,7 @@ }
     render() {
-        const { chartId } = this.context;
         const { canvasDraw, clip, svgDraw } = this.props;
-        if (isDefined(canvasDraw)) {
+        if (canvasDraw !== undefined) {
             return null;
         }
+        const { chartId } = this.context;
         const suffix = isDefined(chartId) ? "-" + chartId : "";
@@ -321,0 +329,0 @@ const style = clip ? { clipPath: `url(#chart-area-clip${suffix})` } : undefined;

lib/index.d.ts

 export { ChartCanvas } from "./ChartCanvas";
-export { Chart } from "./Chart";
+export * from "./Chart";
 export * from "./GenericChartComponent";
@@ -4,0 +4,0 @@ export * from "./GenericComponent";

lib/index.js

 export { ChartCanvas } from "./ChartCanvas";
-export { Chart } from "./Chart";
+export * from "./Chart";
 export * from "./GenericChartComponent";
@@ -4,0 +4,0 @@ export * from "./GenericComponent";

lib/utils/ChartDataUtil.d.ts

@@ -10,3 +10,3 @@ export declare function getChartOrigin(origin: any, contextWidth: any, contextHeight: any): any;
 };
-export declare function getNewChartConfig(innerDimension: any, children: any, existingChartConfig?: never[]): any;
+export declare function getNewChartConfig(innerDimension: any, children: any, existingChartConfig?: any[]): any;
 export declare function getCurrentCharts(chartConfig: any, mouseXY: any): any;
@@ -18,4 +18,4 @@ export declare function getChartConfigWithUpdatedYScales(chartConfig: any, { plotData, xAccessor, displayXAccessor, fullData }: {
     fullData: any;
-}, xDomain: any, dy: any, chartsToPan: any): any;
+}, xDomain: any, dy?: number, chartsToPan?: any): any;
 export declare function getCurrentItem(xScale: any, xAccessor: any, mouseXY: any, plotData: any): any;
 export declare function getXValue(xScale: any, xAccessor: any, mouseXY: any, plotData: any): any;

lib/utils/ChartDataUtil.js

@@ -5,3 +5,3 @@ import { extent } from "d3-array";
 import { Chart } from "../Chart";
-import { find, functor, getClosestItem, isDefined, isNotDefined, isObject, last, mapObject, shallowEqual, zipper, } from "./index";
+import { functor, getClosestItem, isDefined, isNotDefined, isObject, last, mapObject, shallowEqual, zipper, } from "./index";
 export function getChartOrigin(origin, contextWidth, contextHeight) {
@@ -47,3 +47,3 @@ const originCoordinates = typeof origin === "function" ? origin(contextWidth, contextHeight) : origin;
                 : undefined;
-            const prevChartConfig = find(existingChartConfig, (d) => d.id === id);
+            const prevChartConfig = existingChartConfig.find((d) => d.id === id);
             if (isArraySize2AndNumber(yExtentsProp)) {
@@ -56,4 +56,2 @@ if (isDefined(prevChartConfig) &&
                     shallowEqual(prevChartConfig.originalYExtentsProp, yExtentsProp)) {
-                    // console.log(prevChartConfig.originalYExtentsProp, yExtentsProp)
-                    // console.log(prevChartConfig.yScale.domain())
                     yScale.domain(prevChartConfig.yScale.domain());
@@ -134,3 +132,3 @@ }
             : yDomainFromYExtents(yExtents, yScale, plotData);
-        const yDomainDY = isDefined(dy)
+        const yDomainDY = dy !== undefined
             ? yScale
@@ -137,0 +135,0 @@ .range()

lib/utils/index.d.ts

@@ -8,3 +8,3 @@ /// <reference types="react" />
 export { default as noop } from "./noop";
-export { default as shallowEqual } from "./shallowEqual";
+export * from "./shallowEqual";
 export { default as mappedSlidingWindow } from "./mappedSlidingWindow";
@@ -27,3 +27,2 @@ export { default as accumulatingWindow } from "./accumulatingWindow";
 export declare function getClosestValue(inputValue: any, currentValue: any): any;
-export declare function find(list: any, predicate: any, context?: any): any;
 export declare function d3Window(node: any): any;
@@ -60,4 +59,4 @@ export declare const MOUSEENTER = "mouseenter.interaction";
 export declare const isArray: (arg: any) => arg is any[];
-export declare function touchPosition(touch: any, e: any): number[];
-export declare function mousePosition(e: React.MouseEvent, defaultRect?: any): number[];
+export declare function touchPosition(touch: any, e: React.TouchEvent): [number, number];
+export declare function mousePosition(e: React.MouseEvent, defaultRect?: any): [number, number];
 export declare function clearCanvas(canvasList: CanvasRenderingContext2D[], ratio: number): void;
@@ -64,0 +63,0 @@ export declare function capitalizeFirst(str: string): string;

lib/utils/index.js

@@ -10,3 +10,3 @@ import { bisector } from "d3-array";
 export { default as noop } from "./noop";
-export { default as shallowEqual } from "./shallowEqual";
+export * from "./shallowEqual";
 export { default as mappedSlidingWindow } from "./mappedSlidingWindow";
@@ -75,11 +75,2 @@ export { default as accumulatingWindow } from "./accumulatingWindow";
 }
-// @ts-ignore
-export function find(list, predicate, context = this) {
-    for (let i = 0; i < list.length; ++i) {
-        if (predicate.call(context, list[i], i, list)) {
-            return list[i];
-        }
-    }
-    return undefined;
-}
 export function d3Window(node) {
@@ -107,2 +98,3 @@ const d3win = node && ((node.ownerDocument && node.ownerDocument.defaultView) || (node.document && node) || node.defaultView);
 export function getClosestItemIndexes(array, value, accessor) {
+    var _a, _b;
     let lo = 0;
@@ -121,6 +113,6 @@ let hi = array.length - 1;
     // the same code works for both dates and numbers
-    if (accessor(array[lo]).valueOf() === value.valueOf()) {
+    if (((_a = accessor(array[lo])) === null || _a === void 0 ? void 0 : _a.valueOf()) === (value === null || value === void 0 ? void 0 : value.valueOf())) {
         hi = lo;
     }
-    if (accessor(array[hi]).valueOf() === value.valueOf()) {
+    if (((_b = accessor(array[hi])) === null || _b === void 0 ? void 0 : _b.valueOf()) === (value === null || value === void 0 ? void 0 : value.valueOf())) {
         lo = hi;
@@ -190,8 +182,7 @@ }
 export function touchPosition(touch, e) {
-    const container = e.target;
+    const container = e.currentTarget;
     const rect = container.getBoundingClientRect();
     const x = touch.clientX - rect.left - container.clientLeft;
     const y = touch.clientY - rect.top - container.clientTop;
-    const xy = [Math.round(x), Math.round(y)];
-    return xy;
+    return [Math.round(x), Math.round(y)];
 }
@@ -203,4 +194,3 @@ export function mousePosition(e, defaultRect) {
     const y = e.clientY - rect.top - container.clientTop;
-    const xy = [Math.round(x), Math.round(y)];
-    return xy;
+    return [Math.round(x), Math.round(y)];
 }
@@ -207,0 +197,0 @@ export function clearCanvas(canvasList, ratio) {

lib/utils/PureComponent.js

 import * as React from "react";
-import shallowEqual from "./shallowEqual";
+import { shallowEqual } from "./shallowEqual";
 export class PureComponent extends React.Component {
@@ -4,0 +4,0 @@ shouldComponentUpdate(nextProps, nextState, nextContext) {

lib/utils/shallowEqual.d.ts

@@ -1,1 +0,1 @@
-export default function shallowEqual(a: any, b: any): boolean;
+export declare const shallowEqual: (a: any, b: any) => boolean;

lib/utils/shallowEqual.js

@@ -1,54 +0,22 @@
-// https://github.com/jonschlinkert/is-equal-shallow/
-/*
-The MIT License (MIT)
-
-Copyright (c) 2015, Jon Schlinkert.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-*/
-function isDate(date) {
-    return Object.prototype.toString.call(date) === "[object Date]";
-}
-function isEqual(val1, val2) {
-    return isDate(val1) && isDate(val2) ? val1.getTime() === val2.getTime() : val1 === val2;
-}
-export default function shallowEqual(a, b) {
-    if (!a && !b) {
+export const shallowEqual = (a, b) => {
+    if (a === b) {
         return true;
     }
-    if ((!a && b) || (a && !b)) {
+    if (!(a instanceof Object) || !(b instanceof Object)) {
         return false;
     }
-    let numKeysA = 0;
-    let numKeysB = 0;
-    let key;
-    // tslint:disable: forin
-    for (key in b) {
-        numKeysB++;
-        // eslint-disable-next-line no-prototype-builtins
-        if ((b.hasOwnProperty(key) && !a.hasOwnProperty(key)) || !isEqual(a[key], b[key])) {
+    const keys = Object.keys(a);
+    const length = keys.length;
+    for (let i = 0; i < length; i++) {
+        if (!(keys[i] in b)) {
             return false;
         }
     }
-    for (key in a) {
-        numKeysA++;
+    for (let i = 0; i < length; i++) {
+        if (a[keys[i]] !== b[keys[i]]) {
+            return false;
+        }
     }
-    return numKeysA === numKeysB;
-}
+    return length === Object.keys(b).length;
+};
 //# sourceMappingURL=shallowEqual.js.map

package.json

 {
   "name": "@react-financial-charts/core",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.1",
   "description": "Core code for react-financial-charts",
@@ -51,3 +51,3 @@ "publishConfig": {
   },
-  "gitHead": "eae3db6fe5be832713f0ef96f01bba6b8ab9b7c6"
+  "gitHead": "b9b1295b8eca8b4f2ceb4c7be53554b4badd4a6b"
 }

src/index.ts

 export { ChartCanvas } from "./ChartCanvas";
-export { Chart } from "./Chart";
+export * from "./Chart";
 export * from "./GenericChartComponent";
@@ -4,0 +4,0 @@ export * from "./GenericComponent";

src/utils/ChartDataUtil.ts

@@ -8,3 +8,2 @@ import { extent } from "d3-array";
 import {
-    find,
     functor,
@@ -54,3 +53,3 @@ getClosestItem,
 
-export function getNewChartConfig(innerDimension, children, existingChartConfig = []) {
+export function getNewChartConfig(innerDimension, children, existingChartConfig: any[] = []) {
     return React.Children.map(children, (each) => {
@@ -81,3 +80,3 @@ if (each && each.type.toString() === Chart.toString()) {
 
-            const prevChartConfig = find(existingChartConfig, (d) => d.id === id);
+            const prevChartConfig = existingChartConfig.find((d) => d.id === id);
 
@@ -93,4 +92,2 @@ if (isArraySize2AndNumber(yExtentsProp)) {
                 ) {
-                    // console.log(prevChartConfig.originalYExtentsProp, yExtentsProp)
-                    // console.log(prevChartConfig.yScale.domain())
                     yScale.domain(prevChartConfig.yScale.domain());
@@ -175,4 +172,4 @@ } else {
     xDomain,
-    dy,
-    chartsToPan,
+    dy?: number,
+    chartsToPan?: any,
 ) {
@@ -184,8 +181,9 @@ const yDomains = chartConfig.map(({ yExtentsCalculator, yExtents, yScale }) => {
 
-        const yDomainDY = isDefined(dy)
-            ? yScale
-                  .range()
-                  .map((each) => each - dy)
-                  .map(yScale.invert)
-            : yScale.domain();
+        const yDomainDY =
+            dy !== undefined
+                ? yScale
+                      .range()
+                      .map((each) => each - dy)
+                      .map(yScale.invert)
+                : yScale.domain();
         return {
@@ -192,0 +190,0 @@ realYDomain,

src/utils/index.ts

@@ -11,3 +11,3 @@ import { bisector } from "d3-array";
 export { default as noop } from "./noop";
-export { default as shallowEqual } from "./shallowEqual";
+export * from "./shallowEqual";
 export { default as mappedSlidingWindow } from "./mappedSlidingWindow";
@@ -95,12 +95,2 @@ export { default as accumulatingWindow } from "./accumulatingWindow";
 
-// @ts-ignore
-export function find(list, predicate, context = this) {
-    for (let i = 0; i < list.length; ++i) {
-        if (predicate.call(context, list[i], i, list)) {
-            return list[i];
-        }
-    }
-    return undefined;
-}
-
 export function d3Window(node) {
@@ -144,6 +134,6 @@ const d3win =
     // the same code works for both dates and numbers
-    if (accessor(array[lo]).valueOf() === value.valueOf()) {
+    if (accessor(array[lo])?.valueOf() === value?.valueOf()) {
         hi = lo;
     }
-    if (accessor(array[hi]).valueOf() === value.valueOf()) {
+    if (accessor(array[hi])?.valueOf() === value?.valueOf()) {
         lo = hi;
@@ -228,12 +218,11 @@ }
 
-export function touchPosition(touch, e) {
-    const container = e.target;
+export function touchPosition(touch, e: React.TouchEvent): [number, number] {
+    const container = e.currentTarget;
     const rect = container.getBoundingClientRect();
     const x = touch.clientX - rect.left - container.clientLeft;
     const y = touch.clientY - rect.top - container.clientTop;
-    const xy = [Math.round(x), Math.round(y)];
-    return xy;
+    return [Math.round(x), Math.round(y)];
 }
 
-export function mousePosition(e: React.MouseEvent, defaultRect?) {
+export function mousePosition(e: React.MouseEvent, defaultRect?): [number, number] {
     const container = e.currentTarget;
@@ -243,4 +232,3 @@ const rect = defaultRect || container.getBoundingClientRect();
     const y = e.clientY - rect.top - container.clientTop;
-    const xy = [Math.round(x), Math.round(y)];
-    return xy;
+    return [Math.round(x), Math.round(y)];
 }
@@ -247,0 +235,0 @@

src/utils/shallowEqual.ts

@@ -1,52 +0,14 @@
-// https://github.com/jonschlinkert/is-equal-shallow/
-
-/*
-The MIT License (MIT)
-
-Copyright (c) 2015, Jon Schlinkert.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-*/
-
-function isDate(date) {
-    return Object.prototype.toString.call(date) === "[object Date]";
-}
-
-function isEqual(val1, val2) {
-    return isDate(val1) && isDate(val2) ? val1.getTime() === val2.getTime() : val1 === val2;
-}
-
-export default function shallowEqual(a, b) {
-    if (!a && !b) {
+export const shallowEqual = (a, b) => {
+    if (a === b) {
         return true;
     }
-    if ((!a && b) || (a && !b)) {
+    if (!(a instanceof Object) || !(b instanceof Object)) {
         return false;
     }
 
-    let numKeysA = 0;
-    let numKeysB = 0;
-    let key;
+    const keys = Object.keys(a);
+    const length = keys.length;
 
-    // tslint:disable: forin
-    for (key in b) {
-        numKeysB++;
-        // eslint-disable-next-line no-prototype-builtins
-        if ((b.hasOwnProperty(key) && !a.hasOwnProperty(key)) || !isEqual(a[key], b[key])) {
+    for (let i = 0; i < length; i++) {
+        if (!(keys[i] in b)) {
             return false;
@@ -56,7 +18,9 @@ }
 
-    for (key in a) {
-        numKeysA++;
+    for (let i = 0; i < length; i++) {
+        if (a[keys[i]] !== b[keys[i]]) {
+            return false;
+        }
     }
 
-    return numKeysA === numKeysB;
-}
+    return length === Object.keys(b).length;
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

404579

decreased by-1.46%

Lines of code

7591

decreased by-1.86%

No dependency changes