@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.11

package/node/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -0,0 +1,213 @@
+"use strict";
+'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.useChartCartesianAxis = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
+var _colorPalettes = require("../../../../colorPalettes");
+var _useSelector = require("../../../store/useSelector");
+var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
+var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
+var _defaultizeAxis = require("./defaultizeAxis");
+var _useChartCartesianAxis = require("./useChartCartesianAxis.selectors");
+var _getAxisValue = require("./getAxisValue");
+var _getSVGPoint = require("../../../getSVGPoint");
+var _useChartInteraction = require("../useChartInteraction");
+const useChartCartesianAxis = ({
+  params,
+  store,
+  seriesConfig,
+  svgRef,
+  instance
+}) => {
+  const {
+    xAxis,
+    yAxis,
+    dataset
+  } = params;
+  if (process.env.NODE_ENV !== 'production') {
+    const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
+    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
+    if (duplicates.size > 0) {
+      (0, _warning.warnOnce)([`MUI X: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+    }
+  }
+  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
+  const processedSeries = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed);
+  const interactionAxis = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionAxis);
+  const {
+    axis: xAxisWithScale,
+    axisIds: xAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
+  const {
+    axis: yAxisWithScale,
+    axisIds: yAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartCartesianAxis`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      cartesianAxis: (0, _extends2.default)({}, prev.cartesianAxis, {
+        x: (0, _defaultizeAxis.defaultizeAxis)(xAxis, dataset, 'x'),
+        y: (0, _defaultizeAxis.defaultizeAxis)(yAxis, dataset, 'y')
+      })
+    }));
+  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
+  const usedXAxis = xAxisIds[0];
+  const usedYAxis = yAxisIds[0];
+
+  // Use a ref to avoid rerendering on every mousemove event.
+  const mousePosition = React.useRef({
+    isInChart: false,
+    x: -1,
+    y: -1
+  });
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || params.disableAxisListener) {
+      return () => {};
+    }
+    const handleOut = () => {
+      mousePosition.current = {
+        isInChart: false,
+        x: -1,
+        y: -1
+      };
+      instance.cleanInteraction();
+    };
+    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 (!instance.isPointInside(svgPoint, {
+        targetElement: event.target
+      })) {
+        if (mousePosition.current.isInChart) {
+          store.update(prev => (0, _extends2.default)({}, prev, {
+            interaction: {
+              item: null,
+              axis: {
+                x: null,
+                y: null
+              }
+            }
+          }));
+          mousePosition.current.isInChart = false;
+        }
+        return;
+      }
+      mousePosition.current.isInChart = true;
+      instance.setAxisInteraction({
+        x: (0, _getAxisValue.getAxisValue)(xAxisWithScale[usedXAxis], svgPoint.x),
+        y: (0, _getAxisValue.getAxisValue)(yAxisWithScale[usedYAxis], svgPoint.y)
+      });
+    };
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerout', handleOut);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
+    return () => {
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerout', handleOut);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
+    };
+  }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !params.onAxisClick) {
+      return () => {};
+    }
+    const handleMouseClick = event => {
+      event.preventDefault();
+      let dataIndex = null;
+      let isXaxis = false;
+      if (interactionAxis.x === null && interactionAxis.y === null) {
+        const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
+        const xIndex = (0, _getAxisValue.getAxisValue)(xAxisWithScale[usedXAxis], svgPoint.x)?.index ?? null;
+        isXaxis = xIndex !== null && xIndex !== -1;
+        dataIndex = isXaxis ? xIndex : (0, _getAxisValue.getAxisValue)(yAxisWithScale[usedYAxis], svgPoint.y)?.index ?? null;
+      } else {
+        isXaxis = interactionAxis.x !== null && interactionAxis.x.index !== -1;
+        dataIndex = isXaxis ? interactionAxis.x && interactionAxis.x.index : interactionAxis.y && interactionAxis.y.index;
+      }
+      const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
+      if (dataIndex == null || dataIndex === -1) {
+        return;
+      }
+
+      // The .data exist because otherwise the dataIndex would be null or -1.
+      const axisValue = (isXaxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
+      const seriesValues = {};
+      Object.keys(processedSeries).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
+        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
+          const seriesItem = processedSeries[seriesType].series[seriesId];
+          const providedXAxisId = seriesItem.xAxisId;
+          const providedYAxisId = seriesItem.yAxisId;
+          const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+          if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+            seriesValues[seriesId] = seriesItem.data[dataIndex];
+          }
+        });
+      });
+      params.onAxisClick?.(event, {
+        dataIndex,
+        axisValue,
+        seriesValues
+      });
+    };
+    element.addEventListener('click', handleMouseClick);
+    return () => {
+      element.removeEventListener('click', handleMouseClick);
+    };
+  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, params, interactionAxis, usedXAxis, usedYAxis]);
+  return {};
+};
+exports.useChartCartesianAxis = useChartCartesianAxis;
+useChartCartesianAxis.params = {
+  xAxis: true,
+  yAxis: true,
+  dataset: true,
+  onAxisClick: true,
+  disableAxisListener: true
+};
+useChartCartesianAxis.getDefaultizedParams = ({
+  params
+}) => {
+  return (0, _extends2.default)({}, params, {
+    colors: params.colors ?? _colorPalettes.rainbowSurgePalette,
+    theme: params.theme ?? 'light',
+    defaultizedXAxis: (0, _defaultizeAxis.defaultizeAxis)(params.xAxis, params.dataset, 'x'),
+    defaultizedYAxis: (0, _defaultizeAxis.defaultizeAxis)(params.yAxis, params.dataset, 'y')
+  });
+};
+useChartCartesianAxis.getInitialState = params => ({
+  cartesianAxis: {
+    x: params.defaultizedXAxis,
+    y: params.defaultizedYAxis
+  }
+});

