@mui/x-charts 8.9.0 → 8.10.0

package/esm/ScatterChart/seriesConfig/extremums.js

@@ -1,6 +1,3 @@
-const mergeMinMax = (acc, val) => {
-  return [val[0] === null ? acc[0] : Math.min(acc[0], val[0]), val[1] === null ? acc[1] : Math.max(acc[1], val[1])];
-};
 export const getExtremumX = params => {
   const {
     series,
@@ -8,24 +5,39 @@ export const getExtremumX = params => {
     isDefaultAxis,
     getFilters
   } = params;
-  return Object.keys(series).filter(seriesId => {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const seriesId in series) {
+    if (!Object.hasOwn(series, seriesId)) {
+      continue;
+    }
     const axisId = series[seriesId].xAxisId;
-    return axisId === axis.id || axisId === undefined && isDefaultAxis;
-  }).reduce((acc, seriesId) => {
+    if (!(axisId === axis.id || axisId === undefined && isDefaultAxis)) {
+      continue;
+    }
     const filter = getFilters?.({
       currentAxisId: axis.id,
       isDefaultAxis,
       seriesXAxisId: series[seriesId].xAxisId,
       seriesYAxisId: series[seriesId].yAxisId
     });
-    const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
-      if (filter && !filter(d, dataIndex)) {
-        return accSeries;
+    const seriesData = series[seriesId].data ?? [];
+    for (let i = 0; i < seriesData.length; i += 1) {
+      const d = seriesData[i];
+      if (filter && !filter(d, i)) {
+        continue;
+      }
+      if (d.x !== null) {
+        if (d.x < min) {
+          min = d.x;
+        }
+        if (d.x > max) {
+          max = d.x;
+        }
       }
-      return mergeMinMax(accSeries, [d.x, d.x]);
-    }, [Infinity, -Infinity]);
-    return mergeMinMax(acc, seriesMinMax ?? [Infinity, -Infinity]);
-  }, [Infinity, -Infinity]);
+    }
+  }
+  return [min, max];
 };
 export const getExtremumY = params => {
   const {
@@ -34,22 +46,37 @@ export const getExtremumY = params => {
     isDefaultAxis,
     getFilters
   } = params;
-  return Object.keys(series).filter(seriesId => {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const seriesId in series) {
+    if (!Object.hasOwn(series, seriesId)) {
+      continue;
+    }
     const axisId = series[seriesId].yAxisId;
-    return axisId === axis.id || axisId === undefined && isDefaultAxis;
-  }).reduce((acc, seriesId) => {
+    if (!(axisId === axis.id || axisId === undefined && isDefaultAxis)) {
+      continue;
+    }
     const filter = getFilters?.({
       currentAxisId: axis.id,
       isDefaultAxis,
       seriesXAxisId: series[seriesId].xAxisId,
       seriesYAxisId: series[seriesId].yAxisId
     });
-    const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
-      if (filter && !filter(d, dataIndex)) {
-        return accSeries;
+    const seriesData = series[seriesId].data ?? [];
+    for (let i = 0; i < seriesData.length; i += 1) {
+      const d = seriesData[i];
+      if (filter && !filter(d, i)) {
+        continue;
+      }
+      if (d.y !== null) {
+        if (d.y < min) {
+          min = d.y;
+        }
+        if (d.y > max) {
+          max = d.y;
+        }
       }
-      return mergeMinMax(accSeries, [d.y, d.y]);
-    }, [Infinity, -Infinity]);
-    return mergeMinMax(acc, seriesMinMax ?? [Infinity, -Infinity]);
-  }, [Infinity, -Infinity]);
+    }
+  }
+  return [min, max];
 };

package/esm/ScatterChart/useScatterChartProps.d.ts

@@ -7,7 +7,7 @@ import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import type { ScatterChartProps } from "./ScatterChart.js";
 import type { ScatterPlotProps } from "./ScatterPlot.js";
