@mui/x-charts 8.11.3 → 8.12.0

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

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyDomainLimit = applyDomainLimit;
+exports.getActualAxisExtrema = getActualAxisExtrema;
+exports.getDomainLimit = getDomainLimit;
+exports.getXAxesScales = getXAxesScales;
+exports.getYAxesScales = getYAxesScales;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
+var _axis = require("../../../../models/axis");
+var _zoom = require("./zoom");
+var _getAxisDomainLimit = require("./getAxisDomainLimit");
+var _ticks = require("../../../ticks");
+var _getScale = require("../../../getScale");
+var _getAxisExtrema = require("./getAxisExtrema");
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+function getRange(drawingArea, axisDirection, axis) {
+  const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
+  return axis.reverse ? [range[1], range[0]] : range;
+}
+function getXAxesScales({
+  drawingArea,
+  formattedSeries,
+  axis: axes = [],
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts
+}) {
+  const scales = {};
+  axes.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    const zoom = zoomMap?.get(axis.id);
+    scales[axis.id] = getAxisScale(axis, 'x', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+  });
+  return scales;
+}
+function getYAxesScales({
+  drawingArea,
+  formattedSeries,
+  axis: axes = [],
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts
+}) {
+  const scales = {};
+  axes.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    const zoom = zoomMap?.get(axis.id);
+    scales[axis.id] = getAxisScale(axis, 'y', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+  });
+  return scales;
+}
+function getAxisScale(axis, axisDirection, zoom, drawingArea, seriesConfig, axisIndex, formattedSeries,
+/**
+ * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
+ */
+preferStrictDomainInLineCharts) {
+  const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+  const range = getRange(drawingArea, axisDirection, axis);
+  if ((0, _axis.isBandScaleConfig)(axis)) {
+    const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+    // Reverse range because ordinal scales are presented from top to bottom on y-axis
+    const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
+    const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
+    return {
+      scale: (0, _d3Scale.scaleBand)(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2)
+    };
+  }
+  if ((0, _axis.isPointScaleConfig)(axis)) {
+    const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
+    const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
+    return {
+      scale: (0, _d3Scale.scalePoint)(axis.data, zoomedRange)
+    };
+  }
+  const scaleType = axis.scaleType ?? 'linear';
+  const domainLimit = getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+  const [minData, maxData] = (0, _getAxisExtrema.getAxisExtrema)(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
+  const axisExtrema = getActualAxisExtrema(axis, minData, maxData);
+  if (typeof domainLimit === 'function') {
+    const {
+      min,
+      max
+    } = domainLimit(minData, maxData);
+    axisExtrema[0] = min;
+    axisExtrema[1] = max;
+  }
+  const rawTickNumber = (0, _ticks.getTickNumber)((0, _extends2.default)({}, axis, {
+    range,
+    domain: axisExtrema
+  }));
+  const zoomedRange = (0, _zoom.zoomScaleRange)(range, zoomRange);
+  const scale = (0, _getScale.getScale)(scaleType, axisExtrema, zoomedRange);
+  if ((0, _axis.isSymlogScaleConfig)(axis) && axis.constant != null) {
+    scale.constant(axis.constant);
+  }
+  applyDomainLimit(scale, axis, domainLimit, rawTickNumber);
+  return {
+    scale,
+    tickNumber: rawTickNumber
+  };
+}
+function getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts) {
+  return preferStrictDomainInLineCharts ? (0, _getAxisDomainLimit.getAxisDomainLimit)(axis, axisDirection, axisIndex, formattedSeries) : axis.domainLimit ?? 'nice';
+}
+function applyDomainLimit(scale, axis, domainLimit, rawTickNumber) {
+  if (domainLimit === 'nice') {
+    scale.nice(rawTickNumber);
+  }
+  const [minDomain, maxDomain] = scale.domain();
+  scale.domain([axis.min ?? minDomain, axis.max ?? maxDomain]);
+}
+
+/**
+ * Get the actual axis extrema considering the user defined min and max values.
+ * @param axisExtrema User defined axis extrema.
+ * @param minData Minimum value from the data.
+ * @param maxData Maximum value from the data.
+ */
+function getActualAxisExtrema(axisExtrema, minData, maxData) {
+  let min = minData;
+  let max = maxData;
+  if (axisExtrema.max != null && axisExtrema.max.valueOf() < minData) {
+    min = axisExtrema.max;
+  }
+  if (axisExtrema.min != null && axisExtrema.min.valueOf() > minData) {
+    max = axisExtrema.min;
+  }
+  return [axisExtrema.min ?? min, axisExtrema.max ?? max];
+}

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

