@mui/x-charts 8.19.0 → 8.21.0

package/hooks/useTicks.d.ts

@@ -39,6 +39,11 @@ export interface TickParams {
    * @default 'middle'
    */
   tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
 }
 export type TickItemType = {
   /**
@@ -49,13 +54,21 @@ export type TickItemType = {
   offset: number;
   labelOffset: number;
 };
+/**
+ * Returns a new domain where each tick is at least {@link tickSpacing}px from the next one.
+ * Assumes tick spacing is greater than 0.
+ * @param domain Domain of the scale.
+ * @param range Range of the scale.
+ * @param tickSpacing Spacing in pixels.
+ */
+export declare function applyTickSpacing<T>(domain: T[], range: [number, number], tickSpacing: number): T[];
 export declare function getTicks(options: {
   scale: D3Scale;
   valueFormatter?: AxisConfig['valueFormatter'];
   isInside: (offset: number) => boolean;
-} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];
+} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement' | 'tickSpacing'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];
 export declare function useTicks(options: {
   scale: D3Scale;
   valueFormatter?: AxisConfig['valueFormatter'];
   direction: 'x' | 'y';
-} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];
+} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement' | 'tickSpacing'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];

package/hooks/useTicks.js

@@ -5,6 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.applyTickSpacing = applyTickSpacing;
 exports.getTicks = getTicks;
 exports.useTicks = useTicks;
 var React = _interopRequireWildcard(require("react"));
@@ -17,6 +18,25 @@ const offsetRatio = {
   end: 1,
   middle: 0.5
 };