package/node/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartYAxis = exports.selectorChartXAxis = exports.selectorChartRawYAxis = exports.selectorChartRawXAxis = exports.selectorChartCartesianAxisState = exports.createZoomMap = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useChartDimensions = require("../../corePlugins/useChartDimensions");
+var _useChartSeries = require("../../corePlugins/useChartSeries");
+var _selectors = require("../../utils/selectors");
+var _computeAxisValue = require("./computeAxisValue");
+var _createAxisFilterMapper = require("./createAxisFilterMapper");
+const createZoomMap = zoom => {
+  const zoomItemMap = new Map();
+  zoom.forEach(zoomItem => {
+    zoomItemMap.set(zoomItem.axisId, zoomItem);
+  });
+  return zoomItemMap;
+};
+exports.createZoomMap = createZoomMap;
+const selectorChartCartesianAxisState = state => state.cartesianAxis;
+exports.selectorChartCartesianAxisState = selectorChartCartesianAxisState;
+const selectorChartZoomState = state => state.zoom;
+const selectorChartRawXAxis = exports.selectorChartRawXAxis = (0, _selectors.createSelector)(selectorChartCartesianAxisState, axis => axis?.x);
+const selectorChartRawYAxis = exports.selectorChartRawYAxis = (0, _selectors.createSelector)(selectorChartCartesianAxisState, axis => axis?.y);
+
+/**
+ * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
+ */
+
+const selectorChartZoomMap = (0, _selectors.createSelector)(selectorChartZoomState, zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
+const selectorChartZoomOptionsLookup = (0, _selectors.createSelector)(selectorChartZoomState, () => undefined);
+const selectorChartXFilter = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup, _useChartSeries.selectorChartSeriesConfig, _useChartSeries.selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && (0, _createAxisFilterMapper.createAxisFilterMapper)({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction: 'x'
+}));
+const selectorChartYFilter = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup, _useChartSeries.selectorChartSeriesConfig, _useChartSeries.selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && (0, _createAxisFilterMapper.createAxisFilterMapper)({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction: 'y'
+}));
+const selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
+  if (xMapper === undefined || yMapper === undefined) {
+    // Early return if there is no zoom.
+    return undefined;
+  }
+  const xFilters = xAxis.reduce((acc, axis, index) => {
+    // @ts-expect-error The type is defined in the pro package
+    const filter = xMapper(axis, index);
+    if (filter !== null) {
+      acc[axis.id] = filter;
+    }
+    return acc;
+  }, {});
+  const yFilters = yAxis.reduce((acc, axis, index) => {
+    // @ts-expect-error The type is defined in the pro package
+    const filter = yMapper(axis, index);
+    if (filter !== null) {
+      acc[axis.id] = filter;
+    }
+    return acc;
+  }, {});
+  if (Object.keys(xFilters).length === 0 && Object.keys(yFilters).length === 0) {
+    return undefined;
+  }
+  return (0, _createAxisFilterMapper.createGetAxisFilters)((0, _extends2.default)({}, xFilters, yFilters));
+});
+
+/**
+ * The only interesting selectors that merge axis data and zoom if provided.
+ */
+
+const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSelector)([selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => (0, _computeAxisValue.computeAxisValue)({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'x',
+  zoomMap,
+  zoomOptions,
+  getFilters
+}));
+const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSelector)([selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => (0, _computeAxisValue.computeAxisValue)({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'y',
+  zoomMap,
+  zoomOptions,
+  getFilters
+}));

package/node/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.js

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

package/node/internals/plugins/featurePlugins/useChartHighlight/createIsFaded.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createIsFaded = void 0;
+const createIsFaded = (highlightScope, highlightedItem) => item => {
+  if (!highlightScope || !highlightedItem || !item) {
+    return false;
+  }
+  if (highlightScope.fade === 'series') {
+    return item.seriesId === highlightedItem.seriesId && item.dataIndex !== highlightedItem.dataIndex;
+  }
+  if (highlightScope.fade === 'global') {
+    return item.seriesId !== highlightedItem.seriesId || item.dataIndex !== highlightedItem.dataIndex;
+  }
+  return false;
+};
+exports.createIsFaded = createIsFaded;

package/node/{context/HighlightedProvider → internals/plugins/featurePlugins/useChartHighlight}/createIsHighlighted.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createIsHighlighted = void 0;
-const createIsHighlighted = (highlightScope, highlightedItem) => input => {
-  if (!highlightScope) {
+const createIsHighlighted = (highlightScope, highlightedItem) => item => {
+  if (!highlightScope || !highlightedItem || !item) {
     return false;
   }
   if (highlightScope.highlight === 'series') {
-    return input.seriesId === highlightedItem?.seriesId;
+    return item.seriesId === highlightedItem.seriesId;
   }
   if (highlightScope.highlight === 'item') {
-    return input.dataIndex === highlightedItem?.dataIndex && input.seriesId === highlightedItem?.seriesId;
+    return item.dataIndex === highlightedItem.dataIndex && item.seriesId === highlightedItem.seriesId;
   }
   return false;
 };

package/node/internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.js

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

package/node/internals/plugins/featurePlugins/useChartHighlight/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartHighlight: true
+};
+Object.defineProperty(exports, "useChartHighlight", {
+  enumerable: true,
+  get: function () {
+    return _useChartHighlight.useChartHighlight;
+  }
+});
+var _useChartHighlight = require("./useChartHighlight");
+var _useChartHighlight2 = require("./useChartHighlight.selectors");
+Object.keys(_useChartHighlight2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartHighlight2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartHighlight2[key];
+    }
+  });
+});

