@tradingaction/core 2.0.0

package/src/ChartCanvas.tsx

@@ -0,0 +1,1336 @@
+import { extent as d3Extent, max, min } from "d3-array";
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
+import * as React from "react";
+import { clearCanvas, functor, head, identity, isDefined, isNotDefined, last, shallowEqual } from "./utils";
+import { IZoomAnchorOptions, mouseBasedZoomAnchor } from "./zoom";
+import {
+    ChartConfig,
+    getChartConfigWithUpdatedYScales,
+    getCurrentCharts,
+    getCurrentItem,
+    getNewChartConfig,
+} from "./utils/ChartDataUtil";
+import { EventCapture } from "./EventCapture";
+import { CanvasContainer, ICanvasContexts } from "./CanvasContainer";
+import evaluator from "./utils/evaluator";
+import type { MoreProps } from "./MoreProps";
+
+const CANDIDATES_FOR_RESET = ["seriesName"];
+
+const shouldResetChart = (thisProps: any, nextProps: any) => {
+    return !CANDIDATES_FOR_RESET.every((key) => {
+        const result = shallowEqual(thisProps[key], nextProps[key]);
+        return result;
+    });
+};
+
+const getCursorStyle = () => {
+    const tooltipStyle = `
+	.react-financial-charts-grabbing-cursor {
+		pointer-events: all;
+		cursor: -moz-grabbing;
+		cursor: -webkit-grabbing;
+		cursor: grabbing;
+	}
+	.react-financial-charts-crosshair-cursor {
+		pointer-events: all;
+		cursor: crosshair;
+	}
+	.react-financial-charts-tooltip-hover {
+		pointer-events: all;
+		cursor: pointer;
+	}
+	.react-financial-charts-avoid-interaction {
+		pointer-events: none;
+	}
+	.react-financial-charts-enable-interaction {
+		pointer-events: all;
+	}
+	.react-financial-charts-tooltip {
+		pointer-events: all;
+		cursor: pointer;
+	}
+	.react-financial-charts-default-cursor {
+		cursor: default;
+	}
+	.react-financial-charts-move-cursor {
+		cursor: move;
+	}
+	.react-financial-charts-pointer-cursor {
+		cursor: pointer;
+	}
+	.react-financial-charts-ns-resize-cursor {
+		cursor: ns-resize;
+	}
+	.react-financial-charts-ew-resize-cursor {
+		cursor: ew-resize;
+	}`;
+    return <style type="text/css">{tooltipStyle}</style>;
+};
+
+export interface ChartCanvasContextType<TXAxis extends number | Date> {
+    width: number;
+    height: number;
+    margin: { top: number; right: number; bottom: number; left: number };
+    chartId: number | string;
+    getCanvasContexts?: () => ICanvasContexts | undefined;
+    xScale: Function;
+    ratio: number;
+    // Not sure if it should be optional
+    xAccessor: (data: any) => TXAxis;
+    displayXAccessor: (data: any) => TXAxis;
+    xAxisZoom?: (newDomain: any) => void;
+    yAxisZoom?: (chartId: string, newDomain: any) => void;
+    redraw: () => void;
+    plotData: any[];
+    fullData: any[];
+    chartConfigs: ChartConfig[];
+    morePropsDecorator?: () => void;
+    generateSubscriptionId?: () => number;
+    getMutableState: () => {};
+    amIOnTop: (id: string | number) => boolean;
+    subscribe: (id: string | number, rest: any) => void;
+    unsubscribe: (id: string | number) => void;
+    setCursorClass: (className: string | null | undefined) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+export const chartCanvasContextDefaultValue: ChartCanvasContextType<number | Date> = {
+    amIOnTop: () => false,
+    chartConfigs: [],
+    chartId: 0,
+    ratio: 0,
+    displayXAccessor: () => 0,
+    fullData: [],
+    getMutableState: () => ({}),
+    height: 0,
+    margin: { top: 0, right: 0, bottom: 0, left: 0 },
+    plotData: [],
+    setCursorClass: noop,
+    subscribe: noop,
+    unsubscribe: noop,
+    redraw: noop,
+    width: 0,
+    xAccessor: () => 0,
+    xScale: noop,
+};
+export const ChartCanvasContext =
+    React.createContext<ChartCanvasContextType<number | Date>>(chartCanvasContextDefaultValue);
+
+const getDimensions = <TXAxis extends number | Date>(props: ChartCanvasProps<TXAxis>) => {
+    const { margin, height, width } = props;
+    return {
+        height: height - margin.top - margin.bottom,
+        width: width - margin.left - margin.right,
+    };
+};
+
+const getXScaleDirection = (flipXScale?: boolean) => {
+    return flipXScale ? -1 : 1;
+};
+
+const calculateFullData = <TXAxis extends number | Date>(props: ChartCanvasProps<TXAxis>) => {
+    const {
+        data: fullData,
+        plotFull,
+        xScale,
+        clamp,
+        pointsPerPxThreshold,
+        flipXScale,
+        xAccessor,
+        displayXAccessor,
+        minPointsPerPxThreshold,
+    } = props;
+
+    const useWholeData = plotFull !== undefined ? plotFull : xAccessor === identity;
+
+    const { filterData } = evaluator({
+        xScale,
+        useWholeData,
+        clamp,
+        pointsPerPxThreshold,
+        minPointsPerPxThreshold,
+        flipXScale,
+    });
+
+    return {
+        xAccessor,
+        displayXAccessor: displayXAccessor ?? xAccessor,
+        xScale: xScale.copy(),
+        fullData,
+        filterData,
+    };
+};
+
+const resetChart = <TXAxis extends number | Date>(props: ChartCanvasProps<TXAxis>) => {
+    const state = calculateState(props);
+
+    const { xAccessor, displayXAccessor, fullData, plotData: initialPlotData, xScale } = state;
+
+    const { postCalculator, children } = props;
+
+    const plotData = postCalculator !== undefined ? postCalculator(initialPlotData) : initialPlotData;
+
+    const dimensions = getDimensions(props);
+
+    const chartConfigs = getChartConfigWithUpdatedYScales(
+        getNewChartConfig(dimensions, children),
+        { plotData, xAccessor, displayXAccessor, fullData },
+        xScale.domain(),
+    );
+
+    return {
+        ...state,
+        xScale,
+        plotData,
+        chartConfigs,
+    };
+};
+
+const updateChart = (
+    newState: any,
+    initialXScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+    props: any,
+    lastItemWasVisible: boolean,
+    initialChartConfig: any,
+) => {
+    const { fullData, xScale, xAccessor, displayXAccessor, filterData } = newState;
+
+    const lastItem = last(fullData);
+    const lastXItem = xAccessor(lastItem);
+    const [start, end] = initialXScale.domain();
+
+    const { postCalculator, children, padding, flipXScale, maintainPointsPerPixelOnResize } = props;
+
+    const direction = getXScaleDirection(flipXScale);
+    const dimensions = getDimensions(props);
+    const updatedXScale = setXRange(xScale, dimensions, padding, direction);
+
+    let initialPlotData;
+    if (!lastItemWasVisible || end >= lastXItem) {
+        // resize comes here...
+        // get plotData between [start, end] and do not change the domain
+        const [rangeStart, rangeEnd] = initialXScale.range();
+        const [newRangeStart, newRangeEnd] = updatedXScale.range();
+        const newDomainExtent =
+            ((newRangeEnd - newRangeStart) / (rangeEnd - rangeStart)) * (end.valueOf() - start.valueOf());
+        const newStart = maintainPointsPerPixelOnResize ? end.valueOf() - newDomainExtent : start;
+
+        const lastItemX = initialXScale(lastXItem);
+
+        const response = filterData(fullData, [newStart, end], xAccessor, updatedXScale, {
+            fallbackStart: start,
+            fallbackEnd: { lastItem, lastItemX },
+        });
+        initialPlotData = response.plotData;
+        updatedXScale.domain(response.domain);
+    } else if (lastItemWasVisible && end < lastXItem) {
+        // this is when a new item is added and last item was visible
+        // so slide over and show the new item also
+
+        // get plotData between [xAccessor(l) - (end - start), xAccessor(l)] and DO change the domain
+        const dx = initialXScale(lastXItem) - initialXScale.range()[1];
+        const [newStart, newEnd] = initialXScale
+            .range()
+            .map((x) => x + dx)
+            .map((x) => initialXScale.invert(x));
+
+        const response = filterData(fullData, [newStart, newEnd], xAccessor, updatedXScale);
+        initialPlotData = response.plotData;
+        updatedXScale.domain(response.domain); // if last item was visible, then shift
+    }
+
+    const plotData = postCalculator(initialPlotData);
+
+    const chartConfigs = getChartConfigWithUpdatedYScales(
+        getNewChartConfig(dimensions, children, initialChartConfig),
+        { plotData, xAccessor, displayXAccessor, fullData },
+        updatedXScale.domain(),
+    );
+
+    return {
+        xScale: updatedXScale,
+        xAccessor,
+        chartConfigs,
+        plotData,
+        fullData,
+        filterData,
+    };
+};
+
+const calculateState = <TXAxis extends number | Date>(props: ChartCanvasProps<TXAxis>) => {
+    const { xAccessor: inputXAccessor, xExtents: xExtentsProp, data, padding, flipXScale } = props;
+
+    const direction = getXScaleDirection(flipXScale);
+
+    const dimensions = getDimensions(props);
+
+    const extent =
+        typeof xExtentsProp === "function"
+            ? xExtentsProp(data)
+            : (d3Extent<number | Date>(
+                  xExtentsProp.map((d: any) => functor(d)).map((each: any) => each(data, inputXAccessor)),
+              ) as [TXAxis, TXAxis]);
+
+    const { xAccessor, displayXAccessor, xScale, fullData, filterData } = calculateFullData(props);
+
+    const updatedXScale = setXRange(xScale, dimensions, padding, direction);
+
+    const { plotData, domain } = filterData(fullData, extent, inputXAccessor, updatedXScale);
+
+    return {
+        plotData,
+        xScale: updatedXScale.domain(domain),
+        xAccessor,
+        displayXAccessor,
+        fullData,
+        filterData,
+    };
+};
+
+const setXRange = (xScale: any, dimensions: any, padding: any, direction = 1) => {
+    if (xScale.rangeRoundPoints) {
+        if (isNaN(padding)) {
+            throw new Error("padding has to be a number for ordinal scale");
+        }
+        xScale.rangeRoundPoints([0, dimensions.width], padding);
+    } else if (xScale.padding) {
+        if (isNaN(padding)) {
+            throw new Error("padding has to be a number for ordinal scale");
+        }
+        xScale.range([0, dimensions.width]);
+        xScale.padding(padding / 2);
+    } else {
+        const { left, right } = isNaN(padding) ? padding : { left: padding, right: padding };
+        if (direction > 0) {
+            xScale.range([left, dimensions.width - right]);
+        } else {
+            xScale.range([dimensions.width - right, left]);
+        }
+    }
+    return xScale;
+};
+
+const pinchCoordinates = (pinch: any) => {
+    const { touch1Pos, touch2Pos } = pinch;
+
+    return {
+        topLeft: [Math.min(touch1Pos[0], touch2Pos[0]), Math.min(touch1Pos[1], touch2Pos[1])],
+        bottomRight: [Math.max(touch1Pos[0], touch2Pos[0]), Math.max(touch1Pos[1], touch2Pos[1])],
+    };
+};
+
+const isInteractionEnabled = (
+    xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+    xAccessor: any,
+    data: any,
+) => {
+    const interaction = !isNaN(xScale(xAccessor(head(data)))) && isDefined(xScale.invert);
+    return interaction;
+};
+
+export interface ChartCanvasProps<TXAxis extends number | Date> {
+    readonly clamp?:
+        | boolean
+        | ("left" | "right" | "both")
+        | ((domain: [number, number], items: [number, number]) => [number, number]);
+    readonly className?: string;
+    readonly children?: React.ReactNode;
+    readonly data: any[];
+    readonly defaultFocus?: boolean;
+    readonly disableInteraction?: boolean;
+    readonly disablePan?: boolean;
+    readonly disableZoom?: boolean;
+    readonly displayXAccessor?: (data: any) => TXAxis;
+    readonly flipXScale?: boolean;
+    readonly height: number;
+    readonly margin: {
+        bottom: number;
+        left: number;
+        right: number;
+        top: number;
+    };
+    readonly maintainPointsPerPixelOnResize?: boolean;
+    readonly minPointsPerPxThreshold?: number;
+    readonly mouseMoveEvent?: boolean;
+    /**
+     * Called when panning left past the first data point.
+     */
+    readonly onLoadAfter?: (start: TXAxis, end: TXAxis) => void;
+    /**
+     * Called when panning right past the last data point.
+     */
+    readonly onLoadBefore?: (start: TXAxis, end: TXAxis) => void;
+    /**
+     * Click event handler.
+     */
+    readonly onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Double click event handler.
+     */
+    readonly onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+    readonly padding?:
+        | number
+        | {
+              bottom: number;
+              left: number;
+              right: number;
+              top: number;
+          };
+    readonly plotFull?: boolean;
+    readonly pointsPerPxThreshold?: number;
+    readonly postCalculator?: (plotData: any[]) => any[];
+    readonly ratio: number;
+    readonly seriesName: string;
+    readonly useCrossHairStyleCursor?: boolean;
+    readonly width: number;
+    readonly xAccessor: (data: any) => TXAxis;
+    readonly xExtents: ((data: any[]) => [TXAxis, TXAxis]) | (((data: any[]) => TXAxis) | TXAxis)[];
+    readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+    readonly zIndex?: number;
+    readonly zoomAnchor?: (options: IZoomAnchorOptions<any, TXAxis>) => TXAxis;
+    readonly zoomMultiplier?: number;
+}
+
+interface ChartCanvasState<TXAxis extends number | Date> {
+    lastProps?: ChartCanvasProps<TXAxis>;
+    propIteration?: number;
+    xAccessor: (data: any) => TXAxis;
+    displayXAccessor?: any;
+    filterData?: any;
+    chartConfigs: ChartConfig[];
+    plotData: any[];
+    xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+    fullData: any[];
+}
+
+interface Subscription {
+    id: string;
+    getPanConditions: () => {
+        draggable: boolean;
+        panEnabled: boolean;
+    };
+    draw: (props: { trigger: string } | { force: boolean }) => void;
+    listener: (type: string, newMoreProps: MoreProps | undefined, state: any, e: any) => void;
+}
+
+interface MutableState {
+    mouseXY: [number, number];
+    currentItem: any;
+    currentCharts: string[];
+}
+
+export class ChartCanvas<TXAxis extends number | Date> extends React.Component<
+    ChartCanvasProps<TXAxis>,
+    ChartCanvasState<TXAxis>
+> {
+    public static defaultProps = {
+        clamp: false,
+        className: "react-financial-charts",
+        defaultFocus: true,
+        disablePan: false,
+        disableInteraction: false,
+        disableZoom: false,
+        flipXScale: false,
+        maintainPointsPerPixelOnResize: true,
+        margin: { top: 0, right: 40, bottom: 40, left: 0 },
+        minPointsPerPxThreshold: 1 / 100,
+        mouseMoveEvent: true,
+        postCalculator: identity,
+        padding: 0,
+        pointsPerPxThreshold: 2,
+        useCrossHairStyleCursor: true,
+        xAccessor: identity as (data: any) => any,
+        xExtents: [min, max] as any[],
+        zIndex: 1,
+        zoomAnchor: mouseBasedZoomAnchor,
+        zoomMultiplier: 1.1,
+    };
+
+    private readonly canvasContainerRef = React.createRef<CanvasContainer>();
+    private readonly eventCaptureRef = React.createRef<EventCapture>();
+    private finalPinch?: boolean;
+    private lastSubscriptionId = 0;
+    private mutableState: MutableState = { mouseXY: [0, 0], currentCharts: [], currentItem: null };
+    private panInProgress = false;
+    private prevMouseXY?: number[];
+    private subscriptions: Subscription[] = [];
+    private waitingForPinchZoomAnimationFrame?: boolean;
+    private waitingForPanAnimationFrame?: boolean;
+    private waitingForMouseMoveAnimationFrame?: boolean;
+
+    // tslint:disable-next-line: variable-name
+    private hackyWayToStopPanBeyondBounds__plotData?: any[] | null;
+    // tslint:disable-next-line: variable-name
+    private hackyWayToStopPanBeyondBounds__domain?: any[] | null;
+
+    public constructor(props: ChartCanvasProps<TXAxis>) {
+        super(props);
+        this.state = resetChart(props);
+    }
+
+    public static getDerivedStateFromProps<TXAxis extends number | Date>(
+        props: ChartCanvasProps<TXAxis>,
+        state: ChartCanvasState<TXAxis>,
+    ): ChartCanvasState<TXAxis> {
+        const { chartConfigs: initialChartConfig, plotData, xAccessor, xScale } = state;
+        const interaction = isInteractionEnabled(xScale, xAccessor, plotData);
+        const shouldReset = shouldResetChart(state.lastProps || {}, props);
+        let newState: ChartCanvasState<TXAxis>;
+        if (!interaction || shouldReset || !shallowEqual(state.lastProps?.xExtents, props.xExtents)) {
+            // do reset
+            newState = resetChart(props);
+        } else {
+            const [start, end] = xScale.domain();
+            const prevLastItem = last(state.fullData);
+
+            const calculatedState = calculateFullData(props);
+            const { xAccessor } = calculatedState;
+            const previousX = xAccessor(prevLastItem);
+            const lastItemWasVisible = previousX <= end && previousX >= start;
+
+            newState = updateChart(calculatedState, xScale, props, lastItemWasVisible, initialChartConfig);
+        }
+        return {
+            ...newState,
+            lastProps: props,
+            propIteration: (state.propIteration || 0) + 1,
+        };
+    }
+
+    public getSnapshotBeforeUpdate(
+        prevProps: Readonly<ChartCanvasProps<TXAxis>>,
+        prevState: Readonly<ChartCanvasState<TXAxis>>,
+    ) {
+        // propIteration is incremented when the props change to differentiate between state updates
+        // and prop updates
+        if (prevState.propIteration !== this.state.propIteration && !this.panInProgress) {
+            this.clearThreeCanvas();
+        }
+        return null;
+    }
+
+    public componentDidUpdate(prevProps: ChartCanvasProps<TXAxis>) {
+        if (prevProps.data !== this.props.data) {
+            this.triggerEvent("dataupdated", {
+                chartConfigs: this.state.chartConfigs,
+                xScale: this.state.xScale,
+                plotData: this.state.plotData,
+            });
+        }
+    }
+
+    public getMutableState = () => {
+        return this.mutableState;
+    };
+
+    public getCanvasContexts = () => {
+        return this.canvasContainerRef.current?.getCanvasContexts();
+    };
+
+    public generateSubscriptionId = () => {
+        this.lastSubscriptionId++;
+
+        return this.lastSubscriptionId;
+    };
+
+    public clearBothCanvas() {
+        const canvases = this.getCanvasContexts();
+        if (canvases && canvases.axes && canvases.mouseCoord) {
+            clearCanvas([canvases.axes, canvases.mouseCoord], this.props.ratio);
+        }
+    }
+
+    public clearMouseCanvas() {
+        const canvases = this.getCanvasContexts();
+        if (canvases && canvases.mouseCoord) {
+            clearCanvas([canvases.mouseCoord], this.props.ratio);
+        }
+    }
+
+    public clearThreeCanvas() {
+        const canvases = this.getCanvasContexts();
+        if (canvases && canvases.axes && canvases.mouseCoord && canvases.bg) {
+            clearCanvas([canvases.axes, canvases.mouseCoord, canvases.bg], this.props.ratio);
+        }
+    }
+
+    public subscribe = (id: string | number, rest: any) => {
+        const {
+            getPanConditions = functor({
+                draggable: false,
+                panEnabled: true,
+            }),
+        } = rest;
+
+        this.subscriptions = this.subscriptions.concat({
+            id,
+            ...rest,
+            getPanConditions,
+        });
+    };
+
+    public unsubscribe = (id: string | number) => {
+        this.subscriptions = this.subscriptions.filter((each) => each.id !== id);
+    };
+
+    public getAllPanConditions = () => {
+        return this.subscriptions.map((each) => each.getPanConditions());
+    };
+
+    public setCursorClass = (className: string | null | undefined) => {
+        this.eventCaptureRef.current?.setCursorClass(className);
+    };
+
+    public amIOnTop = (id: string | number) => {
+        const dragableComponents = this.subscriptions.filter((each) => each.getPanConditions().draggable);
+
+        return dragableComponents.length > 0 && last(dragableComponents).id === id;
+    };
+
+    public handleContextMenu = (mouseXY: number[], e: React.MouseEvent) => {
+        const { xAccessor, chartConfigs, plotData, xScale } = this.state;
+
+        const currentCharts = getCurrentCharts(chartConfigs, mouseXY);
+
+        const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+
+        this.triggerEvent(
+            "contextmenu",
+            {
+                mouseXY,
+                currentItem,
+                currentCharts,
+            },
+            e,
+        );
+    };
+
+    public calculateStateForDomain = (newDomain: any) => {
+        const {
+            xAccessor,
+            displayXAccessor,
+            xScale: initialXScale,
+            chartConfigs: initialChartConfig,
+            plotData: initialPlotData,
+        } = this.state;
+
+        const { filterData, fullData } = this.state;
+        const { postCalculator = ChartCanvas.defaultProps.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) as
+            | ScaleContinuousNumeric<number, number>
+            | ScaleTime<number, number>;
+
+        const chartConfigs = getChartConfigWithUpdatedYScales(
+            initialChartConfig,
+            { plotData, xAccessor, displayXAccessor, fullData },
+            updatedScale.domain(),
+        );
+
+        return {
+            xScale: updatedScale,
+            plotData,
+            chartConfigs,
+        };
+    };
+
+    public pinchZoomHelper = (initialPinch: any, finalPinch: any) => {
+        const { xScale: initialPinchXScale } = initialPinch;
+
+        const {
+            xScale: initialXScale,
+            chartConfigs: initialChartConfig,
+            plotData: initialPlotData,
+            xAccessor,
+            displayXAccessor,
+            filterData,
+            fullData,
+        } = this.state;
+        const { postCalculator = ChartCanvas.defaultProps.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);
+
+        const { plotData: beforePlotData, domain } = filterData(fullData, newDomain, xAccessor, initialPinchXScale, {
+            currentPlotData: initialPlotData,
+            currentDomain: initialXScale!.domain(),
+        });
+
+        const plotData = postCalculator(beforePlotData);
+
+        const updatedScale = initialXScale!.copy().domain(domain) as
+            | ScaleContinuousNumeric<number, number>
+            | ScaleTime<number, number>;
+
+        const mouseXY = finalPinch.touch1Pos;
+
+        const chartConfigs = getChartConfigWithUpdatedYScales(
+            initialChartConfig,
+            { plotData, xAccessor, displayXAccessor, fullData },
+            updatedScale.domain(),
+        );
+
+        const currentItem = getCurrentItem(updatedScale, xAccessor, mouseXY, plotData);
+
+        return {
+            chartConfigs,
+            xScale: updatedScale,
+            plotData,
+            mouseXY,
+            currentItem,
+            xAccessor,
+            fullData,
+        };
+    };
+
+    public cancelDrag() {
+        this.eventCaptureRef.current?.cancelDrag();
+        this.triggerEvent("dragcancel");
+    }
+
+    public handlePinchZoom = (initialPinch: any, finalPinch: any, e: any) => {
+        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;
+            });
+        }
+    };
+
+    public handlePinchZoomEnd = (initialPinch: any, e: any) => {
+        const { xAccessor = ChartCanvas.defaultProps.xAccessor } = this.state;
+
+        if (this.finalPinch) {
+            const state = this.pinchZoomHelper(initialPinch, this.finalPinch);
+            const { xScale, fullData } = state;
+            this.triggerEvent("pinchzoom", state, e);
+
+            this.finalPinch = undefined;
+
+            this.clearThreeCanvas();
+            const firstItem = head(fullData);
+            const scale_start = head(xScale.domain());
+            const data_start = xAccessor(firstItem);
+
+            const lastItem = last(fullData);
+            const scale_end = last(xScale.domain());
+            const data_end = xAccessor(lastItem);
+
+            const { onLoadAfter, onLoadBefore } = this.props;
+
+            this.setState(state, () => {
+                if (scale_start < data_start) {
+                    if (onLoadBefore !== undefined) {
+                        onLoadBefore(scale_start, data_start);
+                    }
+                }
+                if (data_end < scale_end) {
+                    if (onLoadAfter !== undefined) {
+                        onLoadAfter(data_end, scale_end);
+                    }
+                }
+            });
+        }
+    };
+
+    public handleZoom = (zoomDirection: any, mouseXY: any, e: any) => {
+        if (this.panInProgress) {
+            return;
+        }
+
+        const { xAccessor, xScale: initialXScale, plotData: initialPlotData, fullData } = this.state;
+        const {
+            zoomMultiplier = ChartCanvas.defaultProps.zoomMultiplier,
+            zoomAnchor = ChartCanvas.defaultProps.zoomAnchor,
+        } = this.props;
+
+        const item = zoomAnchor({
+            xScale: initialXScale!,
+            xAccessor: xAccessor!,
+            mouseXY,
+            plotData: initialPlotData,
+        });
+
+        const cx = initialXScale(item);
+        const c = zoomDirection > 0 ? 1 * zoomMultiplier : 1 / zoomMultiplier;
+        const newDomain = initialXScale!
+            .range()
+            .map((x) => cx + (x - cx) * c)
+            .map((x) => initialXScale.invert(x));
+
+        const { xScale, plotData, chartConfigs } = this.calculateStateForDomain(newDomain);
+
+        const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+        const currentCharts = getCurrentCharts(chartConfigs, mouseXY);
+
+        this.clearThreeCanvas();
+
+        const firstItem = head(fullData);
+        const scale_start = head(xScale.domain());
+        const data_start = xAccessor!(firstItem);
+
+        const lastItem = last(fullData);
+        const scale_end = last(xScale.domain());
+        const data_end = xAccessor!(lastItem);
+
+        this.mutableState = {
+            mouseXY,
+            currentItem,
+            currentCharts,
+        };
+
+        this.triggerEvent(
+            "zoom",
+            {
+                xScale,
+                plotData,
+                chartConfigs,
+                mouseXY,
+                currentCharts,
+                currentItem,
+                show: true,
+            },
+            e,
+        );
+
+        const { onLoadAfter, onLoadBefore } = this.props;
+
+        this.setState(
+            {
+                xScale,
+                plotData,
+                chartConfigs,
+            },
+            () => {
+                if (scale_start < data_start) {
+                    if (onLoadBefore !== undefined) {
+                        onLoadBefore(scale_start, data_start);
+                    }
+                }
+                if (data_end < scale_end) {
+                    if (onLoadAfter !== undefined) {
+                        onLoadAfter(data_end, scale_end);
+                    }
+                }
+            },
+        );
+    };
+
+    public xAxisZoom = (newDomain: any) => {
+        const { xScale, plotData, chartConfigs } = this.calculateStateForDomain(newDomain);
+        this.clearThreeCanvas();
+
+        const { xAccessor, fullData } = this.state;
+        const firstItem = head(fullData);
+        const scale_start = head(xScale.domain());
+        const data_start = xAccessor!(firstItem);
+
+        const lastItem = last(fullData);
+        const scale_end = last(xScale.domain());
+        const data_end = xAccessor!(lastItem);
+
+        const { onLoadAfter, onLoadBefore } = this.props;
+
+        this.setState(
+            {
+                xScale,
+                plotData,
+                chartConfigs,
+            },
+            () => {
+                if (scale_start < data_start) {
+                    if (onLoadBefore !== undefined) {
+                        onLoadBefore(scale_start, data_start);
+                    }
+                }
+                if (data_end < scale_end) {
+                    if (onLoadAfter !== undefined) {
+                        onLoadAfter(data_end, scale_end);
+                    }
+                }
+            },
+        );
+    };
+
+    public yAxisZoom = (chartId: string, newDomain: any) => {
+        this.clearThreeCanvas();
+        const { chartConfigs: initialChartConfig } = this.state;
+        const chartConfigs = initialChartConfig.map((each: any) => {
+            if (each.id === chartId) {
+                const { yScale } = each;
+                return {
+                    ...each,
+                    yScale: yScale.copy().domain(newDomain),
+                    yPanEnabled: true,
+                };
+            } else {
+                return each;
+            }
+        });
+
+        this.setState({
+            chartConfigs,
+        });
+    };
+
+    public triggerEvent(type: any, props?: any, e?: any) {
+        this.subscriptions.forEach((each) => {
+            const state = {
+                ...this.state,
+                subscriptions: this.subscriptions,
+            };
+            each.listener(type, props, state, e);
+        });
+    }
+
+    public draw = (props: { trigger: string } | { force: boolean }) => {
+        this.subscriptions.forEach((each) => {
+            if (isDefined(each.draw)) {
+                each.draw(props);
+            }
+        });
+    };
+
+    public redraw = () => {
+        this.clearThreeCanvas();
+        this.draw({ force: true });
+    };
+
+    public panHelper = (
+        mouseXY: [number, number],
+        initialXScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+        { dx, dy }: { dx: number; dy: number },
+        chartsToPan: string[],
+    ) => {
+        const { xAccessor, displayXAccessor, chartConfigs: initialChartConfig, filterData, fullData } = this.state;
+        const { postCalculator = ChartCanvas.defaultProps.postCalculator } = this.props;
+
+        const newDomain = initialXScale
+            .range()
+            .map((x) => x - dx)
+            .map((x) => initialXScale.invert(x));
+
+        const { plotData: beforePlotData, domain } = filterData(fullData, newDomain, xAccessor, initialXScale, {
+            currentPlotData: this.hackyWayToStopPanBeyondBounds__plotData,
+            currentDomain: this.hackyWayToStopPanBeyondBounds__domain,
+            ignoreThresholds: true,
+        });
+
+        const updatedScale = initialXScale.copy().domain(domain) as
+            | ScaleContinuousNumeric<number, number>
+            | ScaleTime<number, number>;
+
+        const plotData = postCalculator(beforePlotData);
+
+        const currentItem = getCurrentItem(updatedScale, xAccessor, mouseXY, plotData);
+
+        const chartConfigs = getChartConfigWithUpdatedYScales(
+            initialChartConfig,
+            { plotData, xAccessor, displayXAccessor, fullData },
+            updatedScale.domain(),
+            dy,
+            chartsToPan,
+        );
+
+        const currentCharts = getCurrentCharts(chartConfigs, mouseXY);
+
+        return {
+            xScale: updatedScale,
+            plotData,
+            chartConfigs,
+            mouseXY,
+            currentCharts,
+            currentItem,
+        };
+    };
+
+    public handlePan = (
+        mousePosition: [number, number],
+        panStartXScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+        dxdy: { dx: number; dy: number },
+        chartsToPan: string[],
+        e: React.MouseEvent,
+    ) => {
+        if (this.waitingForPanAnimationFrame) {
+            return;
+        }
+        this.waitingForPanAnimationFrame = true;
+
+        this.hackyWayToStopPanBeyondBounds__plotData =
+            this.hackyWayToStopPanBeyondBounds__plotData ?? this.state.plotData;
+        this.hackyWayToStopPanBeyondBounds__domain =
+            this.hackyWayToStopPanBeyondBounds__domain ?? this.state.xScale!.domain();
+
+        const newState = this.panHelper(mousePosition, panStartXScale, dxdy, chartsToPan);
+
+        this.hackyWayToStopPanBeyondBounds__plotData = newState.plotData;
+        this.hackyWayToStopPanBeyondBounds__domain = newState.xScale.domain();
+
+        this.panInProgress = true;
+
+        this.triggerEvent("pan", newState, e);
+
+        this.mutableState = {
+            mouseXY: newState.mouseXY,
+            currentItem: newState.currentItem,
+            currentCharts: newState.currentCharts,
+        };
+        requestAnimationFrame(() => {
+            this.waitingForPanAnimationFrame = false;
+            this.clearBothCanvas();
+            this.draw({ trigger: "pan" });
+        });
+    };
+
+    public handlePanEnd = (
+        mousePosition: [number, number],
+        panStartXScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+        dxdy: { dx: number; dy: number },
+        chartsToPan: string[],
+        e: React.MouseEvent | React.TouchEvent,
+    ) => {
+        const state = this.panHelper(mousePosition, panStartXScale, dxdy, chartsToPan);
+        this.hackyWayToStopPanBeyondBounds__plotData = null;
+        this.hackyWayToStopPanBeyondBounds__domain = null;
+
+        this.panInProgress = false;
+
+        const { xScale, plotData, chartConfigs } = state;
+
+        this.triggerEvent("panend", state, e);
+
+        requestAnimationFrame(() => {
+            const { xAccessor, fullData } = this.state;
+
+            const firstItem = head(fullData);
+            const scale_start = head(xScale.domain());
+            const data_start = xAccessor!(firstItem);
+
+            const lastItem = last(fullData);
+            const scale_end = last(xScale.domain());
+            const data_end = xAccessor!(lastItem);
+
+            const { onLoadAfter, onLoadBefore } = this.props;
+
+            this.clearThreeCanvas();
+
+            this.setState(
+                {
+                    xScale,
+                    plotData,
+                    chartConfigs,
+                },
+                () => {
+                    if (scale_start < data_start) {
+                        if (onLoadBefore !== undefined) {
+                            onLoadBefore(scale_start, data_start);
+                        }
+                    }
+                    if (data_end < scale_end) {
+                        if (onLoadAfter !== undefined) {
+                            onLoadAfter(data_end, scale_end);
+                        }
+                    }
+                },
+            );
+        });
+    };
+
+    public handleMouseDown = (_: number[], __: string[], e: React.MouseEvent) => {
+        this.triggerEvent("mousedown", this.mutableState, e);
+    };
+
+    public handleMouseEnter = (e: React.MouseEvent) => {
+        this.triggerEvent(
+            "mouseenter",
+            {
+                show: true,
+            },
+            e,
+        );
+    };
+
+    public handleMouseMove = (mouseXY: [number, number], _: string, e: any) => {
+        if (this.waitingForMouseMoveAnimationFrame) {
+            return;
+        }
+        this.waitingForMouseMoveAnimationFrame = true;
+        const { chartConfigs, plotData, xScale, xAccessor } = this.state;
+        const currentCharts = getCurrentCharts(chartConfigs, 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;
+        });
+    };
+
+    public handleMouseLeave = (e: any) => {
+        this.triggerEvent("mouseleave", { show: false }, e);
+        this.clearMouseCanvas();
+        this.draw({ trigger: "mouseleave" });
+    };
+
+    public handleDragStart = ({ startPos }: any, e: any) => {
+        this.triggerEvent("dragstart", { startPos }, e);
+    };
+
+    public handleDrag = (
+        { startPos, mouseXY }: { startPos: [number, number]; mouseXY: [number, number] },
+        e: React.MouseEvent,
+    ) => {
+        const { chartConfigs, plotData, xScale, xAccessor } = this.state;
+
+        const currentCharts = getCurrentCharts(chartConfigs, 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" });
+        });
+    };
+
+    public handleDragEnd = ({ mouseXY }: { mouseXY: number[] }, e: React.MouseEvent) => {
+        this.triggerEvent("dragend", { mouseXY }, e);
+
+        requestAnimationFrame(() => {
+            this.clearMouseCanvas();
+            this.draw({ trigger: "dragend" });
+        });
+    };
+
+    public handleClick = (_: number[], e: React.MouseEvent) => {
+        this.triggerEvent("click", this.mutableState, e);
+
+        requestAnimationFrame(() => {
+            this.clearMouseCanvas();
+            this.draw({ trigger: "click" });
+        });
+    };
+
+    public handleDoubleClick = (_: number[], e: React.MouseEvent) => {
+        this.triggerEvent("dblclick", {}, e);
+    };
+
+    // TODO: Memoize this
+    public getContextValues(): ChartCanvasContextType<TXAxis> {
+        const dimensions = getDimensions(this.props);
+        return {
+            chartId: -1,
+            fullData: this.state.fullData,
+            plotData: this.state.plotData,
+            width: dimensions.width,
+            height: dimensions.height,
+            chartConfigs: this.state.chartConfigs,
+            xScale: this.state.xScale,
+            xAccessor: this.state.xAccessor,
+            displayXAccessor: this.state.displayXAccessor,
+            margin: this.props.margin,
+            ratio: this.props.ratio,
+            xAxisZoom: this.xAxisZoom,
+            yAxisZoom: this.yAxisZoom,
+            getCanvasContexts: this.getCanvasContexts,
+            redraw: this.redraw,
+            subscribe: this.subscribe,
+            unsubscribe: this.unsubscribe,
+            generateSubscriptionId: this.generateSubscriptionId,
+            getMutableState: this.getMutableState,
+            amIOnTop: this.amIOnTop,
+            setCursorClass: this.setCursorClass,
+        };
+    }
+
+    public resetYDomain = (chartId?: string) => {
+        const { chartConfigs } = this.state;
+        let changed = false;
+        const newChartConfig = chartConfigs.map((each: any) => {
+            if (
+                (isNotDefined(chartId) || each.id === chartId) &&
+                !shallowEqual(each.yScale.domain(), each.realYDomain)
+            ) {
+                changed = true;
+                return {
+                    ...each,
+                    yScale: each.yScale.domain(each.realYDomain),
+                    yPanEnabled: false,
+                };
+            }
+            return each;
+        });
+
+        if (changed) {
+            this.clearThreeCanvas();
+            this.setState({
+                chartConfigs: newChartConfig,
+            });
+        }
+    };
+
+    public shouldComponentUpdate() {
+        return !this.panInProgress;
+    }
+
+    public render() {
+        const {
+            disableInteraction,
+            disablePan,
+            disableZoom,
+            useCrossHairStyleCursor,
+            onClick,
+            onDoubleClick,
+            height,
+            width,
+            margin = ChartCanvas.defaultProps.margin,
+            className,
+            zIndex = ChartCanvas.defaultProps.zIndex,
+            defaultFocus,
+            ratio,
+            mouseMoveEvent,
+        } = this.props;
+
+        const { plotData, xScale, xAccessor, chartConfigs } = this.state;
+
+        const dimensions = getDimensions(this.props);
+
+        const interaction = isInteractionEnabled(xScale, xAccessor, plotData);
+
+        const cursorStyle = useCrossHairStyleCursor && interaction;
+
+        const cursor = getCursorStyle();
+
+        return (
+            <ChartCanvasContext.Provider value={this.getContextValues()}>
+                <div
+                    style={{ position: "relative", width, height }}
+                    className={className}
+                    onClick={onClick}
+                    onDoubleClick={onDoubleClick}
+                >
+                    <CanvasContainer
+                        ref={this.canvasContainerRef}
+                        ratio={ratio}
+                        width={width}
+                        height={height}
+                        style={{ height, zIndex, width }}
+                    />
+                    <svg
+                        className={className}
+                        width={width}
+                        height={height}
+                        style={{ position: "absolute", zIndex: zIndex + 5 }}
+                    >
+                        {cursor}
+                        <defs>
+                            <clipPath id="chart-area-clip">
+                                <rect x="0" y="0" width={dimensions.width} height={dimensions.height} />
+                            </clipPath>
+                            {chartConfigs.map((each: any, idx: number) => (
+                                <clipPath key={idx} id={`chart-area-clip-${each.id}`}>
+                                    <rect x="0" y="0" width={each.width} height={each.height} />
+                                </clipPath>
+                            ))}
+                        </defs>
+                        <g transform={`translate(${margin.left + 0.5}, ${margin.top + 0.5})`}>
+                            <EventCapture
+                                ref={this.eventCaptureRef}
+                                useCrossHairStyleCursor={cursorStyle}
+                                mouseMove={mouseMoveEvent && interaction}
+                                zoom={!disableZoom && interaction}
+                                pan={!disablePan && interaction}
+                                width={dimensions.width}
+                                height={dimensions.height}
+                                chartConfig={chartConfigs}
+                                xScale={xScale!}
+                                xAccessor={xAccessor}
+                                focus={defaultFocus}
+                                disableInteraction={disableInteraction}
+                                getAllPanConditions={this.getAllPanConditions}
+                                onContextMenu={this.handleContextMenu}
+                                onClick={this.handleClick}
+                                onDoubleClick={this.handleDoubleClick}
+                                onMouseDown={this.handleMouseDown}
+                                onMouseMove={this.handleMouseMove}
+                                onMouseEnter={this.handleMouseEnter}
+                                onMouseLeave={this.handleMouseLeave}
+                                onDragStart={this.handleDragStart}
+                                onDrag={this.handleDrag}
+                                onDragComplete={this.handleDragEnd}
+                                onZoom={this.handleZoom}
+                                onPinchZoom={this.handlePinchZoom}
+                                onPinchZoomEnd={this.handlePinchZoomEnd}
+                                onPan={this.handlePan}
+                                onPanEnd={this.handlePanEnd}
+                            />
+
+                            <g className="react-financial-charts-avoid-interaction">{this.props.children}</g>
+                        </g>
+                    </svg>
+                </div>
+            </ChartCanvasContext.Provider>
+        );
+    }
+}