@@ -23,6 +23,7 @@ var _getSVGPoint = require("../../../getSVGPoint");
 var _useChartInteraction = require("../useChartInteraction");
 var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
 var _useLazySelectorEffect = require("../../utils/useLazySelectorEffect");
+var _checkHasInteractionPlugin = require("../useChartInteraction/checkHasInteractionPlugin");
 const useChartCartesianAxis = ({
   params,
   store,
@@ -106,26 +107,27 @@ const useChartCartesianAxis = ({
       onHighlightedAxisChange(nextAxisInteraction);
     }
   }, !onHighlightedAxisChange);
+  const hasInteractionPlugin = (0, _checkHasInteractionPlugin.checkHasInteractionPlugin)(instance);
   React.useEffect(() => {
     const element = svgRef.current;
-    if (!isInteractionEnabled || !element || params.disableAxisListener) {
+    if (!isInteractionEnabled || !hasInteractionPlugin || !element || params.disableAxisListener) {
       return () => {};
     }
 
     // Clean the interaction when the mouse leaves the chart.
     const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
       if (!event.detail.activeGestures.pan) {
-        instance.cleanInteraction?.();
+        instance.cleanInteraction();
       }
     });
     const panEndHandler = instance.addInteractionListener('panEnd', event => {
       if (!event.detail.activeGestures.move) {
-        instance.cleanInteraction?.();
+        instance.cleanInteraction();
       }
     });
     const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
       if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
-        instance.cleanInteraction?.();
+        instance.cleanInteraction();
       }
     });
     const gestureHandler = event => {
@@ -142,7 +144,7 @@ const useChartCartesianAxis = ({
         instance.cleanInteraction?.();
         return;
       }
-      instance.setPointerCoordinate?.(svgPoint);
+      instance.setPointerCoordinate(svgPoint);
     };
     const moveHandler = instance.addInteractionListener('move', gestureHandler);
     const panHandler = instance.addInteractionListener('pan', gestureHandler);
@@ -155,7 +157,7 @@ const useChartCartesianAxis = ({
       pressHandler.cleanup();
       pressEndHandler.cleanup();
     };
-  }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener, isInteractionEnabled]);
+  }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener, isInteractionEnabled, hasInteractionPlugin]);
   React.useEffect(() => {
     const element = svgRef.current;
     const onAxisClick = params.onAxisClick;

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

@@ -1,3 +1,5 @@
 import { AxisId } from "../../../../models/axis.js";
+export declare const selectorChartPreviewXScales: import("reselect").Selector<any, Record<AxisId, import("./getAxisScale.js").ScaleDefinition>, [axisId: AxisId]>;
 export declare const selectorChartPreviewComputedXAxis: import("reselect").Selector<any, import("./useChartCartesianAxis.types.js").ComputedAxisConfig<import("../../../index.js").ChartsXAxisProps>, [axisId: AxisId]>;
+export declare const selectorChartPreviewYScales: import("reselect").Selector<any, Record<AxisId, import("./getAxisScale.js").ScaleDefinition>, [axisId: AxisId]>;
 export declare const selectorChartPreviewComputedYAxis: import("reselect").Selector<any, import("./useChartCartesianAxis.types.js").ComputedAxisConfig<import("../../../index.js").ChartsYAxisProps>, [axisId: AxisId]>;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedXAxis = void 0;
+exports.selectorChartPreviewYScales = exports.selectorChartPreviewXScales = exports.selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedXAxis = void 0;
 var _selectors = require("../../utils/selectors");
 var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
@@ -11,6 +11,8 @@ var _computeAxisValue = require("./computeAxisValue");
 var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
 var _constants = require("../../../constants");
+var _useChartExperimentalFeature = require("../../corePlugins/useChartExperimentalFeature");
+var _getAxisScale = require("./getAxisScale");
 function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
   return axisDirection === 'x' ? {
     left: 0,
@@ -28,7 +30,25 @@ function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
     bottom: mainChartDrawingArea.height
   };
 }
-const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.selectorChartDrawingArea, (_, axisId) => axisId], (xAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, axisId) => {
+const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, (_, axisId) => axisId], function selectorChartPreviewXScales(xAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, axisId) {
+  const hasAxis = xAxes?.some(axis => axis.id === axisId);
+  const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
+  const options = zoomOptions[axisId];
+  const zoomMap = new Map([[axisId, {
+    axisId,
+    start: options.minStart,
+    end: options.maxEnd
+  }]]);
+  return (0, _getAxisScale.getXAxesScales)({
+    drawingArea,
+    formattedSeries,
+    axis: xAxes,
+    seriesConfig,
+    zoomMap,
+    preferStrictDomainInLineCharts
+  });
+});
+const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.selectorChartDrawingArea, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartPreviewXScales, (_, axisId) => axisId], (xAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, preferStrictDomainInLineCharts, scales, axisId) => {
   const hasAxis = xAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
   const options = zoomOptions[axisId];
@@ -38,6 +58,7 @@ const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXA
     end: options.maxEnd
   }]]);
   const computedAxes = (0, _computeAxisValue.computeAxisValue)({
+    scales,
     drawingArea,
     formattedSeries,
     axis: xAxes,
@@ -45,7 +66,8 @@ const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXA
     axisDirection: 'x',
     zoomMap,
     zoomOptions,
-    getFilters
+    getFilters,
+    preferStrictDomainInLineCharts
   });
   if (computedAxes.axis[axisId]) {
     return {
@@ -54,7 +76,25 @@ const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXA
   }
   return computedAxes.axis;
 });