+function getTickPosition(scale, value, placement) {
+  return scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[placement] * scale.step();
+}
+
+/**
+ * Returns a new domain where each tick is at least {@link tickSpacing}px from the next one.
+ * Assumes tick spacing is greater than 0.
+ * @param domain Domain of the scale.
+ * @param range Range of the scale.
+ * @param tickSpacing Spacing in pixels.
+ */
+function applyTickSpacing(domain, range, tickSpacing) {
+  const rangeSpan = Math.abs(range[1] - range[0]);
+  const every = Math.ceil(domain.length / (rangeSpan / tickSpacing));
+  if (Number.isNaN(every) || every <= 1) {
+    return domain;
+  }
+  return domain.filter((_, index) => index % every === 0);
+}
 function getTicks(options) {
   const {
     scale,
@@ -25,6 +45,7 @@ function getTicks(options) {
     tickInterval,
     tickPlacement = 'extremities',
     tickLabelPlacement: tickLabelPlacementProp,
+    tickSpacing,
     isInside
   } = options;
 
@@ -32,10 +53,27 @@ function getTicks(options) {
   if ((0, _scaleGuards.isOrdinalScale)(scale)) {
     const domain = scale.domain();
     const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
+    let filteredDomain = domain;
+    if (typeof tickInterval === 'object' && tickInterval != null) {
+      filteredDomain = tickInterval;
+    } else {
+      if (typeof tickInterval === 'function') {
+        filteredDomain = filteredDomain.filter(tickInterval);
+      }
+      if (tickSpacing !== undefined && tickSpacing > 0) {
+        filteredDomain = applyTickSpacing(filteredDomain, scale.range(), tickSpacing);
+      }
+    }
     if (scale.bandwidth() > 0) {
       // scale type = 'band'
-      const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
-      return [...filteredDomain.map(value => {
+
+      const isReversed = scale.range()[0] > scale.range()[1];
+      // Indexes are inclusive regarding the entire band.
+      const startIndex = filteredDomain.findIndex(value => {
+        return isInside(getTickPosition(scale, value, isReversed ? 'start' : 'end'));
+      });
+      const endIndex = filteredDomain.findLastIndex(value => isInside(getTickPosition(scale, value, isReversed ? 'end' : 'start')));
+      return [...filteredDomain.slice(startIndex, endIndex + 1).map(value => {
         const defaultTickLabel = `${value}`;
         return {
           value,
@@ -45,10 +83,10 @@ function getTicks(options) {
             tickNumber,
             defaultTickLabel
           }) ?? defaultTickLabel,
-          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step(),
+          offset: getTickPosition(scale, value, tickPlacement),
           labelOffset: tickLabelPlacement === 'tick' ? 0 : scale.step() * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement])
         };
-      }), ...(tickPlacement === 'extremities' ? [{
+      }), ...(tickPlacement === 'extremities' && endIndex === domain.length - 1 && isInside(scale.range()[1]) ? [{
         formattedValue: undefined,
         offset: scale.range()[1],
         labelOffset: 0
@@ -56,7 +94,6 @@ function getTicks(options) {
     }
 
     // scale type = 'point'
-    const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
     return filteredDomain.map(value => {
       const defaultTickLabel = `${value}`;
       return {
@@ -124,6 +161,7 @@ function useTicks(options) {
     tickInterval,
     tickPlacement = 'extremities',
     tickLabelPlacement,
+    tickSpacing,
     direction
   } = options;
   const {
@@ -136,7 +174,8 @@ function useTicks(options) {
     tickPlacement,
     tickInterval,
     tickLabelPlacement,
+    tickSpacing,
     valueFormatter,
     isInside
-  }), [scale, tickNumber, tickPlacement, tickInterval, tickLabelPlacement, valueFormatter, isInside]);
+  }), [scale, tickNumber, tickPlacement, tickInterval, tickLabelPlacement, tickSpacing, valueFormatter, isInside]);
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.19.0
+ * @mui/x-charts v8.21.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/domUtils.d.ts

@@ -1,22 +1,25 @@
 import * as React from 'react';
+export interface SVGCSSProperties extends Omit<React.CSSProperties, 'dominantBaseline'> {
+  dominantBaseline?: React.SVGAttributes<SVGTextElement>['dominantBaseline'];
+}
 export declare function clearStringMeasurementCache(): void;
 /**
  * Converts a style object into a string to be used as a cache key
  * @param style React style object
  * @returns CSS styling string
  */
-export declare function getStyleString(style: React.CSSProperties): string;
+export declare function getStyleString(style: SVGCSSProperties): string;
 /**
  *
  * @param text The string to estimate
  * @param style The style applied
  * @returns width and height of the text
  */
-export declare const getStringSize: (text: string | number, style?: React.CSSProperties) => {
+export declare const getStringSize: (text: string | number, style?: SVGCSSProperties) => {
   width: number;
   height: number;
 };
-export declare function batchMeasureStrings(texts: Iterable<string | number>, style?: React.CSSProperties): Map<string | number, {
+export declare function batchMeasureStrings(texts: Iterable<string | number>, style?: SVGCSSProperties): Map<string | number, {
   width: number;
   height: number;
 }>;

package/internals/getBandSize.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Solution of the equations
+ * W = barWidth * N + offset * (N-1)
+ * offset / (offset + barWidth) = r
+ * @param bandWidth (W) The width available to place bars.
+ * @param groupCount (N) The number of bars to place in that space.
+ * @param gapRatio (r) The ratio of the gap between bars over the bar width.
+ * @returns The bar width and the offset between bars.
+ */
+export declare function getBandSize(bandWidth: number, groupCount: number, gapRatio: number): {
+  barWidth: number;
+  offset: number;
+};

package/internals/getBandSize.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBandSize = getBandSize;
+/**
+ * Solution of the equations
+ * W = barWidth * N + offset * (N-1)
+ * offset / (offset + barWidth) = r
+ * @param bandWidth (W) The width available to place bars.
+ * @param groupCount (N) The number of bars to place in that space.
+ * @param gapRatio (r) The ratio of the gap between bars over the bar width.
+ * @returns The bar width and the offset between bars.
+ */
+function getBandSize(bandWidth, groupCount, gapRatio) {
+  if (gapRatio === 0) {
+    return {
+      barWidth: bandWidth / groupCount,
+      offset: 0
+    };
+  }
+  const barWidth = bandWidth / (groupCount + (groupCount - 1) * gapRatio);
+  const offset = gapRatio * barWidth;
+  return {
+    barWidth,
+    offset
+  };
+}

package/internals/getWordsByLines.d.ts

@@ -1,6 +1,7 @@
+import * as React from 'react';
 export type ChartsTextBaseline = 'hanging' | 'central' | 'auto' | 'text-after-edge' | 'text-before-edge';
 export type ChartsTextAnchor = 'start' | 'middle' | 'end';
-export interface ChartsTextStyle extends React.CSSProperties {
+export interface ChartsTextStyle extends Omit<React.CSSProperties, 'dominantBaseline'> {
   angle?: number;
   /**
    * The text baseline

package/internals/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./components/ChartsAxesGradients/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
 export * from "./components/NotRendered.js";
+export * from "../BarChart/BarLabel/BarLabelPlot.js";
+export * from "../BarChart/BarClipPath.js";
 export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
@@ -16,6 +18,7 @@ export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./seriesSelectorOfType.js";
+export { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
@@ -56,6 +59,8 @@ export * from "./dateHelpers.js";
 export * from "./invertScale.js";
 export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
+export { checkBarChartScaleErrors } from "../BarChart/checkBarChartScaleErrors.js";
+export { getBandSize } from "./getBandSize.js";
 export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";

package/internals/index.js

@@ -16,16 +16,31 @@ var _exportNames = {
   useBarChartProps: true,
   useBarPlotData: true,
   useRadarChartProps: true,
+  useSkipAnimation: true,
   getCartesianAxisTriggerTooltip: true,
   getCartesianAxisIndex: true,
+  checkBarChartScaleErrors: true,
+  getBandSize: true,
   getAxisExtrema: true
 };
+Object.defineProperty(exports, "checkBarChartScaleErrors", {
+  enumerable: true,
+  get: function () {
+    return _checkBarChartScaleErrors.checkBarChartScaleErrors;
+  }
+});
 Object.defineProperty(exports, "getAxisExtrema", {
   enumerable: true,
   get: function () {
     return _getAxisExtrema.getAxisExtrema;
   }
 });
+Object.defineProperty(exports, "getBandSize", {
+  enumerable: true,
+  get: function () {
+    return _getBandSize.getBandSize;
+  }
+});
 Object.defineProperty(exports, "getCartesianAxisIndex", {
   enumerable: true,
   get: function () {
@@ -110,6 +125,12 @@ Object.defineProperty(exports, "useSeries", {
     return _useSeries.useSeries;
   }
 });
+Object.defineProperty(exports, "useSkipAnimation", {
+  enumerable: true,
+  get: function () {
+    return _useSkipAnimation.useSkipAnimation;
+  }
+});
 var _ChartsAxesGradients = require("./components/ChartsAxesGradients");
 Object.keys(_ChartsAxesGradients).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -146,6 +167,30 @@ Object.keys(_NotRendered).forEach(function (key) {
     }
   });
 });
+var _BarLabelPlot = require("../BarChart/BarLabel/BarLabelPlot");
+Object.keys(_BarLabelPlot).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _BarLabelPlot[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BarLabelPlot[key];
+    }
+  });
+});
+var _BarClipPath = require("../BarChart/BarClipPath");
+Object.keys(_BarClipPath).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _BarClipPath[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BarClipPath[key];
+    }
+  });
+});
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -194,6 +239,7 @@ Object.keys(_seriesSelectorOfType).forEach(function (key) {
     }
   });
 });
+var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useChartId = require("./plugins/corePlugins/useChartId");
 Object.keys(_useChartId).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -652,6 +698,8 @@ Object.keys(_findMinMax).forEach(function (key) {
     }
   });
 });
+var _checkBarChartScaleErrors = require("../BarChart/checkBarChartScaleErrors");
+var _getBandSize = require("./getBandSize");
 var _getAxisExtrema = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema");
 var _ChartProvider = require("../context/ChartProvider");
 Object.keys(_ChartProvider).forEach(function (key) {

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

@@ -1,3 +1,3 @@
 export { useChartSeries } from "./useChartSeries.js";
-export type { UseChartSeriesSignature, UseChartSeriesParameters, UseChartSeriesDefaultizedParameters, ProcessedSeries } from "./useChartSeries.types.js";
+export type { UseChartSeriesSignature, UseChartSeriesParameters, UseChartSeriesDefaultizedParameters, ProcessedSeries, SeriesLayout } from "./useChartSeries.types.js";
 export * from "./useChartSeries.selectors.js";

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

@@ -1,23 +1,38 @@
+import { ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
 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, SeriesLayout } 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>;
+/**
+ * Applies series processors with drawing area to series if defined.
+ * @param processedSeries The processed series groups
+ * @param seriesConfig The series configuration
+ * @param drawingArea The drawing area
+ * @returns Processed series with all transformations applied
+ */
+export declare const applySeriesLayout: <TSeriesType extends ChartSeriesType>(processedSeries: ProcessedSeries<TSeriesType>, seriesConfig: ChartSeriesConfig<TSeriesType>, drawingArea: ChartDrawingArea) => SeriesLayout<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 = exports.applySeriesLayout = 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,58 @@ 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;
+
+/**
+ * Applies series processors with drawing area to series if defined.
+ * @param processedSeries The processed series groups
+ * @param seriesConfig The series configuration
+ * @param drawingArea The drawing area
+ * @returns Processed series with all transformations applied
+ */
+exports.applySeriesProcessors = applySeriesProcessors;
+const applySeriesLayout = (processedSeries, seriesConfig, drawingArea) => {
+  let processingDetected = false;
+  const seriesLayout = {};
+
+  // Apply processors on series type per group
+  Object.keys(processedSeries).forEach(type => {
+    const processor = seriesConfig[type]?.seriesLayout;
+    const thisSeries = processedSeries[type];
+    if (processor !== undefined && thisSeries !== undefined) {
+      const newValue = processor(thisSeries, drawingArea);
+      if (newValue && newValue !== processedSeries[type]) {
+        processingDetected = true;
+        seriesLayout[type] = newValue;
+      }
+    }
+  });
+  if (!processingDetected) {
+    return {};
+  }
+  return seriesLayout;
+};
+exports.applySeriesLayout = applySeriesLayout;

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,32 @@
 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<unknown>[] | 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>;
+/**
+ * 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 selectorChartSeriesLayout: (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").SeriesLayout<keyof import("../../../index.js").ChartsSeriesConfig>;

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

@@ -3,16 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartSeriesState = exports.selectorChartSeriesProcessed = exports.selectorChartSeriesConfig = exports.selectorChartDataset = void 0;
+exports.selectorChartSeriesState = exports.selectorChartSeriesProcessed = exports.selectorChartSeriesLayout = exports.selectorChartSeriesConfig = exports.selectorChartDefaultizedSeries = exports.selectorChartDataset = void 0;
 var _store = require("@mui/x-internals/store");
+var _processSeries = require("./processSeries");
+var _useChartDimensions = require("../useChartDimensions/useChartDimensions.selectors");
 const selectorChartSeriesState = state => state.series;
 exports.selectorChartSeriesState = selectorChartSeriesState;
-const selectorChartSeriesProcessed = exports.selectorChartSeriesProcessed = (0, _store.createSelector)(selectorChartSeriesState, seriesState => seriesState.processedSeries);
+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, _store.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);
+});
+
+/**
+ * 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 selectorChartSeriesLayout = exports.selectorChartSeriesLayout = (0, _store.createSelectorMemoized)(selectorChartSeriesProcessed, selectorChartSeriesConfig, _useChartDimensions.selectorChartDrawingArea, function selectorChartSeriesLayout(processedSeries, seriesConfig, drawingArea) {
+  return (0, _processSeries.applySeriesLayout)(processedSeries, seriesConfig, drawingArea);
+});

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

@@ -1,8 +1,8 @@
 import { AllSeriesType } from "../../../../models/seriesType/index.js";
 import { ChartsColorPalette } from "../../../../colorPalettes/index.js";
-import { ChartPluginSignature, ChartSeriesConfig } from "../../models/index.js";
+import { ChartPluginSignature, ChartSeriesConfig, SeriesLayoutGetterResult } 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,11 @@ export type UseChartSeriesDefaultizedParameters<T extends ChartSeriesType = Char
   theme: 'light' | 'dark';
 };
 export type ProcessedSeries<TSeriesTypes extends ChartSeriesType = ChartSeriesType> = { [type in TSeriesTypes]?: SeriesProcessorResult<type> };
+export type SeriesLayout<TSeriesTypes extends ChartSeriesType = ChartSeriesType> = { [type in TSeriesTypes]?: SeriesLayoutGetterResult<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>;
   };