-import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
+import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
 /**
  * A helper function that extracts ScatterChartProps from the input props

package/esm/SparkLineChart/SparkLineChart.js

@@ -353,6 +353,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -404,6 +408,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -477,6 +485,53 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    height: PropTypes.number,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -738,6 +793,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -788,6 +847,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -859,6 +922,52 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,

package/esm/hooks/useTicksGrouped.d.ts

@@ -0,0 +1,28 @@
+import type { ScaleBand, ScalePoint } from '@mui/x-charts-vendor/d3-scale';
+import { AxisConfig, type AxisGroup } from "../models/axis.js";
+import type { TickParams } from "./useTicks.js";
+export type GroupedTickItemType = {
+  /**
+   * This property is undefined only if it's the tick closing the last band
+   */
+  value?: any;
+  formattedValue?: string;
+  offset: number;
+  labelOffset: number;
+  /**
+   * In band scales, we remove some redundant ticks.
+   */
+  ignoreTick?: boolean;
+  dataIndex?: number;
+  /**
+   * The index of the group this tick belongs to. If `getGrouping` returns `[[0, 1], [2, 3]]`
+   * both ticks with value `0` and `2` will have `groupIndex: 0`, and both ticks with value `1` and `3` will have `groupIndex: 1`.
+   */
+  groupIndex?: number;
+};
+export declare function useTicksGrouped(options: {
+  scale: ScaleBand<any> | ScalePoint<any>;
+  valueFormatter?: AxisConfig['valueFormatter'];
+  direction: 'x' | 'y';
+  groups: AxisGroup[];
+} & Pick<TickParams, 'tickNumber' | 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'>): GroupedTickItemType[];

package/esm/hooks/useTicksGrouped.js

@@ -0,0 +1,98 @@
+'use client';
+
+import * as React from 'react';
+import { isBandScale } from "../internals/isBandScale.js";
+const offsetRatio = {
+  start: 0,
+  extremities: 0,
+  end: 1,
+  middle: 0.5,
+  tick: 0
+};
+export function useTicksGrouped(options) {
+  const {
+    scale,
+    tickInterval,
+    tickLabelPlacement = 'middle',
+    tickPlacement = 'extremities',
+    groups
+  } = options;
+  return React.useMemo(() => {
+    const domain = scale.domain();
+    const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+    if (scale.bandwidth() > 0) {
+      // scale type = 'band'
+      const entries = mapToGrouping(filteredDomain, groups, tickPlacement, tickLabelPlacement, scale);
+      if (entries[0]) {
+        entries[0].ignoreTick = true;
+      }
+      return [{
+        formattedValue: undefined,
+        offset: scale.range()[0],
+        labelOffset: 0,
+        groupIndex: groups.length - 1
+      }, ...entries,
+      // Last tick
+      {
+        formattedValue: undefined,
+        offset: scale.range()[1],
+        labelOffset: 0,
+        groupIndex: groups.length - 1
+      }];
+    }
+
+    // scale type = 'point'
+    return mapToGrouping(filteredDomain, groups, tickPlacement, tickLabelPlacement, scale);
+  }, [scale, tickInterval, groups, tickPlacement, tickLabelPlacement]);
+}
+function mapToGrouping(tickValues, groups, tickPlacement, tickLabelPlacement, scale) {
+  const allTickItems = [];
+  // Map to keep track of offsets and their corresponding tick indexes
+  // Used to remove redundant ticks when they are in the same position
+  const dataIndexToTickIndex = new Map();
+  let currentValueCount = 0;
+  for (let groupIndex = 0; groupIndex < groups.length; groupIndex += 1) {
+    for (let dataIndex = 0; dataIndex < tickValues.length; dataIndex += 1) {
+      const tickValue = tickValues[dataIndex];
+      const groupValue = groups[groupIndex].getValue(tickValue, dataIndex);
+      const lastItem = allTickItems[allTickItems.length - 1];
+
+      // Check if this is a new unique value for this group
+      const isNew = lastItem?.value !== groupValue || lastItem?.groupIndex !== groupIndex;
+      if (isNew) {
+        currentValueCount = 1;
+        // Calculate tick offset
+        const tickOffset = isBandScale(scale) ? scale(tickValue) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step() : scale(tickValue);
+
+        // Calculate the label offset
+        const labelOffset = scale.step() * currentValueCount * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement]);
+
+        // Add a new item
+        allTickItems.push({
+          value: groupValue,
+          formattedValue: `${groupValue}`,
+          offset: tickOffset,
+          groupIndex,
+          dataIndex,
+          ignoreTick: false,
+          labelOffset
+        });
+        if (!dataIndexToTickIndex.has(dataIndex)) {
+          dataIndexToTickIndex.set(dataIndex, new Set());
+        }
+        const tickIndexes = dataIndexToTickIndex.get(dataIndex);
+        for (const previousIndex of tickIndexes.values()) {
+          allTickItems[previousIndex].ignoreTick = true;
+        }
+        tickIndexes.add(allTickItems.length - 1);
+      } else {
+        currentValueCount += 1;
+
+        // Calculate the label offset
+        const labelOffset = scale.step() * currentValueCount * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement]);
+        lastItem.labelOffset = labelOffset;
+      }
+    }
+  }
+  return allTickItems;
+}

