@mui/x-charts 9.0.0-alpha.3 → 9.0.0-beta.0

package/internals/plugins/corePlugins/useChartSeries/index.mjs

@@ -1,2 +1,3 @@
 export { useChartSeries } from "./useChartSeries.mjs";
-export * from "./useChartSeries.selectors.mjs";
+export * from "./useChartSeries.selectors.mjs";
+export * from "./useChartSeriesLayout.selectors.mjs";

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

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../../../../models/index.mjs";
 import { type ChartRootSelector } from "../../utils/selectors.mjs";
 import { type UseChartSeriesSignature } from "./useChartSeries.types.mjs";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
@@ -8,7 +9,7 @@ export declare const selectorChartDefaultizedSeries: (args_0: import("../useChar
  * Get the dataset from the series state.
  * @returns {DatasetType | undefined} The dataset.
  */
-export declare const selectorChartDataset: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartsDataset: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => readonly import("../../../index.mjs").DatasetElementType<unknown>[] | undefined;
 /**
@@ -20,10 +21,24 @@ export declare const selectorChartSeriesProcessed: (args_0: import("../useChartI
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => import("./useChartSeries.types.mjs").ProcessedSeries<keyof import("../../../index.mjs").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.
+ * Returns a function that returns the series configuration for a given series id.
  */
-export declare const selectorChartSeriesLayout: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartSeriesConfigGetter: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
-}) => import("./useChartSeries.types.mjs").SeriesLayout<keyof import("../../../index.mjs").ChartsSeriesConfig>;
+}) => (seriesId: SeriesId) => import("../useChartSeriesConfig/index.mjs").ChartSeriesTypeConfig<"line"> | import("../useChartSeriesConfig/index.mjs").ChartSeriesTypeConfig<"bar"> | import("../useChartSeriesConfig/index.mjs").ChartSeriesTypeConfig<"scatter"> | {
+  seriesProcessor: import("../useChartSeriesConfig/index.mjs").SeriesProcessor<"pie">;
+  seriesLayout?: import("../useChartSeriesConfig/index.mjs").SeriesLayoutGetter<"pie"> | undefined;
+  colorProcessor: import("../useChartSeriesConfig/index.mjs").ColorProcessor<"pie">;
+  legendGetter: import("../useChartSeriesConfig/index.mjs").LegendGetter<"pie">;
+  tooltipGetter: import("../useChartSeriesConfig/index.mjs").TooltipGetter<"pie">;
+  ItemTooltipContent?: import("react").ComponentType<import("../useChartSeriesConfig/index.mjs").ItemTooltipContentProps<"pie">> | undefined;
+  tooltipItemPositionGetter?: import("../useChartSeriesConfig/index.mjs").TooltipItemPositionGetter<"pie"> | undefined;
+  getSeriesWithDefaultValues: import("../useChartSeriesConfig/index.mjs").GetSeriesWithDefaultValues<"pie">;
+  keyboardFocusHandler?: import("../../../index.mjs").KeyboardFocusHandler<"pie"> | undefined;
+  identifierSerializer: import("../useChartSeriesConfig/index.mjs").IdentifierSerializer<"pie">;
+  identifierCleaner: import("../useChartSeriesConfig/index.mjs").IdentifierCleaner<"pie">;
+  getItemAtPosition?: import("../useChartSeriesConfig/index.mjs").GetItemAtPosition<"pie"> | undefined;
+  descriptionGetter: import("../useChartSeriesConfig/index.mjs").DescriptionGetter<"pie">;
+  isHighlightedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.mjs").HighlightCreator<"pie">;
+  isFadedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.mjs").HighlightCreator<"pie">;
+} | import("../useChartSeriesConfig/index.mjs").ChartSeriesTypeConfig<"radar"> | null;

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

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../../../../models/index.js";
 import { type ChartRootSelector } from "../../utils/selectors.js";
 import { type UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
@@ -8,7 +9,7 @@ export declare const selectorChartDefaultizedSeries: (args_0: import("../useChar
  * Get the dataset from the series state.
  * @returns {DatasetType | undefined} The dataset.
  */
-export declare const selectorChartDataset: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & 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 selectorChartsDataset: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & 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;
 /**
@@ -20,10 +21,24 @@ export declare const selectorChartSeriesProcessed: (args_0: import("../useChartI
   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.
+ * Returns a function that returns the series configuration for a given series id.
  */
-export declare const selectorChartSeriesLayout: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & 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 selectorChartSeriesConfigGetter: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & 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>;
+}) => (seriesId: SeriesId) => import("../useChartSeriesConfig/index.js").ChartSeriesTypeConfig<"line"> | import("../useChartSeriesConfig/index.js").ChartSeriesTypeConfig<"bar"> | import("../useChartSeriesConfig/index.js").ChartSeriesTypeConfig<"scatter"> | {
+  seriesProcessor: import("../useChartSeriesConfig/index.js").SeriesProcessor<"pie">;
+  seriesLayout?: import("../useChartSeriesConfig/index.js").SeriesLayoutGetter<"pie"> | undefined;
+  colorProcessor: import("../useChartSeriesConfig/index.js").ColorProcessor<"pie">;
+  legendGetter: import("../useChartSeriesConfig/index.js").LegendGetter<"pie">;
+  tooltipGetter: import("../useChartSeriesConfig/index.js").TooltipGetter<"pie">;
+  ItemTooltipContent?: import("react").ComponentType<import("../useChartSeriesConfig/index.js").ItemTooltipContentProps<"pie">> | undefined;
+  tooltipItemPositionGetter?: import("../useChartSeriesConfig/index.js").TooltipItemPositionGetter<"pie"> | undefined;
+  getSeriesWithDefaultValues: import("../useChartSeriesConfig/index.js").GetSeriesWithDefaultValues<"pie">;
+  keyboardFocusHandler?: import("../../../index.js").KeyboardFocusHandler<"pie"> | undefined;
+  identifierSerializer: import("../useChartSeriesConfig/index.js").IdentifierSerializer<"pie">;
+  identifierCleaner: import("../useChartSeriesConfig/index.js").IdentifierCleaner<"pie">;
+  getItemAtPosition?: import("../useChartSeriesConfig/index.js").GetItemAtPosition<"pie"> | undefined;
+  descriptionGetter: import("../useChartSeriesConfig/index.js").DescriptionGetter<"pie">;
+  isHighlightedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.js").HighlightCreator<"pie">;
+  isFadedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.js").HighlightCreator<"pie">;
+} | import("../useChartSeriesConfig/index.js").ChartSeriesTypeConfig<"radar"> | null;

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartSeriesState = exports.selectorChartSeriesProcessed = exports.selectorChartSeriesLayout = exports.selectorChartDefaultizedSeries = exports.selectorChartDataset = void 0;
+exports.selectorChartsDataset = exports.selectorChartSeriesState = exports.selectorChartSeriesProcessed = exports.selectorChartSeriesConfigGetter = exports.selectorChartDefaultizedSeries = void 0;
 var _store = require("@mui/x-internals/store");
 var _processSeries = require("./processSeries");
-var _useChartDimensions = require("../useChartDimensions");
 var _useChartVisibilityManager = require("../../featurePlugins/useChartVisibilityManager");
 var _useChartSeriesConfig = require("../useChartSeriesConfig/useChartSeriesConfig.selectors");
 const selectorChartSeriesState = state => state.series;
@@ -17,22 +16,34 @@ const selectorChartDefaultizedSeries = exports.selectorChartDefaultizedSeries =
  * Get the dataset from the series state.
  * @returns {DatasetType | undefined} The dataset.
  */
-const selectorChartDataset = exports.selectorChartDataset = (0, _store.createSelector)(selectorChartSeriesState, seriesState => seriesState.dataset);
+const selectorChartsDataset = exports.selectorChartsDataset = (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, _useChartSeriesConfig.selectorChartSeriesConfig, selectorChartDataset, _useChartVisibilityManager.selectorIsItemVisibleGetter, function selectorChartSeriesProcessed(defaultizedSeries, seriesConfig, dataset, isItemVisible) {
+const selectorChartSeriesProcessed = exports.selectorChartSeriesProcessed = (0, _store.createSelectorMemoized)(selectorChartDefaultizedSeries, _useChartSeriesConfig.selectorChartSeriesConfig, selectorChartsDataset, _useChartVisibilityManager.selectorIsItemVisibleGetter, function selectorChartSeriesProcessed(defaultizedSeries, seriesConfig, dataset, isItemVisible) {
   return (0, _processSeries.applySeriesProcessors)(defaultizedSeries, seriesConfig, dataset, isItemVisible);
 });
 
 /**
- * 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.
+ * Returns a function that returns the series configuration for a given series id.
  */
-const selectorChartSeriesLayout = exports.selectorChartSeriesLayout = (0, _store.createSelectorMemoized)(selectorChartSeriesProcessed, _useChartSeriesConfig.selectorChartSeriesConfig, _useChartDimensions.selectorChartDrawingArea, function selectorChartSeriesLayout(processedSeries, seriesConfig, drawingArea) {
-  return (0, _processSeries.applySeriesLayout)(processedSeries, seriesConfig, drawingArea);
+const selectorChartSeriesConfigGetter = exports.selectorChartSeriesConfigGetter = (0, _store.createSelectorMemoized)(_useChartSeriesConfig.selectorChartSeriesConfig, selectorChartSeriesProcessed, (seriesConfig, processedSeries) => {
+  return function getSeriesConfigById(seriesId) {
+    for (const type in processedSeries) {
+      if (!Object.hasOwn(processedSeries, type)) {
+        continue;
+      }
+      const seriesGroup = processedSeries[type];
+      if (seriesGroup?.series) {
+        const item = seriesGroup.series[seriesId];
+        if (item) {
+          return seriesConfig[type];
+        }
+      }
+    }
+    return null;
+  };
 });

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

@@ -1,6 +1,5 @@
 import { createSelectorMemoized, createSelector } from '@mui/x-internals/store';
-import { applySeriesLayout, applySeriesProcessors } from "./processSeries.mjs";
-import { selectorChartDrawingArea } from "../useChartDimensions/index.mjs";
+import { applySeriesProcessors } from "./processSeries.mjs";
 import { selectorIsItemVisibleGetter } from "../../featurePlugins/useChartVisibilityManager/index.mjs";
 import { selectorChartSeriesConfig } from "../useChartSeriesConfig/useChartSeriesConfig.selectors.mjs";
 export const selectorChartSeriesState = state => state.series;
@@ -10,22 +9,34 @@ export const selectorChartDefaultizedSeries = createSelector(selectorChartSeries
  * Get the dataset from the series state.
  * @returns {DatasetType | undefined} The dataset.
  */
-export const selectorChartDataset = createSelector(selectorChartSeriesState, seriesState => seriesState.dataset);
+export const selectorChartsDataset = 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.
  */
-export const selectorChartSeriesProcessed = createSelectorMemoized(selectorChartDefaultizedSeries, selectorChartSeriesConfig, selectorChartDataset, selectorIsItemVisibleGetter, function selectorChartSeriesProcessed(defaultizedSeries, seriesConfig, dataset, isItemVisible) {
+export const selectorChartSeriesProcessed = createSelectorMemoized(selectorChartDefaultizedSeries, selectorChartSeriesConfig, selectorChartsDataset, selectorIsItemVisibleGetter, function selectorChartSeriesProcessed(defaultizedSeries, seriesConfig, dataset, isItemVisible) {
   return applySeriesProcessors(defaultizedSeries, seriesConfig, dataset, isItemVisible);
 });
 
 /**
- * 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.
+ * Returns a function that returns the series configuration for a given series id.
  */
-export const selectorChartSeriesLayout = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartDrawingArea, function selectorChartSeriesLayout(processedSeries, seriesConfig, drawingArea) {
-  return applySeriesLayout(processedSeries, seriesConfig, drawingArea);
+export const selectorChartSeriesConfigGetter = createSelectorMemoized(selectorChartSeriesConfig, selectorChartSeriesProcessed, (seriesConfig, processedSeries) => {
+  return function getSeriesConfigById(seriesId) {
+    for (const type in processedSeries) {
+      if (!Object.hasOwn(processedSeries, type)) {
+        continue;
+      }
+      const seriesGroup = processedSeries[type];
+      if (seriesGroup?.series) {
+        const item = seriesGroup.series[seriesId];
+        if (item) {
+          return seriesConfig[type];
+        }
+      }
+    }
+    return null;
+  };
 });

package/internals/plugins/corePlugins/useChartSeries/useChartSeriesLayout.selectors.d.mts

@@ -0,0 +1,8 @@
+/**
+ * Get the processed series after applying series layout.
+ * This selector computes the series layout on-demand from the processed series.
+ * @returns {SeriesLayout} The series with layout applied.
+ */
+export declare const selectorChartSeriesLayout: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => import("./useChartSeries.types.mjs").SeriesLayout<keyof import("../../../index.mjs").ChartsSeriesConfig>;

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

@@ -0,0 +1,8 @@
+/**
+ * Get the processed series after applying series layout.
+ * This selector computes the series layout on-demand from the processed series.
+ * @returns {SeriesLayout} The series with layout applied.
+ */
+export declare const selectorChartSeriesLayout: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & 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/useChartSeriesLayout.selectors.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartSeriesLayout = void 0;
+var _store = require("@mui/x-internals/store");
+var _processSeries = require("./processSeries");
+var _useChartDimensions = require("../useChartDimensions");
+var _useChartSeriesConfig = require("../useChartSeriesConfig/useChartSeriesConfig.selectors");
+var _useChartSeries = require("./useChartSeries.selectors");
+/**
+ * Get the processed series after applying series layout.
+ * This selector computes the series layout on-demand from the processed series.
+ * @returns {SeriesLayout} The series with layout applied.
+ */
+const selectorChartSeriesLayout = exports.selectorChartSeriesLayout = (0, _store.createSelectorMemoized)(_useChartSeries.selectorChartSeriesProcessed, _useChartSeriesConfig.selectorChartSeriesConfig, _useChartDimensions.selectorChartDrawingArea, function selectorChartSeriesLayout(processedSeries, seriesConfig, drawingArea) {
+  return (0, _processSeries.applySeriesLayout)(processedSeries, seriesConfig, drawingArea);
+});

package/internals/plugins/corePlugins/useChartSeries/useChartSeriesLayout.selectors.mjs

@@ -0,0 +1,14 @@
+import { createSelectorMemoized } from '@mui/x-internals/store';
+import { applySeriesLayout } from "./processSeries.mjs";
+import { selectorChartDrawingArea } from "../useChartDimensions/index.mjs";
+import { selectorChartSeriesConfig } from "../useChartSeriesConfig/useChartSeriesConfig.selectors.mjs";
+import { selectorChartSeriesProcessed } from "./useChartSeries.selectors.mjs";
+
+/**
+ * Get the processed series after applying series layout.
+ * This selector computes the series layout on-demand from the processed series.
+ * @returns {SeriesLayout} The series with layout applied.
+ */
+export const selectorChartSeriesLayout = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartDrawingArea, function selectorChartSeriesLayout(processedSeries, seriesConfig, drawingArea) {
+  return applySeriesLayout(processedSeries, seriesConfig, drawingArea);
+});

package/internals/plugins/corePlugins/useChartSeriesConfig/types/TooltipContent.types.d.mts

@@ -0,0 +1,18 @@
+import type { CartesianChartSeriesType } from "../../../../../models/index.mjs";
+import { type ChartsTooltipClasses, type ItemTooltip, type SeriesItem } from "../../../../../ChartsTooltip/index.mjs";
+import type { ChartSeriesType, PolarChartSeriesType } from "../../../../../models/seriesType/config.mjs";
+import { type ItemTooltipWithMultipleValues } from "./tooltipGetter.types.mjs";
+export interface AxisTooltipContentProps<T extends CartesianChartSeriesType | PolarChartSeriesType> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: Partial<ChartsTooltipClasses> | undefined;
+  item: SeriesItem<T>;
+}
+export interface ItemTooltipContentProps<T extends ChartSeriesType> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: Partial<ChartsTooltipClasses> | undefined;
+  item: ItemTooltip<T> | ItemTooltipWithMultipleValues;
+}

package/internals/plugins/corePlugins/useChartSeriesConfig/types/TooltipContent.types.d.ts

@@ -0,0 +1,18 @@
+import type { CartesianChartSeriesType } from "../../../../../models/index.js";
+import { type ChartsTooltipClasses, type ItemTooltip, type SeriesItem } from "../../../../../ChartsTooltip/index.js";
+import type { ChartSeriesType, PolarChartSeriesType } from "../../../../../models/seriesType/config.js";
+import { type ItemTooltipWithMultipleValues } from "./tooltipGetter.types.js";
+export interface AxisTooltipContentProps<T extends CartesianChartSeriesType | PolarChartSeriesType> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: Partial<ChartsTooltipClasses> | undefined;
+  item: SeriesItem<T>;
+}
+export interface ItemTooltipContentProps<T extends ChartSeriesType> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: Partial<ChartsTooltipClasses> | undefined;
+  item: ItemTooltip<T> | ItemTooltipWithMultipleValues;
+}

package/internals/plugins/corePlugins/useChartSeriesConfig/types/descriptionGetter.types.d.mts

@@ -0,0 +1,5 @@
+import type { ChartsLocaleText } from "../../../../../locales/utils/chartsLocaleTextApi.mjs";
+import type { ChartSeriesType, ChartsSeriesConfig } from "../../../../../models/seriesType/config.mjs";
+export type DescriptionGetter<T extends ChartSeriesType> = (params: ChartsSeriesConfig[T]['descriptionGetterParams'] & {
+  localeText: ChartsLocaleText;
+}) => string;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/descriptionGetter.types.d.ts

@@ -0,0 +1,5 @@
+import type { ChartsLocaleText } from "../../../../../locales/utils/chartsLocaleTextApi.js";
+import type { ChartSeriesType, ChartsSeriesConfig } from "../../../../../models/seriesType/config.js";
+export type DescriptionGetter<T extends ChartSeriesType> = (params: ChartsSeriesConfig[T]['descriptionGetterParams'] & {
+  localeText: ChartsLocaleText;
+}) => string;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/descriptionGetter.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/corePlugins/useChartSeriesConfig/types/descriptionGetter.types.mjs

@@ -0,0 +1 @@
+export {};

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.d.mts

@@ -10,4 +10,6 @@ export * from "./legendGetter.types.mjs";
 export * from "./getSeriesWithDefaultValues.types.mjs";
 export * from "./identifierSerializer.types.mjs";
 export * from "./identifierCleaner.types.mjs";
-export * from "./getItemAtPosition.types.mjs";
+export * from "./getItemAtPosition.types.mjs";
+export * from "./descriptionGetter.types.mjs";
+export * from "./TooltipContent.types.mjs";

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.d.ts

@@ -10,4 +10,6 @@ export * from "./legendGetter.types.js";
 export * from "./getSeriesWithDefaultValues.types.js";
 export * from "./identifierSerializer.types.js";
 export * from "./identifierCleaner.types.js";
-export * from "./getItemAtPosition.types.js";
+export * from "./getItemAtPosition.types.js";
+export * from "./descriptionGetter.types.js";
+export * from "./TooltipContent.types.js";

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.js

@@ -145,4 +145,26 @@ Object.keys(_getItemAtPosition).forEach(function (key) {
       return _getItemAtPosition[key];
     }
   });
+});
+var _descriptionGetter = require("./descriptionGetter.types");
+Object.keys(_descriptionGetter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _descriptionGetter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _descriptionGetter[key];
+    }
+  });
+});
+var _TooltipContent = require("./TooltipContent.types");
+Object.keys(_TooltipContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TooltipContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TooltipContent[key];
+    }
+  });
 });

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.mjs

