@mui/x-charts 8.18.0 → 8.20.0

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.18.0
+ * @mui/x-charts v8.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -379,4 +379,16 @@ Object.keys(_ChartsBrushOverlay).forEach(function (key) {
       return _ChartsBrushOverlay[key];
     }
   });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
 });

package/internals/domUtils.js

@@ -96,11 +96,7 @@ const getStringSize = (text, style = {}) => {
     });
     measurementElem.textContent = str;
     measurementSpanContainer.replaceChildren(measurementElem);
-    const rect = measurementElem.getBoundingClientRect();
-    const result = {
-      width: rect.width,
-      height: rect.height
-    };
+    const result = measureSVGTextElement(measurementElem);
     stringCache.set(cacheKey, result);
     if (stringCache.size + 1 > MAX_CACHE_NUM) {
       stringCache.clear();
@@ -145,21 +141,17 @@ function batchMeasureStrings(texts, style = {}) {
     measurementContainer.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, measurementSpanStyle[styleKey]);
     return styleKey;
   });
-  const measurementElems = [];
+  const measurementElements = [];
   for (const string of textToMeasure) {
     const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
     measurementElem.textContent = `${string}`;
-    measurementElems.push(measurementElem);
+    measurementElements.push(measurementElem);
   }
-  measurementContainer.replaceChildren(...measurementElems);
+  measurementContainer.replaceChildren(...measurementElements);
   for (let i = 0; i < textToMeasure.length; i += 1) {
     const text = textToMeasure[i];
-    const measurementSpan = measurementContainer.children[i];
-    const rect = measurementSpan.getBoundingClientRect();
-    const result = {
-      width: rect.width,
-      height: rect.height
-    };
+    const measurementElem = measurementContainer.children[i];
+    const result = measureSVGTextElement(measurementElem);
     const cacheKey = `${text}-${styleString}`;
     stringCache.set(cacheKey, result);
     sizeMap.set(text, result);
@@ -173,6 +165,30 @@ function batchMeasureStrings(texts, style = {}) {
   }
   return sizeMap;
 }