package/esm/index.d.ts

@@ -26,4 +26,5 @@ export * from "./ChartsSurface/index.js";
 export { ChartContainer } from "./ChartContainer/index.js";
 export type { ChartContainerProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
-export * from "./Toolbar/index.js";
+export * from "./Toolbar/index.js";
+export * from "./ChartsWrapper/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.9.0
+ * @mui/x-charts v8.10.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -32,4 +32,8 @@ export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
 export { ChartContainer } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
-export * from "./Toolbar/index.js";
+export * from "./Toolbar/index.js";
+export * from "./ChartsWrapper/index.js";
+
+// Locales should be imported from `@mui/x-charts/locales`
+// export * from './locales';

package/esm/internals/findMinMax.d.ts

@@ -0,0 +1 @@
+export declare function findMinMax(data: readonly number[]): [number, number];

package/esm/internals/findMinMax.js

@@ -0,0 +1,13 @@
+export function findMinMax(data) {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const value of data ?? []) {
+    if (value < min) {
+      min = value;
+    }
+    if (value > max) {
+      max = value;
+    }
+  }
+  return [min, max];
+}

package/esm/internals/getScale.d.ts

@@ -1,2 +1,2 @@
 import { ContinuousScaleName, D3ContinuousScale } from "../models/axis.js";
-export declare function getScale(scaleType: ContinuousScaleName, domain: any[], range: any[]): D3ContinuousScale;
+export declare function getScale(scaleType: ContinuousScaleName, domain: readonly any[], range: readonly any[]): D3ContinuousScale;

package/esm/internals/getScale.js

@@ -1,4 +1,5 @@
 import { scaleLog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleLinear } from '@mui/x-charts-vendor/d3-scale';
