@mui/x-charts 8.11.3 → 8.12.0

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisScale.d.ts

@@ -0,0 +1,63 @@
+import { AxisConfig, AxisId, D3ContinuousScale, D3OrdinalScale, DefaultedAxis } from "../../../../models/axis.js";
+import { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+import { ChartSeriesConfig } from "../../models/index.js";
+import { ZoomData } from "./zoom.types.js";
+import { ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
+type GetAxesScalesParams<T extends ChartSeriesType = ChartSeriesType> = {
+  drawingArea: ChartDrawingArea;
+  formattedSeries: ProcessedSeries<T>;
+  seriesConfig: ChartSeriesConfig<T>;
+  zoomMap?: Map<AxisId, ZoomData>;
+  /**
+   * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
+   */
+  preferStrictDomainInLineCharts?: boolean;
+};
+export declare function getXAxesScales<T extends ChartSeriesType>({
+  drawingArea,
+  formattedSeries,
+  axis: axes,
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts
+}: GetAxesScalesParams<T> & {
+  axis?: DefaultedAxis[];
+}): Record<AxisId, ScaleDefinition>;
+export declare function getYAxesScales<T extends ChartSeriesType>({
+  drawingArea,
+  formattedSeries,
+  axis: axes,
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts
+}: GetAxesScalesParams<T> & {
+  axis?: DefaultedAxis[];
+}): Record<AxisId, ScaleDefinition>;
+export type ScaleDefinition = {
+  scale: D3ContinuousScale;
+  tickNumber: number;
+} | {
+  scale: D3OrdinalScale;
+  tickNumber?: never;
+};
+type DomainLimit = 'nice' | 'strict' | ((min: number, max: number) => {
+  min: number;
+  max: number;
+});
+export declare function getDomainLimit(axis: Pick<DefaultedAxis, 'id' | 'domainLimit'>, axisDirection: 'x' | 'y', axisIndex: number, formattedSeries: ProcessedSeries, preferStrictDomainInLineCharts: boolean | undefined): "nice" | "strict" | ((min: number, max: number) => {
+  min: number;
+  max: number;
+});
+export declare function applyDomainLimit(scale: D3ContinuousScale, axis: {
+  min?: number | Date;
+  max?: number | Date;
+}, domainLimit: DomainLimit, rawTickNumber: number): void;
+/**
+ * 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.
+ */
+export declare function getActualAxisExtrema(axisExtrema: Pick<AxisConfig, 'min' | 'max'>, minData: number, maxData: number): [number | Date, number | Date];
+export {};

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

@@ -0,0 +1,123 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
+import { isBandScaleConfig, isPointScaleConfig, isSymlogScaleConfig } from "../../../../models/axis.js";
+import { zoomScaleRange } from "./zoom.js";
+import { getAxisDomainLimit } from "./getAxisDomainLimit.js";
+import { getTickNumber } from "../../../ticks.js";
+import { getScale } from "../../../getScale.js";
+import { getAxisExtrema } from "./getAxisExtrema.js";
+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;
+}
+export 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;
+}
+export 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 (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 = zoomScaleRange(scaleRange, zoomRange);
+    return {
+      scale: scaleBand(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2)
+    };
+  }
+  if (isPointScaleConfig(axis)) {
+    const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
+    const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
+    return {
+      scale: scalePoint(axis.data, zoomedRange)
+    };
+  }
+  const scaleType = axis.scaleType ?? 'linear';
+  const domainLimit = getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+  const [minData, maxData] = 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 = getTickNumber(_extends({}, axis, {
+    range,
+    domain: axisExtrema
+  }));
+  const zoomedRange = zoomScaleRange(range, zoomRange);
+  const scale = getScale(scaleType, axisExtrema, zoomedRange);
+  if (isSymlogScaleConfig(axis) && axis.constant != null) {
+    scale.constant(axis.constant);
+  }
+  applyDomainLimit(scale, axis, domainLimit, rawTickNumber);
+  return {
+    scale,
+    tickNumber: rawTickNumber
+  };
+}
+export function getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts) {
+  return preferStrictDomainInLineCharts ? getAxisDomainLimit(axis, axisDirection, axisIndex, formattedSeries) : axis.domainLimit ?? 'nice';
+}
+export 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.
+ */
+export 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/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -16,6 +16,7 @@ import { getSVGPoint } from "../../../getSVGPoint.js";
 import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
 import { selectorChartAxisInteraction } from "./useChartCartesianInteraction.selectors.js";
 import { useLazySelectorEffect } from "../../utils/useLazySelectorEffect.js";