+
+/**
+ * Measures an SVG text element using getBBox() with fallback to getBoundingClientRect()
+ * @param element SVG text element to measure
+ * @returns width and height of the text element
+ */
+function measureSVGTextElement(element) {
+  // getBBox() is more reliable across browsers for SVG elements
+  try {
+    const result = element.getBBox();
+    return {
+      width: result.width,
+      height: result.height
+    };
+  } catch {
+    // Fallback to getBoundingClientRect if getBBox fails
+    // This can happen in tests
+    const result = element.getBoundingClientRect();
+    return {
+      width: result.width,
+      height: result.height
+    };
+  }
+}
 let measurementContainer = null;
 
 /**

package/internals/getScale.d.ts

@@ -1,2 +1,3 @@
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { ContinuousScaleName, D3ContinuousScale } from "../models/axis.js";
-export declare function getScale(scaleType: ContinuousScaleName, domain: readonly any[], range: readonly any[]): D3ContinuousScale;
+export declare function getScale<Domain extends NumberValue = any, Range = any>(scaleType: ContinuousScaleName, domain: Iterable<Domain>, range: readonly Range[]): D3ContinuousScale<Range, Range>;

package/internals/index.d.ts

@@ -15,7 +15,7 @@ export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
-export * from "./createSeriesSelectorOfType.js";
+export * from "./seriesSelectorOfType.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";

package/internals/index.js

@@ -182,15 +182,15 @@ Object.keys(_useChartDataProviderProps).forEach(function (key) {
     }
   });
 });
-var _createSeriesSelectorOfType = require("./createSeriesSelectorOfType");
-Object.keys(_createSeriesSelectorOfType).forEach(function (key) {
+var _seriesSelectorOfType = require("./seriesSelectorOfType");
+Object.keys(_seriesSelectorOfType).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _createSeriesSelectorOfType[key]) return;
+  if (key in exports && exports[key] === _seriesSelectorOfType[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _createSeriesSelectorOfType[key];
+      return _seriesSelectorOfType[key];
     }
   });
 });

package/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorChartSkipAnimation = void 0;
-var _selectors = require("../../utils/selectors");
+var _store = require("@mui/x-internals/store");
 const selectorChartAnimationState = state => state.animation;
-const selectorChartSkipAnimation = exports.selectorChartSkipAnimation = (0, _selectors.createSelector)([selectorChartAnimationState], state => state.skip || state.skipAnimationRequests > 0);
+const selectorChartSkipAnimation = exports.selectorChartSkipAnimation = (0, _store.createSelector)(selectorChartAnimationState, state => state.skip || state.skipAnimationRequests > 0);

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.selectorChartSvgWidth = exports.selectorChartSvgHeight = exports.selectorChartPropsWidth = exports.selectorChartPropsHeight = exports.selectorChartMargin = exports.selectorChartDrawingArea = exports.selectorChartDimensionsState = void 0;
 var _store = require("@mui/x-internals/store");
-var _selectors = require("../../utils/selectors");
 var _useChartAxisSize = require("../../featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors");
 const selectorChartDimensionsState = state => state.dimensions;
 exports.selectorChartDimensionsState = selectorChartDimensionsState;
@@ -34,7 +33,7 @@ const selectorChartDrawingArea = exports.selectorChartDrawingArea = (0, _store.c
     bottom: marginBottom + axisSizeBottom
   };
 });
-const selectorChartSvgWidth = exports.selectorChartSvgWidth = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.width);
-const selectorChartSvgHeight = exports.selectorChartSvgHeight = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.height);
-const selectorChartPropsWidth = exports.selectorChartPropsWidth = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.propsWidth);
-const selectorChartPropsHeight = exports.selectorChartPropsHeight = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.propsHeight);
+const selectorChartSvgWidth = exports.selectorChartSvgWidth = (0, _store.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.width);
+const selectorChartSvgHeight = exports.selectorChartSvgHeight = (0, _store.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.height);
+const selectorChartPropsWidth = exports.selectorChartPropsWidth = (0, _store.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.propsWidth);
+const selectorChartPropsHeight = exports.selectorChartPropsHeight = (0, _store.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.propsHeight);

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorPreferStrictDomainInLineCharts = exports.selectorChartExperimentalFeaturesState = void 0;
-var _selectors = require("../../utils/selectors");
+var _store = require("@mui/x-internals/store");
 const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;
 exports.selectorChartExperimentalFeaturesState = selectorChartExperimentalFeaturesState;
-const selectorPreferStrictDomainInLineCharts = exports.selectorPreferStrictDomainInLineCharts = (0, _selectors.createSelector)([selectorChartExperimentalFeaturesState], features => Boolean(features?.preferStrictDomainInLineCharts));
+const selectorPreferStrictDomainInLineCharts = exports.selectorPreferStrictDomainInLineCharts = (0, _store.createSelector)(selectorChartExperimentalFeaturesState, features => Boolean(features?.preferStrictDomainInLineCharts));

package/internals/plugins/corePlugins/useChartId/useChartId.selectors.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorChartId = void 0;
-var _selectors = require("../../utils/selectors");
+var _store = require("@mui/x-internals/store");
 const selectorChartIdState = state => state.id;
 
 /**
@@ -12,4 +12,4 @@ const selectorChartIdState = state => state.id;
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-const selectorChartId = exports.selectorChartId = (0, _selectors.createSelector)([selectorChartIdState], idState => idState.chartId);
+const selectorChartId = exports.selectorChartId = (0, _store.createSelector)(selectorChartIdState, idState => idState.chartId);

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -50,6 +50,9 @@ const useChartInteractionListener = ({
           name: 'zoomTurnWheel',
           sensitivity: 0.01,
           initialDelta: 1
+        }), new _core.TurnWheelGesture({
+          name: 'panTurnWheel',
+          sensitivity: 0.5
         }), new _core.TapAndDragGesture({
           name: 'zoomTapAndDrag',
           dragThreshold: 10
@@ -69,7 +72,7 @@ const useChartInteractionListener = ({
     if (!svg || !gestureManager) {
       return undefined;
     }
-    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag', 'zoomPressAndDrag', 'zoomDoubleTapReset', 'brush'], svg);
+    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'panTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag', 'zoomPressAndDrag', 'zoomDoubleTapReset', 'brush'], svg);
     return () => {
       // Cleanup gesture manager
       gestureManager.unregisterAllGestures(svg);

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.types.d.ts

@@ -1,6 +1,6 @@
 import { MoveEvent, PanEvent, PanGestureOptions, PinchEvent, PinchGestureOptions, PressEvent, TapEvent, TurnWheelEvent, type PressAndDragEvent, type PressAndDragGestureOptions, type TapAndDragEvent, type TapAndDragGestureOptions, type TapGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
 import { ChartPluginSignature } from "../../models/index.js";
-export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'zoomTurnWheel' | 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd' | 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd' | 'move' | 'moveStart' | 'moveEnd' | 'tap' | 'quickPress' | 'quickPressEnd' | 'zoomDoubleTapReset' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd';
+export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'zoomTurnWheel' | 'panTurnWheel' | 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd' | 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd' | 'move' | 'moveStart' | 'moveEnd' | 'tap' | 'quickPress' | 'quickPressEnd' | 'zoomDoubleTapReset' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd';
 export type InteractionListenerResult = {
   cleanup: () => void;
 };
@@ -8,6 +8,7 @@ export type AddInteractionListener = {
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTurnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'panTurnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'move' | 'moveStart' | 'moveEnd', callback: (event: MoveEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'tap' | 'zoomDoubleTapReset', callback: (event: TapEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'quickPress' | 'quickPressEnd', callback: (event: PressEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
@@ -18,6 +19,7 @@ export type UpdateZoomInteractionListeners = {
   (interaction: 'zoomPan', options?: Omit<PanGestureOptions<'zoomPan'>, 'name'>): void;
   (interaction: 'zoomPinch', options?: Omit<PinchGestureOptions<'zoomPinch'>, 'name'>): void;
   (interaction: 'zoomTurnWheel', options?: Omit<TurnWheelGestureOptions<'zoomTurnWheel'>, 'name'>): void;
+  (interaction: 'panTurnWheel', options?: Omit<TurnWheelGestureOptions<'panTurnWheel'>, 'name'>): void;
   (interaction: 'zoomTapAndDrag', options?: Omit<TapAndDragGestureOptions<'zoomTapAndDrag'>, 'name'>): void;
   (interaction: 'zoomPressAndDrag', options?: Omit<PressAndDragGestureOptions<'zoomPressAndDrag'>, 'name'>): void;
   (interaction: 'zoomDoubleTapReset', options?: Omit<TapGestureOptions<'zoomDoubleTapReset'>, 'name'>): void;

package/internals/plugins/corePlugins/useChartSeries/processSeries.d.ts

@@ -1,23 +1,29 @@
 import { AllSeriesType } from "../../../../models/seriesType/index.js";
 import { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
 import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
-import { SeriesProcessorResult } from "../../models/seriesConfig/seriesProcessor.types.js";
+import { DefaultizedSeriesGroups, ProcessedSeries } from "./useChartSeries.types.js";
 /**
- * This methods is the interface between what the developer is providing and what components receives
- * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
- * It also add defaultized values such as the ids, colors
+ * This method groups series by type and adds defaultized values such as the ids and colors.
+ * It does NOT apply the series processors - that happens in a selector.
  * @param series The array of series provided by the developer
  * @param colors The color palette used to defaultize series colors
- * @returns An object structuring all the series by type.
+ * @returns An object structuring all the series by type with default values.
  */