package/node/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartHighlight = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+const useChartHighlight = ({
+  store,
+  params,
+  models
+}) => {
+  (0, _useEnhancedEffect.default)(() => {
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
+      highlight: (0, _extends2.default)({}, prevState.highlight, {
+        item: models.highlightedItem.value
+      })
+    }));
+  }, [store, models.highlightedItem.value]);
+  const clearHighlight = (0, _useEventCallback.default)(() => {
+    params.onHighlightChange?.(null);
+    models.highlightedItem.setControlledValue(null);
+  });
+  const setHighlight = (0, _useEventCallback.default)(newItem => {
+    params.onHighlightChange?.(newItem);
+    models.highlightedItem.setControlledValue(newItem);
+  });
+  return {
+    instance: {
+      clearHighlight,
+      setHighlight
+    }
+  };
+};
+exports.useChartHighlight = useChartHighlight;
+useChartHighlight.models = {
+  highlightedItem: {
+    getDefaultValue: () => null
+  }
+};
+useChartHighlight.getInitialState = params => ({
+  highlight: {
+    item: params.highlightedItem ?? null
+  }
+});
+useChartHighlight.params = {
+  highlightedItem: true,
+  onHighlightChange: true
+};

package/node/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartsIsHighlightedCallback = exports.selectorChartsIsHighlighted = exports.selectorChartsIsFadedCallback = exports.selectorChartsIsFaded = exports.selectorChartsHighlightedItem = exports.selectorChartsHighlightScopePerSeriesId = exports.selectorChartsHighlightScope = void 0;
+var _selectors = require("../../utils/selectors");
+var _createIsHighlighted = require("./createIsHighlighted");
+var _createIsFaded = require("./createIsFaded");
+const selectHighlight = state => state.highlight;
+const selectSeries = state => state.series;
+const selectorChartsHighlightScopePerSeriesId = exports.selectorChartsHighlightScopePerSeriesId = (0, _selectors.createSelector)(selectSeries, series => {
+  const map = new Map();
+  Object.keys(series.processedSeries).forEach(seriesType => {
+    const seriesData = series.processedSeries[seriesType];
+    Object.keys(seriesData?.series ?? {}).forEach(seriesId => {
+      const seriesItem = seriesData?.series[seriesId];
+      map.set(seriesId, seriesItem?.highlightScope);
+    });
+  });
+  return map;
+});
+const selectorChartsHighlightedItem = exports.selectorChartsHighlightedItem = (0, _selectors.createSelector)(selectHighlight, highlight => highlight.item);
+const selectorChartsHighlightScope = exports.selectorChartsHighlightScope = (0, _selectors.createSelector)([selectorChartsHighlightScopePerSeriesId, selectorChartsHighlightedItem], (seriesIdToHighlightScope, highlightedItem) => {
+  if (!highlightedItem) {
+    return null;
+  }
+  const highlightScope = seriesIdToHighlightScope.get(highlightedItem.seriesId);
+  if (highlightScope === undefined) {
+    return null;
+  }
+  return highlightScope;
+});
+const selectorChartsIsHighlightedCallback = exports.selectorChartsIsHighlightedCallback = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem], _createIsHighlighted.createIsHighlighted);
+const selectorChartsIsFadedCallback = exports.selectorChartsIsFadedCallback = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem], _createIsFaded.createIsFaded);
+const selectorChartsIsHighlighted = exports.selectorChartsIsHighlighted = (0, _selectors.createSelector)([selectorChartsIsHighlightedCallback, (_, item) => item], (callback, item) => callback(item));
+const selectorChartsIsFaded = exports.selectorChartsIsFaded = (0, _selectors.createSelector)([selectorChartsIsFadedCallback, (_, item) => item], (callback, item) => callback(item));