-const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.selectorChartDrawingArea, (_, axisId) => axisId], (yAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, axisId) => {
+const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, (_, axisId) => axisId], function selectorChartPreviewYScales(yAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, axisId) {
+  const hasAxis = yAxes?.some(axis => axis.id === axisId);
+  const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
+  const options = zoomOptions[axisId];
+  const zoomMap = new Map([[axisId, {
+    axisId,
+    start: options.minStart,
+    end: options.maxEnd
+  }]]);
+  return (0, _getAxisScale.getYAxesScales)({
+    drawingArea,
+    formattedSeries,
+    axis: yAxes,
+    seriesConfig,
+    zoomMap,
+    preferStrictDomainInLineCharts
+  });
+});
+const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.selectorChartDrawingArea, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartPreviewYScales, (_, axisId) => axisId], (yAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, preferStrictDomainInLineCharts, scales, axisId) => {
   const hasAxis = yAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
   const options = zoomOptions[axisId];
@@ -64,6 +104,7 @@ const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYA
     end: options.maxEnd
   }]]);
   const computedAxes = (0, _computeAxisValue.computeAxisValue)({
+    scales,
     drawingArea,
     formattedSeries,
     axis: yAxes,
@@ -71,7 +112,8 @@ const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYA
     axisDirection: 'y',
     zoomMap,
     zoomOptions,
-    getFilters
+    getFilters,
+    preferStrictDomainInLineCharts
   });
   if (computedAxes.axis[axisId]) {
     return {

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

@@ -23,6 +23,16 @@ export declare const selectorChartZoomOptionsLookup: import("reselect").Selector
   [x: number]: import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions;
 }, []>;
 export declare const selectorChartAxisZoomOptionsLookup: import("reselect").Selector<any, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions, [axisId: AxisId]>;
+export declare const selectorChartXScales: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, Record<AxisId, import("./getAxisScale.js").ScaleDefinition>, []>;
+export declare const selectorChartYScales: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, Record<AxisId, import("./getAxisScale.js").ScaleDefinition>, []>;
 export declare const selectorChartZoomAxisFilters: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomAxisFilters = exports.selectorChartYAxis = exports.selectorChartXAxis = exports.selectorChartRawAxis = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxis = exports.createZoomMap = void 0;
+exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomAxisFilters = exports.selectorChartYScales = exports.selectorChartYAxis = exports.selectorChartXScales = exports.selectorChartXAxis = exports.selectorChartRawAxis = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxis = exports.createZoomMap = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
@@ -14,6 +14,7 @@ var _createAxisFilterMapper = require("./createAxisFilterMapper");
 var _createZoomLookup = require("./createZoomLookup");
 var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
 var _useChartExperimentalFeature = require("../../corePlugins/useChartExperimentalFeature");
+var _getAxisScale = require("./getAxisScale");
 const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -32,34 +33,42 @@ const selectorChartZoomIsInteracting = exports.selectorChartZoomIsInteracting =
 const selectorChartZoomMap = exports.selectorChartZoomMap = (0, _selectors.createSelector)([selectorChartZoomState], zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
 const selectorChartZoomOptionsLookup = exports.selectorChartZoomOptionsLookup = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis], (xAxis, yAxis) => (0, _extends2.default)({}, (0, _createZoomLookup.createZoomLookup)('x')(xAxis), (0, _createZoomLookup.createZoomLookup)('y')(yAxis)));
 const selectorChartAxisZoomOptionsLookup = exports.selectorChartAxisZoomOptionsLookup = (0, _selectors.createSelector)([selectorChartZoomOptionsLookup, (_, axisId) => axisId], (axisLookup, axisId) => axisLookup[axisId]);