-export declare const preprocessSeries: <TSeriesType extends ChartSeriesType>({
+export declare const defaultizeSeries: <TSeriesType extends ChartSeriesType>({
   series,
   colors,
-  seriesConfig,
-  dataset
+  seriesConfig
 }: {
   series: Readonly<AllSeriesType<TSeriesType>[]>;
   colors: readonly string[];
   seriesConfig: ChartSeriesConfig<TSeriesType>;
-  dataset?: Readonly<DatasetType>;
-}) => { [type in TSeriesType]?: SeriesProcessorResult<TSeriesType> | undefined };
+}) => DefaultizedSeriesGroups<TSeriesType>;
+/**
+ * Applies series processors to the defaultized series groups.
+ * This should be called in a selector to compute processed series on-demand.
+ * @param defaultizedSeries The defaultized series groups
+ * @param seriesConfig The series configuration
+ * @param dataset The optional dataset
+ * @returns Processed series with all transformations applied
+ */
+export declare const applySeriesProcessors: <TSeriesType extends ChartSeriesType>(defaultizedSeries: DefaultizedSeriesGroups<TSeriesType>, seriesConfig: ChartSeriesConfig<TSeriesType>, dataset?: Readonly<DatasetType>) => ProcessedSeries<TSeriesType>;

package/internals/plugins/corePlugins/useChartSeries/processSeries.js