@@ -10,4 +10,6 @@ export * from "./legendGetter.types.mjs";
 export * from "./getSeriesWithDefaultValues.types.mjs";
 export * from "./identifierSerializer.types.mjs";
 export * from "./identifierCleaner.types.mjs";
-export * from "./getItemAtPosition.types.mjs";
+export * from "./getItemAtPosition.types.mjs";
+export * from "./descriptionGetter.types.mjs";
+export * from "./TooltipContent.types.mjs";

package/internals/plugins/corePlugins/useChartSeriesConfig/types/seriesConfig.types.d.mts

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 import type { SeriesProcessor } from "./seriesProcessor.types.mjs";
 import type { CartesianChartSeriesType, ChartSeriesType, ChartsSeriesConfig, PolarChartSeriesType } from "../../../../../models/seriesType/config.mjs";
 import type { ColorProcessor } from "./colorProcessor.types.mjs";
@@ -12,9 +13,11 @@ import { type KeyboardFocusHandler } from "../../../featurePlugins/useChartKeybo
 import { type IdentifierSerializer } from "./identifierSerializer.types.mjs";
 import { type IdentifierCleaner } from "./identifierCleaner.types.mjs";
 import { type GetItemAtPosition } from "./getItemAtPosition.types.mjs";
+import { type DescriptionGetter } from "./descriptionGetter.types.mjs";
 import { type UseChartCartesianAxisSignature } from "../../../featurePlugins/useChartCartesianAxis/index.mjs";
 import { type UseChartPolarAxisSignature } from "../../../featurePlugins/useChartPolarAxis/index.mjs";
 import { type HighlightCreator } from "../../../featurePlugins/useChartHighlight/highlightCreator.types.mjs";
