@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.10

package/node/context/ChartProvider/ChartProvider.js

@@ -0,0 +1,46 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartProvider = ChartProvider;
+exports.defaultSeriesConfig = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useCharts = require("../../internals/store/useCharts");
+var _ChartContext = require("./ChartContext");
+var _useChartCartesianAxis = require("../../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartInteraction = require("../../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartZAxis = require("../../internals/plugins/featurePlugins/useChartZAxis");
+var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight");
+var _plugin = require("../../BarChart/plugin");
+var _plugin2 = require("../../ScatterChart/plugin");
+var _plugin3 = require("../../LineChart/plugin");
+var _plugin4 = require("../../PieChart/plugin");
+var _jsxRuntime = require("react/jsx-runtime");
+const defaultSeriesConfig = exports.defaultSeriesConfig = {
+  bar: _plugin.plugin,
+  scatter: _plugin2.plugin,
+  line: _plugin3.plugin,
+  pie: _plugin4.plugin
+};
+
+// For consistency with the v7, the cartesian axes are set by default.
+// To remove them, you can provide a `plugins` props.
+const defaultPlugins = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];
+function ChartProvider(props) {
+  const {
+    children,
+    plugins = defaultPlugins,
+    pluginParams = {},
+    seriesConfig = defaultSeriesConfig
+  } = props;
+  const {
+    contextValue
+  } = (0, _useCharts.useCharts)(plugins, pluginParams, seriesConfig);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContext.ChartContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}

package/node/context/ChartProvider/ChartProvider.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/context/ChartProvider/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartProvider = require("./ChartProvider");
+Object.keys(_ChartProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartProvider[key];
+    }
+  });
+});
+var _ChartProvider2 = require("./ChartProvider.types");
+Object.keys(_ChartProvider2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartProvider2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartProvider2[key];
+    }
+  });
+});
+var _useChartContext = require("./useChartContext");
+Object.keys(_useChartContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChartContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartContext[key];
+    }
+  });
+});