@@ -3,26 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.preprocessSeries = void 0;
+exports.defaultizeSeries = exports.applySeriesProcessors = void 0;
 /**
- * This methods is the interface between what the developer is providing and what components receives
- * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
- * It also add defaultized values such as the ids, colors
+ * This method groups series by type and adds defaultized values such as the ids and colors.
+ * It does NOT apply the series processors - that happens in a selector.
  * @param series The array of series provided by the developer
  * @param colors The color palette used to defaultize series colors
- * @returns An object structuring all the series by type.
+ * @returns An object structuring all the series by type with default values.
  */
-const preprocessSeries = ({
+const defaultizeSeries = ({
   series,
   colors,
-  seriesConfig,
-  dataset
+  seriesConfig
 }) => {
   // Group series by type
   const seriesGroups = {};
-  // Notice the line about uses `ChartSeriesType` instead of TSeriesType.
-  // That's probably because the series.type is not propagated from the generic but hardcoded in the config.
-
   series.forEach((seriesData, seriesIndex) => {
     const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors);
     const id = seriesWithDefaultValues.id;
@@ -38,14 +33,28 @@ const preprocessSeries = ({
     seriesGroups[seriesData.type].series[id] = seriesWithDefaultValues;
     seriesGroups[seriesData.type].seriesOrder.push(id);
   });
+  return seriesGroups;
+};
+
+/**
+ * Applies series processors to the defaultized series groups.
+ * This should be called in a selector to compute processed series on-demand.
+ * @param defaultizedSeries The defaultized series groups
+ * @param seriesConfig The series configuration
+ * @param dataset The optional dataset
+ * @returns Processed series with all transformations applied
+ */
+exports.defaultizeSeries = defaultizeSeries;
+const applySeriesProcessors = (defaultizedSeries, seriesConfig, dataset) => {
   const processedSeries = {};
+
   // Apply formatter on a type group
   Object.keys(seriesConfig).forEach(type => {
-    const group = seriesGroups[type];
+    const group = defaultizedSeries[type];
     if (group !== undefined) {
-      processedSeries[type] = seriesConfig[type]?.seriesProcessor?.(group, dataset) ?? seriesGroups[type];
+      processedSeries[type] = seriesConfig[type]?.seriesProcessor?.(group, dataset) ?? group;
     }
   });
   return processedSeries;
 };
-exports.preprocessSeries = preprocessSeries;
+exports.applySeriesProcessors = applySeriesProcessors;

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -32,11 +32,10 @@ const useChartSeries = ({
       return;
     }
     store.set('series', (0, _extends2.default)({}, store.state.series, {
-      processedSeries: (0, _processSeries.preprocessSeries)({
+      defaultizedSeries: (0, _processSeries.defaultizeSeries)({
         series,
         colors: typeof colors === 'function' ? colors(theme) : colors,
-        seriesConfig,
-        dataset
+        seriesConfig
       }),
       dataset
     }));
@@ -67,11 +66,10 @@ useChartSeries.getInitialState = ({
   return {
     series: {
       seriesConfig,
-      processedSeries: (0, _processSeries.preprocessSeries)({
+      defaultizedSeries: (0, _processSeries.defaultizeSeries)({
         series,
         colors: typeof colors === 'function' ? colors(theme) : colors,
-        seriesConfig,
-        dataset
+        seriesConfig
       }),
       dataset
     }

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -1,17 +1,24 @@
 import { ChartRootSelector } from "../../utils/selectors.js";
 import { UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
-export declare const selectorChartSeriesProcessed: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartDefaultizedSeries: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
+}) => import("./useChartSeries.types.js").DefaultizedSeriesGroups<keyof import("../../../index.js").ChartsSeriesConfig>;
 export declare const selectorChartSeriesConfig: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>;
 /**
  * Get the dataset from the series state.
- * @param {ChartState<[UseChartSeriesSignature]>} state The state of the chart.
  * @returns {DatasetType | undefined} The dataset.
  */
 export declare const selectorChartDataset: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => readonly import("../../../index.js").DatasetElementType<string | number | Date | null | undefined>[] | undefined;
+}) => readonly import("../../../index.js").DatasetElementType<unknown>[] | undefined;
+/**
+ * Get the processed series after applying series processors.
+ * This selector computes the processed series on-demand from the defaultized series.
+ * @returns {ProcessedSeries} The processed series.
+ */
+export declare const selectorChartSeriesProcessed: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js

@@ -3,16 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartSeriesState = exports.selectorChartSeriesProcessed = exports.selectorChartSeriesConfig = exports.selectorChartDataset = void 0;
-var _selectors = require("../../utils/selectors");
+exports.selectorChartSeriesState = exports.selectorChartSeriesProcessed = exports.selectorChartSeriesConfig = exports.selectorChartDefaultizedSeries = exports.selectorChartDataset = void 0;
+var _store = require("@mui/x-internals/store");
+var _processSeries = require("./processSeries");
 const selectorChartSeriesState = state => state.series;
 exports.selectorChartSeriesState = selectorChartSeriesState;
-const selectorChartSeriesProcessed = exports.selectorChartSeriesProcessed = (0, _selectors.createSelector)([selectorChartSeriesState], seriesState => seriesState.processedSeries);
-const selectorChartSeriesConfig = exports.selectorChartSeriesConfig = (0, _selectors.createSelector)([selectorChartSeriesState], seriesState => seriesState.seriesConfig);
+const selectorChartDefaultizedSeries = exports.selectorChartDefaultizedSeries = (0, _store.createSelector)(selectorChartSeriesState, seriesState => seriesState.defaultizedSeries);
+const selectorChartSeriesConfig = exports.selectorChartSeriesConfig = (0, _store.createSelector)(selectorChartSeriesState, seriesState => seriesState.seriesConfig);
 
 /**
  * Get the dataset from the series state.
- * @param {ChartState<[UseChartSeriesSignature]>} state The state of the chart.
  * @returns {DatasetType | undefined} The dataset.
  */
-const selectorChartDataset = exports.selectorChartDataset = (0, _selectors.createSelector)([selectorChartSeriesState], seriesState => seriesState.dataset);
+const selectorChartDataset = exports.selectorChartDataset = (0, _store.createSelector)(selectorChartSeriesState, seriesState => seriesState.dataset);
+
+/**
+ * Get the processed series after applying series processors.
+ * This selector computes the processed series on-demand from the defaultized series.
+ * @returns {ProcessedSeries} The processed series.
+ */
+const selectorChartSeriesProcessed = exports.selectorChartSeriesProcessed = (0, _store.createSelectorMemoized)(selectorChartDefaultizedSeries, selectorChartSeriesConfig, selectorChartDataset, function selectorChartSeriesProcessed(defaultizedSeries, seriesConfig, dataset) {
+  return (0, _processSeries.applySeriesProcessors)(defaultizedSeries, seriesConfig, dataset);
+});

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.d.ts

@@ -2,7 +2,7 @@ import { AllSeriesType } from "../../../../models/seriesType/index.js";
 import { ChartsColorPalette } from "../../../../colorPalettes/index.js";
 import { ChartPluginSignature, ChartSeriesConfig } from "../../models/index.js";
 import { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
-import { SeriesProcessorResult } from "../../models/seriesConfig/seriesProcessor.types.js";
+import { SeriesProcessorParams, SeriesProcessorResult } from "../../models/seriesConfig/seriesProcessor.types.js";
 export interface UseChartSeriesParameters<T extends ChartSeriesType = ChartSeriesType> {
   /**
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
@@ -36,9 +36,10 @@ export type UseChartSeriesDefaultizedParameters<T extends ChartSeriesType = Char
   theme: 'light' | 'dark';
 };
 export type ProcessedSeries<TSeriesTypes extends ChartSeriesType = ChartSeriesType> = { [type in TSeriesTypes]?: SeriesProcessorResult<type> };
+export type DefaultizedSeriesGroups<TSeriesTypes extends ChartSeriesType = ChartSeriesType> = { [type in TSeriesTypes]?: SeriesProcessorParams<type> };
 export interface UseChartSeriesState<T extends ChartSeriesType = ChartSeriesType> {
   series: {
-    processedSeries: ProcessedSeries<T>;
+    defaultizedSeries: DefaultizedSeriesGroups<T>;
     seriesConfig: ChartSeriesConfig<T>;
     dataset?: Readonly<DatasetType>;
   };

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

@@ -1,4 +1,4 @@
-import { type ChartOptionalRootSelector } from "../../utils/selectors.js";
+import type { ChartOptionalRootSelector } from "../../utils/selectors.js";
 import type { UseChartBrushSignature } from "./useChartBrush.types.js";
 export declare const selectorBrush: ChartOptionalRootSelector<UseChartBrushSignature>;
 export declare const selectorBrushStart: (args_0: 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("./useChartBrush.types.js").UseChartBrushState> & {

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

@@ -4,18 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorIsBrushSelectionActive = exports.selectorIsBrushEnabled = exports.selectorBrushState = exports.selectorBrushStartY = exports.selectorBrushStartX = exports.selectorBrushStart = exports.selectorBrushShouldPreventTooltip = exports.selectorBrushShouldPreventAxisHighlight = exports.selectorBrushCurrentY = exports.selectorBrushCurrentX = exports.selectorBrushCurrent = exports.selectorBrushConfigZoom = exports.selectorBrushConfigNoZoom = exports.selectorBrushConfig = exports.selectorBrush = void 0;
-var _selectors = require("../../utils/selectors");
+var _store = require("@mui/x-internals/store");
 var _useChartCartesianAxisRendering = require("../useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
 const selectorBrush = state => state.brush;
 exports.selectorBrush = selectorBrush;
-const selectorBrushStart = exports.selectorBrushStart = (0, _selectors.createSelector)([selectorBrush], brush => brush?.start);
-const selectorBrushCurrent = exports.selectorBrushCurrent = (0, _selectors.createSelector)([selectorBrush], brush => brush?.current);
-const selectorBrushStartX = exports.selectorBrushStartX = (0, _selectors.createSelector)([selectorBrush], brush => brush?.start?.x ?? null);
-const selectorBrushStartY = exports.selectorBrushStartY = (0, _selectors.createSelector)([selectorBrush], brush => brush?.start?.y ?? null);
-const selectorBrushCurrentX = exports.selectorBrushCurrentX = (0, _selectors.createSelector)([selectorBrush], brush => brush?.current?.x ?? null);
-const selectorBrushCurrentY = exports.selectorBrushCurrentY = (0, _selectors.createSelector)([selectorBrush], brush => brush?.current?.y ?? null);
-const selectorBrushState = exports.selectorBrushState = (0, _selectors.createSelector)([selectorBrushStartX, selectorBrushStartY, selectorBrushCurrentX, selectorBrushCurrentY], (startX, startY, currentX, currentY) => {
+const selectorBrushStart = exports.selectorBrushStart = (0, _store.createSelector)(selectorBrush, brush => brush?.start);
+const selectorBrushCurrent = exports.selectorBrushCurrent = (0, _store.createSelector)(selectorBrush, brush => brush?.current);
+const selectorBrushStartX = exports.selectorBrushStartX = (0, _store.createSelector)(selectorBrush, brush => brush?.start?.x ?? null);
+const selectorBrushStartY = exports.selectorBrushStartY = (0, _store.createSelector)(selectorBrush, brush => brush?.start?.y ?? null);
+const selectorBrushCurrentX = exports.selectorBrushCurrentX = (0, _store.createSelector)(selectorBrush, brush => brush?.current?.x ?? null);
+const selectorBrushCurrentY = exports.selectorBrushCurrentY = (0, _store.createSelector)(selectorBrush, brush => brush?.current?.y ?? null);
+const selectorBrushState = exports.selectorBrushState = (0, _store.createSelector)(selectorBrushStartX, selectorBrushStartY, selectorBrushCurrentX, selectorBrushCurrentY, (startX, startY, currentX, currentY) => {
   if (startX === null || startY === null || currentX === null || currentY === null) {
     return null;
   }
@@ -30,7 +30,7 @@ const selectorBrushState = exports.selectorBrushState = (0, _selectors.createSel
     }
   };
 });
-const selectorBrushConfigNoZoom = exports.selectorBrushConfigNoZoom = (0, _selectors.createSelector)([_useChartSeries.selectorChartSeriesProcessed], series => {
+const selectorBrushConfigNoZoom = exports.selectorBrushConfigNoZoom = (0, _store.createSelector)(_useChartSeries.selectorChartSeriesProcessed, series => {
   let hasHorizontal = false;
   let isBothDirections = false;
   if (series) {
@@ -51,7 +51,7 @@ const selectorBrushConfigNoZoom = exports.selectorBrushConfigNoZoom = (0, _selec
   }
   return 'x';
 });
-const selectorBrushConfigZoom = exports.selectorBrushConfigZoom = (0, _selectors.createSelector)([_useChartCartesianAxisRendering.selectorChartZoomOptionsLookup], function selectorBrushConfigZoom(optionsLookup) {
+const selectorBrushConfigZoom = exports.selectorBrushConfigZoom = (0, _store.createSelector)(_useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, function selectorBrushConfigZoom(optionsLookup) {
   let hasX = false;
   let hasY = false;
   Object.values(optionsLookup).forEach(options => {
@@ -73,10 +73,10 @@ const selectorBrushConfigZoom = exports.selectorBrushConfigZoom = (0, _selectors
   }
   return null;
 });
-const selectorBrushConfig = exports.selectorBrushConfig = (0, _selectors.createSelector)([selectorBrushConfigNoZoom, selectorBrushConfigZoom], (configNoZoom, configZoom) => configZoom ?? configNoZoom);
-const selectorIsBrushEnabled = exports.selectorIsBrushEnabled = (0, _selectors.createSelector)([selectorBrush], brush => brush?.enabled || brush?.isZoomBrushEnabled);
-const selectorIsBrushSelectionActive = exports.selectorIsBrushSelectionActive = (0, _selectors.createSelector)([selectorIsBrushEnabled, selectorBrush], (isBrushEnabled, brush) => {
+const selectorBrushConfig = exports.selectorBrushConfig = (0, _store.createSelector)(selectorBrushConfigNoZoom, selectorBrushConfigZoom, (configNoZoom, configZoom) => configZoom ?? configNoZoom);
+const selectorIsBrushEnabled = exports.selectorIsBrushEnabled = (0, _store.createSelector)(selectorBrush, brush => brush?.enabled || brush?.isZoomBrushEnabled);
+const selectorIsBrushSelectionActive = exports.selectorIsBrushSelectionActive = (0, _store.createSelector)(selectorIsBrushEnabled, selectorBrush, (isBrushEnabled, brush) => {
   return isBrushEnabled && brush?.start !== null && brush?.current !== null;
 });
-const selectorBrushShouldPreventAxisHighlight = exports.selectorBrushShouldPreventAxisHighlight = (0, _selectors.createSelector)([selectorBrush, selectorIsBrushSelectionActive], (brush, isBrushSelectionActive) => isBrushSelectionActive && brush?.preventHighlight);
-const selectorBrushShouldPreventTooltip = exports.selectorBrushShouldPreventTooltip = (0, _selectors.createSelector)([selectorBrush, selectorIsBrushSelectionActive], (brush, isBrushSelectionActive) => isBrushSelectionActive && brush?.preventTooltip);
+const selectorBrushShouldPreventAxisHighlight = exports.selectorBrushShouldPreventAxisHighlight = (0, _store.createSelector)(selectorBrush, selectorIsBrushSelectionActive, (brush, isBrushSelectionActive) => isBrushSelectionActive && brush?.preventHighlight);
+const selectorBrushShouldPreventTooltip = exports.selectorBrushShouldPreventTooltip = (0, _store.createSelector)(selectorBrush, selectorIsBrushSelectionActive, (brush, isBrushSelectionActive) => isBrushSelectionActive && brush?.preventTooltip);

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.ts

@@ -72,7 +72,7 @@ export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slid
 }
 export interface UseChartCartesianAxisState {
   /**
-   * @ignore - state populated by the useChartProZoomPlugin
+   * @ignore - state populated by the useChartProZoom plugin
    */
   zoom?: {
     isInteracting: boolean;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorChartPreviewYScales = exports.selectorChartPreviewXScales = exports.selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedXAxis = void 0;
-var _selectors = require("../../utils/selectors");
+var _store = require("@mui/x-internals/store");
 var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
 var _computeAxisValue = require("./computeAxisValue");
@@ -31,7 +31,7 @@ function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
     bottom: mainChartDrawingArea.height
   };
 }
-const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartNormalizedXScales], function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, normalizedXScales, axisId) {
+const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _store.createSelector)(_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartNormalizedXScales, function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, normalizedXScales, axisId) {
   const hasAxis = xAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
   const options = zoomOptions[axisId];
@@ -46,7 +46,7 @@ const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _s
   });
   return scales;
 });
-const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXAxis = (0, _selectors.createSelector)([_useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartDimensions.selectorChartDrawingArea, selectorChartPreviewXScales, _useChartCartesianAxisRendering.selectorChartXAxisWithDomains], (formattedSeries, seriesConfig, zoomOptions, chartDrawingArea, scales, {
+const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXAxis = (0, _store.createSelector)(_useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartDimensions.selectorChartDrawingArea, selectorChartPreviewXScales, _useChartCartesianAxisRendering.selectorChartXAxisWithDomains, (formattedSeries, seriesConfig, zoomOptions, chartDrawingArea, scales, {
   axes,
   domains
 }, axisId) => {
@@ -75,7 +75,7 @@ const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXA
   }
   return computedAxes.axis;
 });
-const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartNormalizedYScales], function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, normalizedYScales, axisId) {
+const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _store.createSelector)(_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartNormalizedYScales, function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, normalizedYScales, axisId) {
   const hasAxis = yAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
   const options = zoomOptions[axisId];
@@ -93,7 +93,7 @@ const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _s
   });
   return scales;
 });
-const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYAxis = (0, _selectors.createSelector)([_useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartDimensions.selectorChartDrawingArea, selectorChartPreviewYScales, _useChartCartesianAxisRendering.selectorChartYAxisWithDomains], (formattedSeries, seriesConfig, zoomOptions, chartDrawingArea, scales, {
+const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYAxis = (0, _store.createSelector)(_useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartDimensions.selectorChartDrawingArea, selectorChartPreviewYScales, _useChartCartesianAxisRendering.selectorChartYAxisWithDomains, (formattedSeries, seriesConfig, zoomOptions, chartDrawingArea, scales, {
   axes,
   domains
 }, axisId) => {

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

@@ -4,6 +4,9 @@ import { AxisId, D3Scale } from "../../../../models/axis.js";
 import { SeriesId } from "../../../../models/seriesType/common.js";
 import { Flatbush } from "../../../Flatbush.js";
 export declare const createZoomMap: (zoom: readonly ZoomData[]) => Map<AxisId, ZoomData>;
+export declare const selectorChartHasZoom: (args_0: 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;
+}) => boolean;
 /**
  * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
  */