+import { type AxisTooltipContentProps, type ItemTooltipContentProps } from "./TooltipContent.types.mjs";
 export type ChartSeriesTypeRequiredPlugins<SeriesType extends ChartSeriesType> = ChartsSeriesConfig[SeriesType] extends {
   axisType: 'cartesian';
 } ? [UseChartCartesianAxisSignature] : ChartsSeriesConfig[SeriesType] extends {
@@ -29,6 +32,7 @@ export type ChartSeriesTypeConfig<SeriesType extends ChartSeriesType> = {
   colorProcessor: ColorProcessor<SeriesType>;
   legendGetter: LegendGetter<SeriesType>;
   tooltipGetter: TooltipGetter<SeriesType>;
+  ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<SeriesType>>;
   tooltipItemPositionGetter?: TooltipItemPositionGetter<SeriesType>;
   getSeriesWithDefaultValues: GetSeriesWithDefaultValues<SeriesType>;
   keyboardFocusHandler?: KeyboardFocusHandler<SeriesType>;
@@ -46,15 +50,18 @@ export type ChartSeriesTypeConfig<SeriesType extends ChartSeriesType> = {
    */
   identifierCleaner: IdentifierCleaner<SeriesType>;
   getItemAtPosition?: GetItemAtPosition<SeriesType>;
+  descriptionGetter: DescriptionGetter<SeriesType>;
   isHighlightedCreator: HighlightCreator<SeriesType>;
   isFadedCreator: HighlightCreator<SeriesType>;
 } & (SeriesType extends CartesianChartSeriesType ? {
   xExtremumGetter: CartesianExtremumGetter<SeriesType>;
   yExtremumGetter: CartesianExtremumGetter<SeriesType>;
   axisTooltipGetter?: AxisTooltipGetter<SeriesType, 'x' | 'y'>;
+  AxisTooltipContent?: React.ComponentType<AxisTooltipContentProps<SeriesType>>;
 } : {}) & (SeriesType extends PolarChartSeriesType ? {
   rotationExtremumGetter: PolarExtremumGetter<SeriesType>;
   radiusExtremumGetter: PolarExtremumGetter<SeriesType>;
   axisTooltipGetter?: AxisTooltipGetter<SeriesType, 'rotation' | 'radius'>;
+  AxisTooltipContent?: React.ComponentType<AxisTooltipContentProps<SeriesType>>;
 } : {});
 export type ChartSeriesConfig<SeriesType extends ChartSeriesType> = { [Key in SeriesType]: ChartSeriesTypeConfig<Key> };

package/internals/plugins/corePlugins/useChartSeriesConfig/types/seriesConfig.types.d.ts

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 import type { SeriesProcessor } from "./seriesProcessor.types.js";
 import type { CartesianChartSeriesType, ChartSeriesType, ChartsSeriesConfig, PolarChartSeriesType } from "../../../../../models/seriesType/config.js";
 import type { ColorProcessor } from "./colorProcessor.types.js";
@@ -12,9 +13,11 @@ import { type KeyboardFocusHandler } from "../../../featurePlugins/useChartKeybo
 import { type IdentifierSerializer } from "./identifierSerializer.types.js";
 import { type IdentifierCleaner } from "./identifierCleaner.types.js";
 import { type GetItemAtPosition } from "./getItemAtPosition.types.js";
+import { type DescriptionGetter } from "./descriptionGetter.types.js";
 import { type UseChartCartesianAxisSignature } from "../../../featurePlugins/useChartCartesianAxis/index.js";
 import { type UseChartPolarAxisSignature } from "../../../featurePlugins/useChartPolarAxis/index.js";
 import { type HighlightCreator } from "../../../featurePlugins/useChartHighlight/highlightCreator.types.js";
+import { type AxisTooltipContentProps, type ItemTooltipContentProps } from "./TooltipContent.types.js";
 export type ChartSeriesTypeRequiredPlugins<SeriesType extends ChartSeriesType> = ChartsSeriesConfig[SeriesType] extends {
   axisType: 'cartesian';
 } ? [UseChartCartesianAxisSignature] : ChartsSeriesConfig[SeriesType] extends {
@@ -29,6 +32,7 @@ export type ChartSeriesTypeConfig<SeriesType extends ChartSeriesType> = {
   colorProcessor: ColorProcessor<SeriesType>;
   legendGetter: LegendGetter<SeriesType>;
   tooltipGetter: TooltipGetter<SeriesType>;
+  ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<SeriesType>>;
   tooltipItemPositionGetter?: TooltipItemPositionGetter<SeriesType>;
   getSeriesWithDefaultValues: GetSeriesWithDefaultValues<SeriesType>;
   keyboardFocusHandler?: KeyboardFocusHandler<SeriesType>;
@@ -46,15 +50,18 @@ export type ChartSeriesTypeConfig<SeriesType extends ChartSeriesType> = {
    */
   identifierCleaner: IdentifierCleaner<SeriesType>;
   getItemAtPosition?: GetItemAtPosition<SeriesType>;
+  descriptionGetter: DescriptionGetter<SeriesType>;
   isHighlightedCreator: HighlightCreator<SeriesType>;
   isFadedCreator: HighlightCreator<SeriesType>;
 } & (SeriesType extends CartesianChartSeriesType ? {
   xExtremumGetter: CartesianExtremumGetter<SeriesType>;
   yExtremumGetter: CartesianExtremumGetter<SeriesType>;
   axisTooltipGetter?: AxisTooltipGetter<SeriesType, 'x' | 'y'>;
+  AxisTooltipContent?: React.ComponentType<AxisTooltipContentProps<SeriesType>>;
 } : {}) & (SeriesType extends PolarChartSeriesType ? {
   rotationExtremumGetter: PolarExtremumGetter<SeriesType>;
   radiusExtremumGetter: PolarExtremumGetter<SeriesType>;
   axisTooltipGetter?: AxisTooltipGetter<SeriesType, 'rotation' | 'radius'>;
+  AxisTooltipContent?: React.ComponentType<AxisTooltipContentProps<SeriesType>>;
 } : {});
 export type ChartSeriesConfig<SeriesType extends ChartSeriesType> = { [Key in SeriesType]: ChartSeriesTypeConfig<Key> };

package/internals/plugins/corePlugins/useChartSeriesConfig/types/tooltipGetter.types.d.mts

@@ -4,23 +4,15 @@ import { type SeriesId } from "../../../../../models/seriesType/common.mjs";
 import { type AxisId, type ChartsRotationAxisProps, type ChartsRadiusAxisProps, type PolarAxisDefaultized, type ComputedXAxis, type ComputedYAxis } from "../../../../../models/axis.mjs";
 import { type ChartsLabelMarkProps } from "../../../../../ChartsLabel/ChartsLabelMark.mjs";
 import { type ColorGetter } from "./colorProcessor.types.mjs";
-export interface ItemTooltip<SeriesType extends ChartSeriesType> {
+export interface ItemTooltipValue<SeriesType extends ChartSeriesType> {
   /**
-   * An object that identifies the item to display.
-   */
-  identifier: SeriesItemIdentifierWithType<SeriesType>;
-  /**
-   * The color associated with the item.
-   */
-  color: string;
-  /**
-   * The item label.
+   * The metric label.
    */
   label: string | undefined;
   /**
-   * The item value.
+   * The value.
    */
-  value: ChartsSeriesConfig[SeriesType]['valueType'];
+  value: SeriesType extends 'heatmap' ? number | null : ChartsSeriesConfig[SeriesType]['valueType'];
   /**
    * The value formatted with context set to "tooltip".
    */
@@ -34,29 +26,18 @@ export interface ItemTooltip<SeriesType extends ChartSeriesType> {
    */
   markShape?: ChartsLabelMarkProps['markShape'];
 }
+export interface ItemTooltip<SeriesType extends ChartSeriesType> extends ItemTooltipValue<SeriesType> {
+  /**
+   * An object that identifies the item to display.
+   */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /**
+   * The color associated with the item.
+   */
+  color: string;
+}
 export type ItemTooltipWithMultipleValues<T extends 'radar' = 'radar'> = Pick<ItemTooltip<T>, 'identifier' | 'color' | 'label' | 'markType' | 'markShape'> & {
-  values: {
-    /**
-     * The metric label.
-     */
-    label: string | undefined;
-    /**
-     * The value.
-     */
-    value: ChartsSeriesConfig[T]['valueType'];
-    /**
-     * The value formatted with context set to "tooltip".
-     */
-    formattedValue: string | null;
-    /**
-     * The series mark type.
-     */
-    markType: ChartsLabelMarkProps['type'];
-    /**
-     * The series mark shape.
-     */
-    markShape?: ChartsLabelMarkProps['markShape'];
-  }[];
+  values: ItemTooltipValue<T>[];
 };
 export interface TooltipGetterAxesConfig {
   x?: ComputedXAxis;
@@ -69,9 +50,7 @@ export type TooltipGetter<SeriesType extends ChartSeriesType> = (params: {
   axesConfig: TooltipGetterAxesConfig;
   getColor: ColorGetter<SeriesType>;
   identifier: SeriesItemIdentifierWithType<SeriesType> | null;
-}) => (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : SeriesType extends 'heatmap' ? Omit<ItemTooltip<SeriesType>, 'value'> & {
-  value: number | null;
-} : ItemTooltip<SeriesType>) | null;
+}) => (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : ItemTooltip<SeriesType>) | null;
 /**
  * If `axisId` is set to undefined, the default axis will be used.
  *