@mui/x-charts 8.0.0-beta.1 → 8.0.0-beta.3

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

@@ -39,6 +39,18 @@ Object.keys(_useChartCartesianAxisRendering).forEach(function (key) {
     }
   });
 });
+var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
+Object.keys(_useChartCartesianInteraction).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartCartesianInteraction[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartCartesianInteraction[key];
+    }
+  });
+});
 var _defaultizeAxis = require("./defaultizeAxis");
 var _computeAxisValue = require("./computeAxisValue");
 Object.keys(_computeAxisValue).forEach(function (key) {

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

@@ -40,7 +40,6 @@ const useChartCartesianAxis = ({
   }
   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 isInteractionEnabled = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionIsInitialized);
   const {
     axis: xAxisWithScale,
@@ -82,21 +81,10 @@ const useChartCartesianAxis = ({
       if (!instance.isPointInside(svgPoint, {
         targetElement: event.target
       })) {
-        store.update(prev => (0, _extends2.default)({}, prev, {
-          interaction: {
-            item: null,
-            axis: {
-              x: null,
-              y: null
-            }
-          }
-        }));
+        instance.cleanInteraction?.();
         return;
       }
-      instance.setAxisInteraction?.({
-        x: (0, _getAxisValue.getAxisValue)(xAxisWithScale[usedXAxis], svgPoint.x),
-        y: (0, _getAxisValue.getAxisValue)(yAxisWithScale[usedYAxis], svgPoint.y)
-      });
+      instance.setPointerCoordinate?.(svgPoint);
     };
     const handleDown = event => {
       const target = event.currentTarget;
@@ -109,31 +97,15 @@ const useChartCartesianAxis = ({
     };
     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, isInteractionEnabled]);
-  const axisInteractionRef = React.useRef({
-    x: null,
-    y: null
-  });
-
-  // This avoids re-attaching the event listener on mouse move.
-  React.useEffect(() => {
-    const {
-      x,
-      y
-    } = interactionAxis;
-    axisInteractionRef.current.x = x;
-    axisInteractionRef.current.y = y;
-  }, [interactionAxis]);
   React.useEffect(() => {
     const element = svgRef.current;
     const onAxisClick = params.onAxisClick;
@@ -144,15 +116,10 @@ const useChartCartesianAxis = ({
       event.preventDefault();
       let dataIndex = null;
       let isXAxis = false;
-      if (axisInteractionRef.current.x === null && axisInteractionRef.current.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 = axisInteractionRef.current.x !== null && axisInteractionRef.current.x.index !== -1;
-        dataIndex = isXAxis ? axisInteractionRef.current.x && axisInteractionRef.current.x.index : axisInteractionRef.current.y && axisInteractionRef.current.y.index;
-      }
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
+      const xIndex = (0, _getAxisValue.getAxisIndex)(xAxisWithScale[usedXAxis], svgPoint.x);
+      isXAxis = xIndex !== -1;
+      dataIndex = isXAxis ? xIndex : (0, _getAxisValue.getAxisIndex)(yAxisWithScale[usedYAxis], svgPoint.y);
       const USED_AXIS_ID = isXAxis ? xAxisIds[0] : yAxisIds[0];
       if (dataIndex == null || dataIndex === -1) {
         return;
@@ -182,7 +149,7 @@ const useChartCartesianAxis = ({
     return () => {
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, axisInteractionRef, usedXAxis, usedYAxis]);
+  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis]);
   return {};
 };
 exports.useChartCartesianAxis = useChartCartesianAxis;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts

@@ -184,10 +184,7 @@ export declare const selectorChartZoomOptionsLookup: ((state: import("../../core
  */
 export declare const selectorChartXAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
   cacheKey: import("../../models").ChartStateCacheKey;
-} & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => {
-  axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
-  axisIds: string[];
-}) & {
+} & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
@@ -202,10 +199,7 @@ export declare const selectorChartXAxis: ((state: import("../../corePlugins/useC
   }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
     [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
     [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
-  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
-    axisIds: string[];
-  };
+  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>;
   memoizedResultFunc: ((resultFuncArgs_0: import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsXAxisProps>[] | undefined, resultFuncArgs_1: {
     width: number;
     left: number;
@@ -216,18 +210,12 @@ export declare const selectorChartXAxis: ((state: import("../../corePlugins/useC
   }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
     [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
     [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
-  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
-    axisIds: string[];
-  }) & {
+  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
-  lastResult: () => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
-    axisIds: string[];
-  };
+  lastResult: () => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>;
   dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
     cacheKey: import("../../models").ChartStateCacheKey;
   }) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsXAxisProps>[] | undefined) & {
@@ -1645,10 +1633,7 @@ export declare const selectorChartXAxis: ((state: import("../../corePlugins/useC
 };
 export declare const selectorChartYAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
   cacheKey: import("../../models").ChartStateCacheKey;
-} & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => {
-  axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
-  axisIds: string[];
-}) & {
+} & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
@@ -1663,10 +1648,7 @@ export declare const selectorChartYAxis: ((state: import("../../corePlugins/useC
   }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
     [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
     [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
-  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
-    axisIds: string[];
-  };
+  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>;
   memoizedResultFunc: ((resultFuncArgs_0: import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsYAxisProps>[] | undefined, resultFuncArgs_1: {
     width: number;
     left: number;
@@ -1677,18 +1659,12 @@ export declare const selectorChartYAxis: ((state: import("../../corePlugins/useC
   }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
     [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
     [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
-  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
-    axisIds: string[];
-  }) & {
+  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
-  lastResult: () => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
-    axisIds: string[];
-  };
+  lastResult: () => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>;
   dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
     cacheKey: import("../../models").ChartStateCacheKey;
   }) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsYAxisProps>[] | undefined) & {