package/node/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.types.js

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

package/node/internals/plugins/featurePlugins/useChartInteraction/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartInteraction: true
+};
+Object.defineProperty(exports, "useChartInteraction", {
+  enumerable: true,
+  get: function () {
+    return _useChartInteraction.useChartInteraction;
+  }
+});
+var _useChartInteraction = require("./useChartInteraction");
+var _useChartInteraction2 = require("./useChartInteraction.selectors");
+Object.keys(_useChartInteraction2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartInteraction2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartInteraction2[key];
+    }
+  });
+});

package/node/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartInteraction = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+const useChartInteraction = ({
+  store
+}) => {
+  const cleanInteraction = (0, _useEventCallback.default)(() => {
+    store.update(prev => {
+      return (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          axis: {
+            x: null,
+            y: null
+          },
+          item: null
+        })
+      });
+    });
+  });
+  const removeItemInteraction = (0, _useEventCallback.default)(itemToRemove => {
+    store.update(prev => {
+      const prevItem = prev.interaction.item;
+      if (prevItem === null || Object.keys(itemToRemove).some(key => itemToRemove[key] !== prevItem[key])) {
+        // The item is already something else, no need to clean it.
+        return prev;
+      }
+      return (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          item: null
+        })
+      });
+    });
+  });
+  const setItemInteraction = (0, _useEventCallback.default)(newItem => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        item: newItem
+      })
+    }));
+  });
+  const setAxisInteraction = (0, _useEventCallback.default)(({
+    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 enableVoronoid = (0, _useEventCallback.default)(() => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        isVoronoiEnabled: true
+      })
+    }));
+  });
+  const disableVoronoid = (0, _useEventCallback.default)(() => {
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        isVoronoiEnabled: false
+      })
+    }));
+  });
+  return {
+    params: {},
+    instance: {
+      cleanInteraction,
+      setItemInteraction,
+      removeItemInteraction,
+      setAxisInteraction,
+      enableVoronoid,
+      disableVoronoid
+    }
+  };
+};
+exports.useChartInteraction = useChartInteraction;
+useChartInteraction.getInitialState = () => ({
+  interaction: {
+    item: null,
+    axis: {
+      x: null,
+      y: null
+    },
+    isVoronoiEnabled: false
+  }
+});
+useChartInteraction.params = {};

package/node/{context/InteractionSelectors.js → internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js}

@@ -4,10 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorChartsInteractionYAxisIsDefined = exports.selectorChartsInteractionYAxis = exports.selectorChartsInteractionXAxisIsDefined = exports.selectorChartsInteractionXAxis = exports.selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItem = exports.selectorChartsInteractionIsVoronoiEnabled = exports.selectorChartsInteractionAxis = void 0;
-var _selectors = require("../internals/plugins/utils/selectors");
-function selectInteraction(state) {
-  return state.interaction;
-}
+var _selectors = require("../../utils/selectors");
+const selectInteraction = state => state.interaction;
 const selectorChartsInteractionItem = exports.selectorChartsInteractionItem = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.item);
 const selectorChartsInteractionAxis = exports.selectorChartsInteractionAxis = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.axis);
 const selectorChartsInteractionXAxis = exports.selectorChartsInteractionXAxis = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.axis.x);

package/node/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.js

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

package/node/internals/plugins/featurePlugins/useChartZAxis/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartZAxis: true
+};
+Object.defineProperty(exports, "useChartZAxis", {
+  enumerable: true,
+  get: function () {
+    return _useChartZAxis.useChartZAxis;
+  }
+});
+var _useChartZAxis = require("./useChartZAxis");
+var _useChartZAxis2 = require("./useChartZAxis.selectors");
+Object.keys(_useChartZAxis2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartZAxis2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartZAxis2[key];
+    }
+  });
+});