package/node/context/ChartProvider/useChartContext.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ChartContext = require("./ChartContext");
+const useChartContext = () => {
+  const context = React.useContext(_ChartContext.ChartContext);
+  if (context == null) {
+    throw new Error(['MUI X: Could not find the Chart context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
+  }
+  return context;
+};
+exports.useChartContext = useChartContext;

package/node/context/PolarProvider/PolarProvider.js

@@ -1,54 +1,62 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PolarProvider = PolarProvider;
-var React = _interopRequireWildcard(require("react"));
-var _computeAxisValue = require("../../internals/computeAxisValue");
-var _useDrawingArea = require("../../hooks/useDrawingArea");
-var _useSeries = require("../../hooks/useSeries");
-var _PolarContext = require("./PolarContext");
-var _useRadiusExtremumGetter = require("../PluginProvider/useRadiusExtremumGetter");
-var _useRotationExtremumGetter = require("../PluginProvider/useRotationExtremumGetter");
-var _jsxRuntime = require("react/jsx-runtime");
-function PolarProvider(props) {
-  const {
-    rotationAxis,
-    radiusAxis,
-    children
-  } = props;
-  const formattedSeries = (0, _useSeries.useSeries)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const rotationExtremumGetters = (0, _useRotationExtremumGetter.useRotationExtremumGetter)();
-  const radiusExtremumGetters = (0, _useRadiusExtremumGetter.useRadiusExtremumGetter)();
-  const rotationValues = React.useMemo(() => (0, _computeAxisValue.computeAxisValue)({
-    drawingArea,
-    formattedSeries,
-    axis: rotationAxis,
-    extremumGetters: rotationExtremumGetters,
-    axisDirection: 'rotation'
-  }), [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters]);
-  const radiusValues = React.useMemo(() => (0, _computeAxisValue.computeAxisValue)({
-    drawingArea,
-    formattedSeries,
-    axis: radiusAxis,
-    extremumGetters: radiusExtremumGetters,
-    axisDirection: 'radius'
-  }), [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters]);
-  const value = React.useMemo(() => ({
-    isInitialized: true,
-    data: {
-      rotationAxis: rotationValues.axis,
-      radiusAxis: radiusValues.axis,
-      rotationAxisIds: rotationValues.axisIds,
-      radiusAxisIds: radiusValues.axisIds
-    }
-  }), [rotationValues, radiusValues]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolarContext.PolarContext.Provider, {
-    value: value,
-    children: children
-  });
-}
+// 'use client';
+// import * as React from 'react';
+// import { computeAxisValue } from '../../internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue';
+// import { useDrawingArea } from '../../hooks/useDrawingArea';
+// import { useSeries } from '../../hooks/useSeries';
+// import { PolarContext } from './PolarContext';
+// import { useRadiusExtremumGetter } from '../PluginProvider/useRadiusExtremumGetter';
+// import { useRotationExtremumGetter } from '../PluginProvider/useRotationExtremumGetter';
+// import { PolarProviderProps } from './Polar.types';
+
+// function PolarProvider(props: PolarProviderProps) {
+//   const { rotationAxis, radiusAxis, children } = props;
+
+//   const formattedSeries = useSeries();
+//   const drawingArea = useDrawingArea();
+//   const rotationExtremumGetters = useRotationExtremumGetter();
+//   const radiusExtremumGetters = useRadiusExtremumGetter();
+
+//   const rotationValues = React.useMemo(
+//     () =>
+//       computeAxisValue({
+//         drawingArea,
+//         formattedSeries,
+//         axis: rotationAxis,
+//         extremumGetters: rotationExtremumGetters,
+//         axisDirection: 'rotation',
+//       }),
+//     [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters],
+//   );
+
+//   const radiusValues = React.useMemo(
+//     () =>
+//       computeAxisValue({
+//         drawingArea,
+//         formattedSeries,
+//         axis: radiusAxis,
+//         extremumGetters: radiusExtremumGetters,
+//         axisDirection: 'radius',
+//       }),
+//     [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters],
+//   );
+
+//   const value = React.useMemo(
+//     () => ({
+//       isInitialized: true,
+//       data: {
+//         rotationAxis: rotationValues.axis,
+//         radiusAxis: radiusValues.axis,
+//         rotationAxisIds: rotationValues.axisIds,
+//         radiusAxisIds: radiusValues.axisIds,
+//       },
+//     }),
+//     [rotationValues, radiusValues],
+//   );
+
+//   return <PolarContext.Provider value={value}>{children}</PolarContext.Provider>;
+// }
+
+// export { PolarProvider };

package/node/context/PolarProvider/getAxisExtremum.js

@@ -1,27 +1,49 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getAxisExtremum = void 0;
-const axisExtremumCallback = (acc, chartType, axis, getters, axisIndex, formattedSeries) => {
-  const getter = getters[chartType];
-  const series = formattedSeries[chartType]?.series ?? {};
-  const [minChartTypeData, maxChartTypeData] = getter?.({
-    series,
-    axis,
-    axisIndex,
-    isDefaultAxis: axisIndex === 0
-  }) ?? [Infinity, -Infinity];
-  const [minData, maxData] = acc;
-  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
-};
-const getAxisExtremum = (axis, getters, axisIndex, formattedSeries) => {
-  const charTypes = Object.keys(getters);
-  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries), [Infinity, -Infinity]);
-  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
-    return [Infinity, -Infinity];
-  }
-  return extremums;
-};
-exports.getAxisExtremum = getAxisExtremum;
+// import { AxisConfig } from '../../models';
+// import { CartesianChartSeriesType } from '../../models/seriesType/config';
+// import { FormattedSeries } from '../SeriesProvider';
+// import { ExtremumGettersConfig, ExtremumGetterResult } from '../PluginProvider';
+
+// const axisExtremumCallback = <T extends CartesianChartSeriesType>(
+//   acc: ExtremumGetterResult,
+//   chartType: T,
+//   axis: AxisConfig,
+//   getters: ExtremumGettersConfig<T>,
+//   axisIndex: number,
+//   formattedSeries: FormattedSeries,
+// ): ExtremumGetterResult => {
+//   const getter = getters[chartType];
+//   const series = formattedSeries[chartType]?.series ?? {};
+
+//   const [minChartTypeData, maxChartTypeData] = getter?.({
+//     series,
+//     axis,
+//     axisIndex,
+//     isDefaultAxis: axisIndex === 0,
+//   }) ?? [Infinity, -Infinity];
+
+//   const [minData, maxData] = acc;
+
+//   return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+// };
+
+// export const getAxisExtremum = (
+//   axis: AxisConfig,
+//   getters: ExtremumGettersConfig,
+//   axisIndex: number,
+//   formattedSeries: FormattedSeries,
+// ) => {
+//   const charTypes = Object.keys(getters) as CartesianChartSeriesType[];
+
+//   const extremums = charTypes.reduce<ExtremumGetterResult>(
+//     (acc, charType) =>
+//       axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries),
+//     [Infinity, -Infinity],
+//   );
+
+//   if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+//     return [Infinity, -Infinity];
+//   }
+
+//   return extremums;
+// };
+"use strict";