-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 = exports.selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorChartXFilter, selectorChartYFilter, _useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
+const selectorChartXFilter = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && (0, _createAxisFilterMapper.createAxisFilterMapper)(zoomMap, zoomOptions, 'x'));
+const selectorChartYFilter = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && (0, _createAxisFilterMapper.createAxisFilterMapper)(zoomMap, zoomOptions, 'y'));
+const selectorChartXScales = exports.selectorChartXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts], function selectorChartXScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts) {
+  return (0, _getAxisScale.getXAxesScales)({
+    drawingArea,
+    formattedSeries,
+    axis,
+    seriesConfig,
+    zoomMap,
+    preferStrictDomainInLineCharts
+  });
+});
+const selectorChartYScales = exports.selectorChartYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts], function selectorChartYScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts) {
+  return (0, _getAxisScale.getYAxesScales)({
+    drawingArea,
+    formattedSeries,
+    axis,
+    seriesConfig,
+    zoomMap,
+    preferStrictDomainInLineCharts
+  });
+});
+const selectorChartZoomAxisFilters = exports.selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorChartXFilter, selectorChartYFilter, _useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis, selectorChartXScales, selectorChartYScales], (xMapper, yMapper, xAxis, yAxis, xScales, yScales) => {
   if (xMapper === undefined || yMapper === undefined) {
     // Early return if there is no zoom.
     return undefined;
   }
-  const xFilters = xAxis?.reduce((acc, axis, index) => {
-    const filter = xMapper(axis, index);
+  const xFilters = xAxis?.reduce((acc, axis) => {
+    const filter = xMapper(axis.id, axis.data, xScales[axis.id].scale);
     if (filter !== null) {
       acc[axis.id] = filter;
     }
     return acc;
   }, {});
-  const yFilters = yAxis?.reduce((acc, axis, index) => {
-    const filter = yMapper(axis, index);
+  const yFilters = yAxis?.reduce((acc, axis) => {
+    const filter = yMapper(axis.id, axis.data, yScales[axis.id].scale);
     if (filter !== null) {
       acc[axis.id] = filter;
     }
@@ -75,7 +84,8 @@ const selectorChartZoomAxisFilters = exports.selectorChartZoomAxisFilters = (0,
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartXScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, scales) => (0, _computeAxisValue.computeAxisValue)({
+  scales,
   drawingArea,
   formattedSeries,
   axis,
@@ -86,7 +96,8 @@ const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSel
   getFilters,
   preferStrictDomainInLineCharts
 }));
-const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartYScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, scales) => (0, _computeAxisValue.computeAxisValue)({
+  scales,
   drawingArea,
   formattedSeries,
   axis,

package/internals/plugins/featurePlugins/useChartClosestPoint/index.d.ts

@@ -0,0 +1,3 @@
+export { useChartClosestPoint } from "./useChartClosestPoint.js";
+export * from "./useChartClosestPoint.selectors.js";
+export type { UseChartClosestPointSignature } from "./useChartClosestPoint.types.js";

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

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

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from "../../models/index.js";
+import { UseChartClosestPointSignature } from "./useChartClosestPoint.types.js";
+export declare const useChartClosestPoint: ChartPlugin<UseChartClosestPointSignature>;

package/internals/plugins/featurePlugins/{useChartVoronoi/useChartVoronoi.js → useChartClosestPoint/useChartClosestPoint.js}

@@ -6,7 +6,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useChartVoronoi = void 0;
+exports.useChartClosestPoint = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
@@ -18,7 +18,7 @@ var _useSelector = require("../../../store/useSelector");
 var _useChartCartesianAxis = require("../useChartCartesianAxis");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
-const useChartVoronoi = ({
+const useChartClosestPoint = ({
   svgRef,
   params,
   store,
@@ -93,7 +93,8 @@ const useChartVoronoi = ({
         seriesId,
         seriesIndexes,
         startIndex: points.length,
-        endIndex: points.length + seriesPoints.length
+        endIndex: points.length + seriesPoints.length,
+        markerSize: series[seriesId].markerSize
       };
       points = points.concat(seriesPoints);
     });
@@ -130,11 +131,12 @@ const useChartVoronoi = ({
       // The point index in the series with id=closestSeries.seriesId.
       const seriesPointIndex = (2 * closestPointIndex - voronoiRef.current[closestSeries.seriesId].startIndex) / 2;
       const dataIndex = voronoiRef.current[closestSeries.seriesId].seriesIndexes[seriesPointIndex];
-      if (voronoiMaxRadius !== undefined) {
+      const maxRadius = voronoiMaxRadius === 'item' ? closestSeries.markerSize : voronoiMaxRadius;
+      if (maxRadius !== undefined) {
         const pointX = delauneyRef.current.points[2 * closestPointIndex];
         const pointY = delauneyRef.current.points[2 * closestPointIndex + 1];
         const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
-        if (dist2 > voronoiMaxRadius ** 2) {
+        if (dist2 > maxRadius ** 2) {
           // The closest point is too far to be considered.
           return 'outside-voronoi-max-radius';
         }
@@ -240,18 +242,18 @@ const useChartVoronoi = ({
     }
   };
 };
-exports.useChartVoronoi = useChartVoronoi;
-useChartVoronoi.getDefaultizedParams = ({
+exports.useChartClosestPoint = useChartClosestPoint;
+useChartClosestPoint.getDefaultizedParams = ({
   params
 }) => (0, _extends2.default)({}, params, {
   disableVoronoi: params.disableVoronoi ?? !params.series.some(item => item.type === 'scatter')
 });
-useChartVoronoi.getInitialState = params => ({
+useChartClosestPoint.getInitialState = params => ({
   voronoi: {
     isVoronoiEnabled: !params.disableVoronoi
   }
 });
-useChartVoronoi.params = {
+useChartClosestPoint.params = {
   disableVoronoi: true,
   voronoiMaxRadius: true,
   onItemClick: true

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.selectors.d.ts

@@ -0,0 +1,5 @@
+export declare const selectorChartsIsVoronoiEnabled: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartClosestPoint.types.js").UseChartVoronoiState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, boolean | undefined, any[]>;

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.selectors.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartsIsVoronoiEnabled = void 0;
+var _selectors = require("../../utils/selectors");
+const selectVoronoi = state => state.voronoi;
+const selectorChartsIsVoronoiEnabled = exports.selectorChartsIsVoronoiEnabled = (0, _selectors.createSelector)([selectVoronoi], voronoi => voronoi?.isVoronoiEnabled);

package/internals/plugins/featurePlugins/{useChartVoronoi/useChartVoronoi.types.d.ts → useChartClosestPoint/useChartClosestPoint.types.d.ts}

@@ -29,10 +29,11 @@ export interface UseChartVoronoiParameters {
    */
   disableVoronoi?: boolean;
   /**
-   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius?: number | undefined;
+  voronoiMaxRadius?: 'item' | number | undefined;
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.
@@ -41,10 +42,13 @@ export interface UseChartVoronoiParameters {
    */
   onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
 }
-export type UseChartVoronoiDefaultizedParameters = UseChartVoronoiParameters & {
+export type UseChartVoronoiDefaultizedParameters = Pick<UseChartVoronoiParameters, 'voronoiMaxRadius' | 'onItemClick'> & {
+  /**
+   * If true, the voronoi plugin is disabled.
+   */
   disableVoronoi: boolean;
 };
-export type UseChartVoronoiSignature = ChartPluginSignature<{
+export type UseChartClosestPointSignature = ChartPluginSignature<{
   instance: UseChartVoronoiInstance;
   state: UseChartVoronoiState;
   params: UseChartVoronoiParameters;

package/internals/plugins/featurePlugins/useChartHighlight/highlightStates.d.ts

@@ -0,0 +1,16 @@
+import { HighlightItemData } from "./useChartHighlight.types.js";
+import { HighlightScope } from "./highlightConfig.types.js";
+import { SeriesId } from "../../../../models/seriesType/common.js";
+export declare function isSeriesHighlighted(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): boolean;
+export declare function isSeriesFaded(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): boolean;
+/**
+ * Returns the data index of the highlighted item for a specific series.
+ * If the item is not highlighted, it returns `null`.
+ */
+export declare function getSeriesHighlightedItem(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): number | null | undefined;
+/**
+ * Returns the data index of the "unfaded item" for a specific series.
+ * An "unfaded item" is the only item of a faded series that shouldn't be faded.
+ * If the series is not faded or if there is no highlighted item, it returns `null`.
+ */
+export declare function getSeriesUnfadedItem(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): number | null | undefined;