@mui/x-charts 8.19.0 → 8.20.0

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { warnOnce } from '@mui/x-internals/warning';
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
@@ -20,27 +21,34 @@ export const useChartHighlight = ({
         item: params.highlightedItem
       }));
     }
+    if (process.env.NODE_ENV !== 'production') {
+      if (params.highlightedItem !== undefined && !store.state.highlight.isControlled) {
+        warnOnce(['MUI X Charts: The `highlightedItem` switched between controlled and uncontrolled state.', 'To remove the highlight when using controlled state, you must provide `null` to the `highlightedItem` prop instead of `undefined`.'].join('\n'));
+      }
+    }
   }, [store, params.highlightedItem]);
   const clearHighlight = useEventCallback(() => {
     params.onHighlightChange?.(null);
-    const prevItem = store.getSnapshot().highlight.item;
-    if (prevItem === null) {
+    const prevHighlight = store.getSnapshot().highlight;
+    if (prevHighlight.item === null || prevHighlight.isControlled) {
       return;
     }
     store.set('highlight', {
       item: null,
-      lastUpdate: 'pointer'
+      lastUpdate: 'pointer',
+      isControlled: false
     });
   });
   const setHighlight = useEventCallback(newItem => {
-    const prevItem = store.getSnapshot().highlight.item;
-    if (fastObjectShallowCompare(prevItem, newItem)) {
+    const prevHighlight = store.getSnapshot().highlight;
+    if (prevHighlight.isControlled || fastObjectShallowCompare(prevHighlight.item, newItem)) {
       return;
     }
     params.onHighlightChange?.(newItem);
     store.set('highlight', {
       item: newItem,
-      lastUpdate: 'pointer'
+      lastUpdate: 'pointer',
+      isControlled: false
     });
   });
   return {
@@ -50,15 +58,11 @@ export const useChartHighlight = ({
     }
   };
 };
-useChartHighlight.getDefaultizedParams = ({
-  params
-}) => _extends({}, params, {
-  highlightedItem: params.highlightedItem ?? null
-});
 useChartHighlight.getInitialState = params => ({
   highlight: {
     item: params.highlightedItem,
-    lastUpdate: 'pointer'
+    lastUpdate: 'pointer',
+    isControlled: params.highlightedItem !== undefined
   }
 });
 useChartHighlight.params = {

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

@@ -3,12 +3,12 @@ import { createIsHighlighted } from "./createIsHighlighted.js";
 import { createIsFaded } from "./createIsFaded.js";
 import { getSeriesHighlightedItem, getSeriesUnfadedItem, isSeriesFaded, isSeriesHighlighted } from "./highlightStates.js";
 import { selectorChartsKeyboardItem } from "../useChartKeyboardNavigation/index.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 const selectHighlight = state => state.highlight;
-const selectSeries = state => state.series;
-export const selectorChartsHighlightScopePerSeriesId = createSelector(selectSeries, series => {
+export const selectorChartsHighlightScopePerSeriesId = createSelector(selectorChartSeriesProcessed, processedSeries => {
   const map = new Map();
-  Object.keys(series.processedSeries).forEach(seriesType => {
-    const seriesData = series.processedSeries[seriesType];
+  Object.keys(processedSeries).forEach(seriesType => {
+    const seriesData = processedSeries[seriesType];
     seriesData?.seriesOrder?.forEach(seriesId => {
       const seriesItem = seriesData?.series[seriesId];
       map.set(seriesId, seriesItem?.highlightScope);
@@ -17,7 +17,7 @@ export const selectorChartsHighlightScopePerSeriesId = createSelector(selectSeri
   return map;
 });
 export const selectorChartsHighlightedItem = createSelectorMemoized(selectHighlight, selectorChartsKeyboardItem, function selectorChartsHighlightedItem(highlight, keyboardItem) {
-  return highlight.lastUpdate === 'pointer' ? highlight.item : keyboardItem;
+  return highlight.isControlled || highlight.lastUpdate === 'pointer' ? highlight.item : keyboardItem;
 });
 export const selectorChartsHighlightScope = createSelector(selectorChartsHighlightScopePerSeriesId, selectorChartsHighlightedItem, function selectorChartsHighlightScope(seriesIdToHighlightScope, highlightedItem) {
   if (!highlightedItem) {

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

@@ -56,6 +56,10 @@ export interface UseChartHighlightParameters {
 export type UseChartHighlightDefaultizedParameters = DefaultizedProps<UseChartHighlightParameters, 'highlightedItem'>;
 export interface UseChartHighlightState {
   highlight: {
+    /**
+     * Indicates if the highlighted item is controlled.
+     */
+    isControlled: boolean;
     /**
      * The item currently highlighted.
      */

package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartTooltip.selectors.d.ts

@@ -6,7 +6,7 @@ export declare const selectorChartsTooltipItemIsDefined: (args_0: import("../../
 }) => boolean;
 export declare const selectorChartsTooltipItemPosition: (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("./useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => {
+}, placement?: "bottom" | "left" | "right" | "top" | undefined) => {
   x: number;
   y: number;
 } | null;

package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartTooltip.selectors.js

@@ -7,7 +7,7 @@ import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/u
 import { isCartesianSeries } from "../../../isCartesian.js";
 export const selectorChartsTooltipItem = createSelector(selectorChartsLastInteraction, selectorChartsInteractionItem, selectorChartsKeyboardItem, (lastInteraction, interactionItem, keyboardItem) => lastInteraction === 'keyboard' ? keyboardItem : interactionItem ?? null);
 export const selectorChartsTooltipItemIsDefined = createSelector(selectorChartsLastInteraction, selectorChartsInteractionItemIsDefined, selectorChartsKeyboardItemIsDefined, (lastInteraction, interactionItemIsDefined, keyboardItemIsDefined) => lastInteraction === 'keyboard' ? keyboardItemIsDefined : interactionItemIsDefined);
-export const selectorChartsTooltipItemPosition = createSelector(selectorChartsTooltipItem, selectorChartDrawingArea, selectorChartSeriesConfig, selectorChartXAxis, selectorChartYAxis, selectorChartSeriesProcessed, (_, placement) => placement, function selectorChartsTooltipItemPosition(identifier, drawingArea, seriesConfig, {
+export const selectorChartsTooltipItemPosition = createSelector(selectorChartsTooltipItem, selectorChartDrawingArea, selectorChartSeriesConfig, selectorChartXAxis, selectorChartYAxis, selectorChartSeriesProcessed, function selectorChartsTooltipItemPosition(identifier, drawingArea, seriesConfig, {
   axis: xAxis,
   axisIds: xAxisIds
 }, {

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

@@ -5,22 +5,24 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getNextSeriesWithData, getPreviousSeriesWithData, seriesHasData } from "./useChartKeyboardNavigation.helpers.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 function getNextIndexFocusedItem(state) {
+  const processedSeries = selectorChartSeriesProcessed(state);
   let {
     type,
     seriesId
   } = state.keyboardNavigation.item ?? {};
   if (type === undefined ||
   // @ts-ignore sankey is not in MIT version
-  type === 'sankey' || seriesId === undefined || !seriesHasData(state.series.processedSeries, type, seriesId)) {
-    const nextSeries = getNextSeriesWithData(state.series.processedSeries, type, seriesId);
+  type === 'sankey' || seriesId === undefined || !seriesHasData(processedSeries, type, seriesId)) {
+    const nextSeries = getNextSeriesWithData(processedSeries, type, seriesId);
     if (nextSeries === null) {
       return null;
     }
     type = nextSeries.type;
     seriesId = nextSeries.seriesId;
   }
-  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  const dataLength = processedSeries[type].series[seriesId].data.length;
   return {
     type,
     seriesId,
@@ -28,21 +30,22 @@ function getNextIndexFocusedItem(state) {
   };
 }
 function getPreviousIndexFocusedItem(state) {
+  const processedSeries = selectorChartSeriesProcessed(state);
   let {
     type,
     seriesId
   } = state.keyboardNavigation.item ?? {};
   if (type === undefined ||
   // @ts-ignore sankey is not in MIT version
-  type === 'sankey' || seriesId === undefined || !seriesHasData(state.series.processedSeries, type, seriesId)) {
-    const previousSeries = getPreviousSeriesWithData(state.series.processedSeries, type, seriesId);
+  type === 'sankey' || seriesId === undefined || !seriesHasData(processedSeries, type, seriesId)) {
+    const previousSeries = getPreviousSeriesWithData(processedSeries, type, seriesId);
     if (previousSeries === null) {
       return null;
     }
     type = previousSeries.type;
     seriesId = previousSeries.seriesId;
   }
-  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  const dataLength = processedSeries[type].series[seriesId].data.length;
   return {
     type,
     seriesId,
@@ -50,17 +53,18 @@ function getPreviousIndexFocusedItem(state) {
   };
 }
 function getNextSeriesFocusedItem(state) {
+  const processedSeries = selectorChartSeriesProcessed(state);
   let {
     type,
     seriesId
   } = state.keyboardNavigation.item ?? {};
-  const nextSeries = getNextSeriesWithData(state.series.processedSeries, type, seriesId);
+  const nextSeries = getNextSeriesWithData(processedSeries, type, seriesId);
   if (nextSeries === null) {
     return null; // No series to move the focus to.
   }
   type = nextSeries.type;
   seriesId = nextSeries.seriesId;
-  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  const dataLength = processedSeries[type].series[seriesId].data.length;
   return {
     type,
     seriesId,
@@ -68,17 +72,18 @@ function getNextSeriesFocusedItem(state) {
   };
 }
 function getPreviousSeriesFocusedItem(state) {
+  const processedSeries = selectorChartSeriesProcessed(state);
   let {
     type,
     seriesId
   } = state.keyboardNavigation.item ?? {};
-  const previousSeries = getPreviousSeriesWithData(state.series.processedSeries, type, seriesId);
+  const previousSeries = getPreviousSeriesWithData(processedSeries, type, seriesId);
   if (previousSeries === null) {
     return null; // No series to move the focus to.
   }
   type = previousSeries.type;
   seriesId = previousSeries.seriesId;
-  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  const dataLength = processedSeries[type].series[seriesId].data.length;
   return {
     type,
     seriesId,

package/esm/internals/seriesSelectorOfType.d.ts

@@ -15,6 +15,6 @@ export declare const selectorAllSeriesOfType: (args_0: import("./plugins/corePlu
 } | undefined;
 export declare const selectorSeriesOfType: (args_0: import("./plugins/corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("./plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./plugins/corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./plugins/corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof ChartsSeriesConfig> & import("./plugins/corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("./index.js").ChartStateCacheKey;
-}, seriesType: keyof ChartsSeriesConfig, ids?: SeriesId | SeriesId[] | undefined) => import("../index.js").DefaultizedLineSeriesType | import("../index.js").DefaultizedBarSeriesType | import("../index.js").DefaultizedRadarSeriesType | import("../index.js").DefaultizedScatterSeriesType | import("../index.js").DefaultizedPieSeriesType | (import("../index.js").DefaultizedLineSeriesType | import("../index.js").DefaultizedBarSeriesType | import("../index.js").DefaultizedRadarSeriesType | import("../index.js").DefaultizedScatterSeriesType | import("../index.js").DefaultizedPieSeriesType | undefined)[] | undefined;
+}, seriesType: keyof ChartsSeriesConfig, ids?: SeriesId | SeriesId[] | undefined) => import("../index.js").DefaultizedRadarSeriesType | import("../index.js").DefaultizedLineSeriesType | import("../index.js").DefaultizedBarSeriesType | import("../index.js").DefaultizedScatterSeriesType | import("../index.js").DefaultizedPieSeriesType | (import("../index.js").DefaultizedRadarSeriesType | import("../index.js").DefaultizedLineSeriesType | import("../index.js").DefaultizedBarSeriesType | import("../index.js").DefaultizedScatterSeriesType | import("../index.js").DefaultizedPieSeriesType | undefined)[] | undefined;
 export declare const useAllSeriesOfType: <T extends keyof ChartsSeriesConfig>(seriesType: T) => ProcessedSeries[T];
 export declare const useSeriesOfType: <T extends keyof ChartsSeriesConfig>(seriesType: T, seriesId?: SeriesId | SeriesId[]) => ChartSeriesDefaultized<T> | ChartSeriesDefaultized<T>[] | undefined;

package/hooks/useInteractionItemProps.d.ts

@@ -9,11 +9,6 @@ export declare const useInteractionItemProps: (data: SeriesItemIdentifierWithDat
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;
 };
-export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData[], skip?: boolean) => {
-  onPointerEnter?: () => void;
-  onPointerLeave?: () => void;
-  onPointerDown?: (event: React.PointerEvent) => void;
-}[];
 export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature]>, item: ChartItemIdentifierWithData<ChartSeriesType>): {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;

package/hooks/useInteractionItemProps.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getInteractionItemProps = getInteractionItemProps;
-exports.useInteractionItemProps = exports.useInteractionAllItemProps = void 0;
+exports.useInteractionItemProps = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _ChartProvider = require("../context/ChartProvider");
@@ -48,18 +48,6 @@ const useInteractionItemProps = (data, skip) => {
   }, [skip, onPointerEnter, onPointerLeave]);
 };
 exports.useInteractionItemProps = useInteractionItemProps;
-const useInteractionAllItemProps = (data, skip) => {
-  const {
-    instance
-  } = (0, _ChartProvider.useChartContext)();
-  const results = React.useMemo(() => {
-    return data.map(item => {
-      return skip ? {} : getInteractionItemProps(instance, item);
-    });
-  }, [data, instance, skip]);
-  return results;
-};
-exports.useInteractionAllItemProps = useInteractionAllItemProps;
 function getInteractionItemProps(instance, item) {
   function onPointerEnter() {
     if (!item) {

package/hooks/useTicks.js

@@ -17,6 +17,9 @@ const offsetRatio = {
   end: 1,
   middle: 0.5
 };
+function getTickPosition(scale, value, placement) {
+  return scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[placement] * scale.step();
+}
 function getTicks(options) {
   const {
     scale,
@@ -35,7 +38,13 @@ function getTicks(options) {
     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 +54,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

package/index.js

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

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<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>;

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;
+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, _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);
+});

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/useChartHighlight/useChartHighlight.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useChartHighlight = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _warning = require("@mui/x-internals/warning");
 var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
@@ -27,27 +28,34 @@ const useChartHighlight = ({
         item: params.highlightedItem
       }));
     }
+    if (process.env.NODE_ENV !== 'production') {
+      if (params.highlightedItem !== undefined && !store.state.highlight.isControlled) {
+        (0, _warning.warnOnce)(['MUI X Charts: The `highlightedItem` switched between controlled and uncontrolled state.', 'To remove the highlight when using controlled state, you must provide `null` to the `highlightedItem` prop instead of `undefined`.'].join('\n'));
+      }
+    }
   }, [store, params.highlightedItem]);
   const clearHighlight = (0, _useEventCallback.default)(() => {
     params.onHighlightChange?.(null);
-    const prevItem = store.getSnapshot().highlight.item;
-    if (prevItem === null) {
+    const prevHighlight = store.getSnapshot().highlight;
+    if (prevHighlight.item === null || prevHighlight.isControlled) {
       return;
     }
     store.set('highlight', {
       item: null,
-      lastUpdate: 'pointer'
+      lastUpdate: 'pointer',
+      isControlled: false
     });
   });
   const setHighlight = (0, _useEventCallback.default)(newItem => {
-    const prevItem = store.getSnapshot().highlight.item;
-    if ((0, _fastObjectShallowCompare.fastObjectShallowCompare)(prevItem, newItem)) {
+    const prevHighlight = store.getSnapshot().highlight;
+    if (prevHighlight.isControlled || (0, _fastObjectShallowCompare.fastObjectShallowCompare)(prevHighlight.item, newItem)) {
       return;
     }
     params.onHighlightChange?.(newItem);
     store.set('highlight', {
       item: newItem,
-      lastUpdate: 'pointer'
+      lastUpdate: 'pointer',
+      isControlled: false
     });
   });
   return {
@@ -58,15 +66,11 @@ const useChartHighlight = ({
   };
 };
 exports.useChartHighlight = useChartHighlight;
-useChartHighlight.getDefaultizedParams = ({
-  params
-}) => (0, _extends2.default)({}, params, {
-  highlightedItem: params.highlightedItem ?? null
-});
 useChartHighlight.getInitialState = params => ({
   highlight: {
     item: params.highlightedItem,
-    lastUpdate: 'pointer'
+    lastUpdate: 'pointer',
+    isControlled: params.highlightedItem !== undefined
   }
 });
 useChartHighlight.params = {