+import { scaleSymlog } from "./symlogScale.js";
 export function getScale(scaleType, domain, range) {
   switch (scaleType) {
     case 'log':
@@ -11,6 +12,8 @@ export function getScale(scaleType, domain, range) {
       return scaleTime(domain, range);
     case 'utc':
       return scaleUtc(domain, range);
+    case 'symlog':
+      return scaleSymlog(domain, range);
     default:
       return scaleLinear(domain, range);
   }

package/esm/internals/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./components/ChartsAxesGradients/index.js";
-export * from "./components/ChartsWrapper/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
 export * from "./components/NotRendered.js";
 export { useSeries } from "../hooks/useSeries.js";
@@ -54,6 +53,7 @@ export * from "./ticks.js";
 export * from "./dateHelpers.js";
 export * from "./invertScale.js";
 export * from "./isBandScale.js";
+export * from "./findMinMax.js";
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";

package/esm/internals/index.js

@@ -1,6 +1,5 @@
 // Components
 export * from "./components/ChartsAxesGradients/index.js";
-export * from "./components/ChartsWrapper/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
 export * from "./components/NotRendered.js";
 
@@ -64,6 +63,7 @@ export * from "./ticks.js";
 export * from "./dateHelpers.js";
 export * from "./invertScale.js";
 export * from "./isBandScale.js";
+export * from "./findMinMax.js";
 
 // contexts
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
 import { createScalarFormatter } from "../../../defaultValueFormatters.js";
-import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
+import { isBandScaleConfig, isPointScaleConfig, isSymlogScaleConfig } from "../../../../models/axis.js";
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
 import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
@@ -114,6 +114,9 @@ export function computeAxisValue({
     const tickNumber = scaleTickNumberByRange(rawTickNumber, zoomRange);
     const zoomedRange = zoomScaleRange(range, zoomRange);
     const scale = getScale(scaleType, axisExtremums, zoomedRange);
+    if (isSymlogScaleConfig(axis) && axis.constant != null) {
+      scale.constant(axis.constant);
+    }
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
     const [minDomain, maxDomain] = finalScale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];

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

@@ -1,4 +1,4 @@
-import { AxisId, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from "../../../../models/axis.js";
+import { AxisId, ChartsXAxisProps, ChartsYAxisProps, ContinuousScaleName, ScaleName } from "../../../../models/axis.js";
 import { CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
 import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
 import { AxisConfig } from "../../../../models/index.js";
@@ -19,4 +19,6 @@ export declare function createAxisFilterMapper(params: {
   formattedSeries: ProcessedSeries;
   direction: 'y';
 }): (axis: AxisConfig<ScaleName, any, ChartsYAxisProps>, axisIndex: number) => ExtremumFilter | null;
+export declare function createDiscreteScaleGetAxisFilter(axisData: AxisConfig['data'], zoomStart: number, zoomEnd: number, direction: 'x' | 'y'): ExtremumFilter;
+export declare function createContinuousScaleGetAxisFilter(scaleType: ContinuousScaleName | undefined, extrema: readonly [number, number], zoomStart: number, zoomEnd: number, direction: 'x' | 'y', axisData: AxisConfig['data']): ExtremumFilter;
 export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;

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

@@ -18,32 +18,41 @@ export function createAxisFilterMapper({
       // No zoom, or zoom with all data visible
       return null;
     }
-    let extremums = [];
     const scaleType = axis.scaleType;
     if (scaleType === 'point' || scaleType === 'band') {
-      extremums = [0, (axis.data?.length ?? 1) - 1];
-    } else {
-      extremums = getAxisExtremum(axis, direction, seriesConfig, axisIndex, formattedSeries);
+      return createDiscreteScaleGetAxisFilter(axis.data, zoom.start, zoom.end, direction);
     }
-    let min;
-    let max;
-    const continuousScaleType = !scaleType || scaleType === 'band' || scaleType === 'point' ? 'linear' : scaleType;
-    [min, max] = getScale(continuousScaleType, extremums, [0, 100]).nice().domain();
-    min = min instanceof Date ? min.getTime() : min;
-    max = max instanceof Date ? max.getTime() : max;
-    const minVal = min + zoom.start * (max - min) / 100;
-    const maxVal = min + zoom.end * (max - min) / 100;
-    return (value, dataIndex) => {
-      const val = value[direction] ?? axis.data?.[dataIndex];
-      if (val == null) {
-        // If the value does not exist because of missing data point, or out of range index, we just ignore.
-        return true;
-      }
-      if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
-        return dataIndex >= minVal && dataIndex <= maxVal;
-      }
-      return val >= minVal && val <= maxVal;
-    };
+    return createContinuousScaleGetAxisFilter(scaleType, getAxisExtremum(axis, direction, seriesConfig, axisIndex, formattedSeries), zoom.start, zoom.end, direction, axis.data);
+  };
+}
+export function createDiscreteScaleGetAxisFilter(axisData, zoomStart, zoomEnd, direction) {
+  const maxIndex = axisData?.length ?? 0;
+  const minVal = Math.floor(zoomStart * maxIndex / 100);
+  const maxVal = Math.ceil(zoomEnd * maxIndex / 100);
+  return function filterAxis(value, dataIndex) {
+    const val = value[direction] ?? axisData?.[dataIndex];
+    if (val == null) {
+      // If the value does not exist because of missing data point, or out of range index, we just ignore.
+      return true;
+    }
+    return dataIndex >= minVal && dataIndex < maxVal;
+  };
+}
+export function createContinuousScaleGetAxisFilter(scaleType, extrema, zoomStart, zoomEnd, direction, axisData) {
+  let min;
+  let max;
+  [min, max] = getScale(scaleType ?? 'linear', extrema, [0, 100]).nice().domain();
+  min = min instanceof Date ? min.getTime() : min;
+  max = max instanceof Date ? max.getTime() : max;
+  const minVal = min + zoomStart * (max - min) / 100;
+  const maxVal = min + zoomEnd * (max - min) / 100;
+  return function filterAxis(value, dataIndex) {
+    const val = value[direction] ?? axisData?.[dataIndex];
+    if (val == null) {
+      // If the value does not exist because of missing data point, or out of range index, we just ignore.
+      return true;
+    }
+    return val >= minVal && val <= maxVal;
   };
 }
 export const createGetAxisFilters = filters => ({

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

@@ -3,4 +3,4 @@ import { CartesianChartSeriesType } from "../../../../models/seriesType/config.j
 import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
 import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
 import { GetZoomAxisFilters } from "./zoom.types.js";
-export declare const getAxisExtremum: <T extends CartesianChartSeriesType>(axis: AxisConfig, axisDirection: "x" | "y", seriesConfig: ChartSeriesConfig<T>, axisIndex: number, formattedSeries: ProcessedSeries<T>, getFilters?: GetZoomAxisFilters) => number[];
+export declare const getAxisExtremum: <T extends CartesianChartSeriesType>(axis: AxisConfig, axisDirection: "x" | "y", seriesConfig: ChartSeriesConfig<T>, axisIndex: number, formattedSeries: ProcessedSeries<T>, getFilters?: GetZoomAxisFilters) => [number, number];

package/esm/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.js

@@ -67,22 +67,24 @@ export const useChartVoronoi = ({
       const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       const getXPosition = getValueToPositionMapper(xScale);
       const getYPosition = getValueToPositionMapper(yScale);
-      const seriesPoints = data.flatMap(({
-        x,
-        y
-      }) => {
+      const seriesPoints = [];
+      const seriesIndexes = [];
+      for (let dataIndex = 0; dataIndex < data.length; dataIndex += 1) {
+        const {
+          x,
+          y
+        } = data[dataIndex];
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!instance.isPointInside(pointX, pointY)) {
-          // If the point is not displayed we move them to a trash coordinate.
-          // This avoids managing index mapping before/after filtering.
-          // The trash point is far enough such that any point in the drawing area will be closer to the mouse than the trash coordinate.
-          return [-drawingArea.width, -drawingArea.height];
+        if (instance.isPointInside(pointX, pointY)) {
+          seriesPoints.push(pointX);
+          seriesPoints.push(pointY);
+          seriesIndexes.push(dataIndex);
         }
-        return [pointX, pointY];
-      });
+      }
       voronoiRef.current[seriesId] = {
         seriesId,
+        seriesIndexes,
         startIndex: points.length,
         endIndex: points.length + seriesPoints.length
       };
@@ -117,7 +119,10 @@ export const useChartVoronoi = ({
       if (closestSeries === undefined) {
         return 'no-point-found';
       }
-      const dataIndex = (2 * closestPointIndex - voronoiRef.current[closestSeries.seriesId].startIndex) / 2;
+
+      // 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 pointX = delauneyRef.current.points[2 * closestPointIndex];
         const pointY = delauneyRef.current.points[2 * closestPointIndex + 1];

package/esm/internals/symlogScale.d.ts

@@ -0,0 +1,2 @@
+import { NumberValue, ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
+export declare function scaleSymlog<Range, Output = Range, Unknown = never>(_domain: Iterable<NumberValue>, _range: Iterable<Range>): ScaleSymLog<Range, Output, Unknown>;