+import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.js";
 export const useChartCartesianAxis = ({
   params,
   store,
@@ -99,26 +100,27 @@ export const useChartCartesianAxis = ({
       onHighlightedAxisChange(nextAxisInteraction);
     }
   }, !onHighlightedAxisChange);
+  const hasInteractionPlugin = 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 => {
@@ -135,7 +137,7 @@ export const useChartCartesianAxis = ({
         instance.cleanInteraction?.();
         return;
       }
-      instance.setPointerCoordinate?.(svgPoint);
+      instance.setPointerCoordinate(svgPoint);
     };
     const moveHandler = instance.addInteractionListener('move', gestureHandler);
     const panHandler = instance.addInteractionListener('pan', gestureHandler);
@@ -148,7 +150,7 @@ export 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/esm/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/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.js

@@ -5,6 +5,8 @@ import { computeAxisValue } from "./computeAxisValue.js";
 import { selectorChartZoomAxisFilters, selectorChartZoomOptionsLookup } from "./useChartCartesianAxisRendering.selectors.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
 import { ZOOM_SLIDER_PREVIEW_SIZE } from "../../../constants.js";
+import { selectorPreferStrictDomainInLineCharts } from "../../corePlugins/useChartExperimentalFeature/index.js";
+import { getXAxesScales, getYAxesScales } from "./getAxisScale.js";
 function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
   return axisDirection === 'x' ? {
     left: 0,
@@ -22,7 +24,25 @@ function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
     bottom: mainChartDrawingArea.height
   };
 }
-export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRawXAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorChartDrawingArea, (_, axisId) => axisId], (xAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, axisId) => {
+export const selectorChartPreviewXScales = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, 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 getXAxesScales({
+    drawingArea,
+    formattedSeries,
+    axis: xAxes,
+    seriesConfig,
+    zoomMap,
+    preferStrictDomainInLineCharts
+  });
+});
+export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRawXAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorChartDrawingArea, 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];
@@ -32,6 +52,7 @@ export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRa
     end: options.maxEnd
   }]]);
   const computedAxes = computeAxisValue({
+    scales,
     drawingArea,
     formattedSeries,
     axis: xAxes,
@@ -39,7 +60,8 @@ export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRa
     axisDirection: 'x',
     zoomMap,
     zoomOptions,
-    getFilters
+    getFilters,
+    preferStrictDomainInLineCharts
   });
   if (computedAxes.axis[axisId]) {
     return {
@@ -48,7 +70,25 @@ export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRa
   }
   return computedAxes.axis;
 });
-export const selectorChartPreviewComputedYAxis = createSelector([selectorChartRawYAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorChartDrawingArea, (_, axisId) => axisId], (yAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, axisId) => {
+export const selectorChartPreviewYScales = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, 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 getYAxesScales({
+    drawingArea,
+    formattedSeries,
+    axis: yAxes,
+    seriesConfig,
+    zoomMap,
+    preferStrictDomainInLineCharts
+  });
+});
+export const selectorChartPreviewComputedYAxis = createSelector([selectorChartRawYAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorChartDrawingArea, 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];
@@ -58,6 +98,7 @@ export const selectorChartPreviewComputedYAxis = createSelector([selectorChartRa
     end: options.maxEnd
   }]]);
   const computedAxes = computeAxisValue({
+    scales,
     drawingArea,
     formattedSeries,
     axis: yAxes,
@@ -65,7 +106,8 @@ export const selectorChartPreviewComputedYAxis = createSelector([selectorChartRa
     axisDirection: 'y',
     zoomMap,
     zoomOptions,
-    getFilters
+    getFilters,
+    preferStrictDomainInLineCharts
   });
   if (computedAxes.axis[axisId]) {
     return {

package/esm/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/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js

@@ -7,6 +7,7 @@ import { createAxisFilterMapper, createGetAxisFilters } from "./createAxisFilter
 import { createZoomLookup } from "./createZoomLookup.js";
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
 import { selectorPreferStrictDomainInLineCharts } from "../../corePlugins/useChartExperimentalFeature/index.js";
+import { getXAxesScales, getYAxesScales } from "./getAxisScale.js";
 export const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -24,34 +25,42 @@ export const selectorChartZoomIsInteracting = createSelector([selectorChartZoomS
 export const selectorChartZoomMap = createSelector([selectorChartZoomState], zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
 export const selectorChartZoomOptionsLookup = createSelector([selectorChartRawXAxis, selectorChartRawYAxis], (xAxis, yAxis) => _extends({}, createZoomLookup('x')(xAxis), createZoomLookup('y')(yAxis)));
 export const selectorChartAxisZoomOptionsLookup = createSelector([selectorChartZoomOptionsLookup, (_, axisId) => axisId], (axisLookup, axisId) => axisLookup[axisId]);
-const selectorChartXFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
-  zoomMap,
-  zoomOptions,
-  seriesConfig,
-  formattedSeries,
-  direction: 'x'
-}));
-const selectorChartYFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
-  zoomMap,
-  zoomOptions,
-  seriesConfig,
-  formattedSeries,
-  direction: 'y'
-}));
-export const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
+const selectorChartXFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && createAxisFilterMapper(zoomMap, zoomOptions, 'x'));
+const selectorChartYFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && createAxisFilterMapper(zoomMap, zoomOptions, 'y'));
+export const selectorChartXScales = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorPreferStrictDomainInLineCharts], function selectorChartXScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts) {
+  return getXAxesScales({
+    drawingArea,
+    formattedSeries,
+    axis,
+    seriesConfig,
+    zoomMap,
+    preferStrictDomainInLineCharts
+  });
+});
+export const selectorChartYScales = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorPreferStrictDomainInLineCharts], function selectorChartYScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts) {
+  return getYAxesScales({
+    drawingArea,
+    formattedSeries,
+    axis,
+    seriesConfig,
+    zoomMap,
+    preferStrictDomainInLineCharts
+  });
+});
+export const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, 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;
     }