package/node/context/PolarProvider/usePolarContext.js

@@ -1,17 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.usePolarContext = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _PolarContext = require("./PolarContext");
-const usePolarContext = () => {
-  const {
-    data
-  } = React.useContext(_PolarContext.PolarContext);
-  return data;
-};
-exports.usePolarContext = usePolarContext;
+// 'use client';
+// import * as React from 'react';
+// import { PolarContext } from './PolarContext';
+// import { PolarContextState } from './Polar.types';
+
+// export const usePolarContext = (): PolarContextState => {
+//   const { data } = React.useContext(PolarContext);
+//   return data;
+// };

package/node/context/index.js

@@ -2,26 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-var _exportNames = {
-  ZAxisContextProvider: true
-};
-Object.defineProperty(exports, "ZAxisContextProvider", {
-  enumerable: true,
-  get: function () {
-    return _ZAxisContextProvider.ZAxisContextProvider;
-  }
-});
-var _HighlightedProvider = require("./HighlightedProvider");
-Object.keys(_HighlightedProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _HighlightedProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _HighlightedProvider[key];
-    }
-  });
-});
-var _ZAxisContextProvider = require("./ZAxisContextProvider");
+});

package/node/hooks/index.js

@@ -8,7 +8,9 @@ var _exportNames = {
   unstable_usePieSeries: true,
   unstable_useLineSeries: true,
   unstable_useBarSeries: true,
-  unstable_useScatterSeries: true
+  unstable_useScatterSeries: true,
+  useChartGradientId: true,
+  useChartGradientIdObjectBound: true
 };
 Object.defineProperty(exports, "unstable_useBarSeries", {
   enumerable: true,
@@ -40,6 +42,18 @@ Object.defineProperty(exports, "unstable_useSeries", {
     return _useSeries.useSeries;
   }
 });
+Object.defineProperty(exports, "useChartGradientId", {
+  enumerable: true,
+  get: function () {
+    return _useChartGradientId.useChartGradientId;
+  }
+});
+Object.defineProperty(exports, "useChartGradientIdObjectBound", {
+  enumerable: true,
+  get: function () {
+    return _useChartGradientId.useChartGradientIdObjectBound;
+  }
+});
 var _useDrawingArea = require("./useDrawingArea");
 Object.keys(_useDrawingArea).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -88,6 +102,18 @@ Object.keys(_useAxis).forEach(function (key) {
     }
   });
 });
+var _useZAxis = require("./useZAxis");
+Object.keys(_useZAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useZAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useZAxis[key];
+    }
+  });
+});
 var _useColorScale = require("./useColorScale");
 Object.keys(_useColorScale).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -112,4 +138,41 @@ Object.keys(_useSvgRef).forEach(function (key) {
     }
   });
 });
-var _useSeries = require("./useSeries");
+var _useItemHighlighted = require("./useItemHighlighted");
+Object.keys(_useItemHighlighted).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useItemHighlighted[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useItemHighlighted[key];
+    }
+  });
+});
+var _useItemHighlightedGetter = require("./useItemHighlightedGetter");
+Object.keys(_useItemHighlightedGetter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useItemHighlightedGetter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useItemHighlightedGetter[key];
+    }
+  });
+});
+var _useSeries = require("./useSeries");
+var _useLegend = require("./useLegend");
+Object.keys(_useLegend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useLegend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useLegend[key];
+    }
+  });
+});
+var _useChartGradientId = require("./useChartGradientId");

package/node/hooks/useAxis.js

@@ -4,22 +4,50 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useXAxes = useXAxes;
 exports.useXAxis = useXAxis;
+exports.useYAxes = useYAxes;
 exports.useYAxis = useYAxis;
-var _CartesianProvider = require("../context/CartesianProvider");
-function useXAxis(identifier) {
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+function useXAxes() {
+  const store = (0, _useStore.useStore)();
   const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
+  return {
     xAxis,
     xAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  };
+}
+function useYAxes() {
+  const store = (0, _useStore.useStore)();
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
+  return {
+    yAxis,
+    yAxisIds
+  };
+}
+function useXAxis(identifier) {
+  const store = (0, _useStore.useStore)();
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id];
 }
 function useYAxis(identifier) {
+  const store = (0, _useStore.useStore)();
   const {
-    yAxis,
-    yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id];
 }

package/node/hooks/useAxisEvents.js

@@ -2,32 +2,36 @@
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAxisEvents = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _InteractionProvider = require("../context/InteractionProvider");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _isBandScale = require("../internals/isBandScale");
 var _getSVGPoint = require("../internals/getSVGPoint");
 var _useSvgRef = require("./useSvgRef");
-var _useDrawingArea = require("./useDrawingArea");
+var _useStore = require("../internals/store/useStore");
+var _ChartProvider = require("../context/ChartProvider");
+var _useAxis = require("./useAxis");
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
 const useAxisEvents = disableAxisListener => {
   const svgRef = (0, _useSvgRef.useSvgRef)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const {
-    dispatch
-  } = React.useContext(_InteractionProvider.InteractionContext);
+  } = (0, _useAxis.useYAxes)();
+  const store = (0, _useStore.useStore)();
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -39,7 +43,7 @@ const useAxisEvents = disableAxisListener => {
   });
   React.useEffect(() => {
     const element = svgRef.current;
-    if (element === null || disableAxisListener) {
+    if (element === null || disableAxisListener || !store) {
       return () => {};
     }
     function getNewAxisState(axisConfig, mouseValue) {
@@ -98,22 +102,34 @@ const useAxisEvents = disableAxisListener => {
         x: -1,
         y: -1
       };
-      dispatch({
-        type: 'exitChart'
-      });
+      store.update(prev => (0, _extends2.default)({}, prev, {
+        interaction: {
+          item: null,
+          axis: {
+            x: null,
+            y: null
+          }
+        }
+      }));
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
       mousePosition.current.x = svgPoint.x;
       mousePosition.current.y = svgPoint.y;
-      if (!drawingArea.isPointInside(svgPoint, {
+      if (!instance.isPointInside(svgPoint, {
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
-          dispatch({
-            type: 'exitChart'
-          });
+          store.update(prev => (0, _extends2.default)({}, prev, {
+            interaction: {
+              item: null,
+              axis: {
+                x: null,
+                y: null
+              }
+            }
+          }));
           mousePosition.current.isInChart = false;
         }
         return;
@@ -121,13 +137,15 @@ const useAxisEvents = disableAxisListener => {
       mousePosition.current.isInChart = true;
       const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
       const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
-      dispatch({
-        type: 'updateAxis',
-        data: {
-          x: newStateX,
-          y: newStateY
-        }
-      });
+      store.update(prev => (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          axis: (0, _extends2.default)({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
+            x: newStateX
+          } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
+            y: newStateY
+          } : {})
+        })
+      }));
     };
     const handleDown = event => {
       const target = event.currentTarget;
@@ -150,6 +168,6 @@ const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, dispatch, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
+  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, instance]);
 };
 exports.useAxisEvents = useAxisEvents;