@@ -67,7 +76,8 @@ export const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorPreferStrictDomainInLineCharts], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts) => computeAxisValue({
+export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorPreferStrictDomainInLineCharts, selectorChartXScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, scales) => computeAxisValue({
+  scales,
   drawingArea,
   formattedSeries,
   axis,
@@ -78,7 +88,8 @@ export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selecto
   getFilters,
   preferStrictDomainInLineCharts
 }));
-export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorPreferStrictDomainInLineCharts], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts) => computeAxisValue({
+export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorPreferStrictDomainInLineCharts, selectorChartYScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, scales) => computeAxisValue({
+  scales,
   drawingArea,
   formattedSeries,
   axis,

package/esm/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/esm/internals/plugins/featurePlugins/useChartClosestPoint/index.js

@@ -0,0 +1,2 @@
+export { useChartClosestPoint } from "./useChartClosestPoint.js";
+export * from "./useChartClosestPoint.selectors.js";

package/esm/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/esm/internals/plugins/featurePlugins/{useChartVoronoi/useChartVoronoi.js → useChartClosestPoint/useChartClosestPoint.js}

@@ -11,7 +11,7 @@ import { useSelector } from "../../../store/useSelector.js";
 import { selectorChartXAxis, selectorChartYAxis, selectorChartZoomIsInteracting } from "../useChartCartesianAxis/index.js";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
-export const useChartVoronoi = ({
+export const useChartClosestPoint = ({
   svgRef,
   params,
   store,
@@ -86,7 +86,8 @@ export 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);
     });
@@ -123,11 +124,12 @@ export 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';
         }
@@ -233,17 +235,17 @@ export const useChartVoronoi = ({
     }
   };
 };
-useChartVoronoi.getDefaultizedParams = ({
+useChartClosestPoint.getDefaultizedParams = ({
   params
 }) => _extends({}, 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/esm/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/esm/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.selectors.js

@@ -0,0 +1,3 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectVoronoi = state => state.voronoi;
+export const selectorChartsIsVoronoiEnabled = createSelector([selectVoronoi], voronoi => voronoi?.isVoronoiEnabled);

package/esm/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/esm/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;

package/esm/internals/plugins/featurePlugins/useChartHighlight/highlightStates.js

@@ -0,0 +1,32 @@
+export function isSeriesHighlighted(scope, item, seriesId) {
+  return scope?.highlight === 'series' && item?.seriesId === seriesId;
+}
+export function isSeriesFaded(scope, item, seriesId) {
+  if (isSeriesHighlighted(scope, item, seriesId)) {
+    return false;
+  }
+  return scope?.fade === 'global' && item != null || scope?.fade === 'series' && item?.seriesId === seriesId;
+}
+
+/**
+ * Returns the data index of the highlighted item for a specific series.
+ * If the item is not highlighted, it returns `null`.
+ */
+export function getSeriesHighlightedItem(scope, item, seriesId) {
+  return scope?.highlight === 'item' && item?.seriesId === seriesId ? item.dataIndex : null;
+}
+
+/**
+ * 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 function getSeriesUnfadedItem(scope, item, seriesId) {
+  if (isSeriesHighlighted(scope, item, seriesId)) {
+    return null;
+  }
+  if (getSeriesHighlightedItem(scope, item, seriesId) === item?.dataIndex) {
+    return null;
+  }
+  return (scope?.fade === 'series' || scope?.fade === 'global') && item?.seriesId === seriesId ? item.dataIndex : null;
+}

package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.d.ts

@@ -27,4 +27,8 @@ export declare const selectorChartsIsFadedCallback: import("reselect").Selector<
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & import("./useChartHighlight.types.js").UseChartHighlightState, (item: HighlightItemData | null) => boolean, any[]>;
 export declare const selectorChartsIsHighlighted: import("reselect").Selector<any, boolean, [item: HighlightItemData | null]>;
+export declare const selectorChartIsSeriesHighlighted: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;
+export declare const selectorChartIsSeriesFaded: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;
+export declare const selectorChartSeriesUnfadedItem: import("reselect").Selector<any, number | null | undefined, [seriesId: SeriesId]>;
+export declare const selectorChartSeriesHighlightedItem: import("reselect").Selector<any, number | null | undefined, [seriesId: SeriesId]>;
 export declare const selectorChartsIsFaded: import("reselect").Selector<any, boolean, [item: HighlightItemData | null]>;