@mui/x-charts 9.0.0-alpha.1 → 9.0.0-alpha.2

package/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.mjs

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
+import { createIdentifierWithType } from "../../corePlugins/useChartSeries/useChartSeries.mjs";
+export const useChartTooltip = ({
+  store,
+  params,
+  instance
+}) => {
+  useAssertModelConsistency({
+    warningPrefix: 'MUI X Charts',
+    componentName: 'Chart',
+    propName: 'tooltipItem',
+    controlled: params.tooltipItem,
+    defaultValue: null
+  });
+  useEnhancedEffect(() => {
+    if (store.state.tooltip.item !== params.tooltipItem) {
+      const newItem = params.tooltipItem ? instance.identifierWithType(params.tooltipItem, 'seriesItem') : null;
+      if (store.state.tooltip.item === null || newItem === null ? newItem !== store.state.tooltip.item : instance.serializeIdentifier(store.state.tooltip.item) !== instance.serializeIdentifier(newItem)) {
+        store.set('tooltip', _extends({}, store.state.tooltip, {
+          item: newItem
+        }));
+      }
+    }
+  }, [store, instance, params.tooltipItem]);
+  const removeTooltipItem = useEventCallback(function removeTooltipItem(itemToRemove) {
+    const prevItem = store.state.tooltip.item;
+    if (prevItem === null) {
+      return; // Already null, nothing to do
+    }
+    if (!itemToRemove || instance.serializeIdentifier(prevItem) === instance.serializeIdentifier(instance.identifierWithType(itemToRemove, 'seriesItem'))) {
+      // Remove the item is either
+      // - no item provided, so we unconditionally remove it
+      // - the provided item matches the current one
+
+      params.onTooltipItemChange?.(null);
+      if (!store.state.tooltip.itemIsControlled) {
+        store.set('tooltip', _extends({}, store.state.tooltip, {
+          item: null
+        }));
+      }
+      return;
+    }
+  });
+  const setTooltipItem = useEventCallback(function setTooltipItem(newItem) {
+    if (!fastObjectShallowCompare(store.state.tooltip.item, newItem)) {
+      params.onTooltipItemChange?.(newItem);
+      if (!store.state.tooltip.itemIsControlled) {
+        store.set('tooltip', _extends({}, store.state.tooltip, {
+          item: newItem
+        }));
+      }
+    }
+  });
+  return {
+    instance: {
+      setTooltipItem,
+      removeTooltipItem
+    }
+  };
+};
+useChartTooltip.getInitialState = (params, currentState) => ({
+  tooltip: {
+    itemIsControlled: params.tooltipItem !== undefined,
+    item: params.tooltipItem == null ? null : createIdentifierWithType(currentState)(
+    // Need some as because the generic SeriesType can't be propagated to plugins methods.
+    params.tooltipItem)
+  }
+});
+useChartTooltip.params = {
+  tooltipItem: true,
+  onTooltipItemChange: true
+};

package/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors.d.mts

@@ -0,0 +1,18 @@
+export declare const selectorChartsTooltipPointerItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartTooltip.types.mjs").UseChartTooltipState<keyof import("../../../index.mjs").ChartsSeriesConfig>> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => import("../../../../index.mjs").LineItemIdentifier | import("../../../../index.mjs").BarItemIdentifier | import("../../../../index.mjs").ScatterItemIdentifier | import("../../../../index.mjs").PieItemIdentifier | import("../../../../index.mjs").RadarItemIdentifier | null;
+export declare const selectorChartsTooltipPointerItemIsDefined: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartTooltip.types.mjs").UseChartTooltipState<keyof import("../../../index.mjs").ChartsSeriesConfig>> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => boolean;
+export declare const selectorChartsTooltipItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => import("../../../../index.mjs").LineItemIdentifier | import("../../../../index.mjs").BarItemIdentifier | import("../../../../index.mjs").ScatterItemIdentifier | import("../../../../index.mjs").PieItemIdentifier | import("../../../../index.mjs").RadarItemIdentifier | null;
+export declare const selectorChartsTooltipItemIsDefined: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => boolean;
+export declare const selectorChartsTooltipItemPosition: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}, placement: "bottom" | "left" | "right" | "top") => {
+  x: number;
+  y: number;
+} | null;

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

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

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

@@ -46,7 +46,7 @@ const selectorChartsTooltipAxisConfig = (0, _store.createSelectorMemoized)(selec
   }
   return axesConfig;
 });
-const selectorChartsTooltipItemPosition = exports.selectorChartsTooltipItemPosition = (0, _store.createSelectorMemoized)(selectorChartsTooltipItem, _useChartDimensions.selectorChartDrawingArea, _useChartSeriesConfig.selectorChartSeriesConfig, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesLayout, selectorChartsTooltipAxisConfig, function selectorChartsTooltipItemPosition(identifier, drawingArea, seriesConfig, series, seriesLayout, axesConfig, placement = 'top') {
+const selectorChartsTooltipItemPosition = exports.selectorChartsTooltipItemPosition = (0, _store.createSelectorMemoized)(selectorChartsTooltipItem, _useChartDimensions.selectorChartDrawingArea, _useChartSeriesConfig.selectorChartSeriesConfig, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesLayout, selectorChartsTooltipAxisConfig, function selectorChartsTooltipItemPosition(identifier, drawingArea, seriesConfig, series, seriesLayout, axesConfig, placement) {
   if (!identifier) {
     return null;
   }

package/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors.mjs

@@ -0,0 +1,59 @@
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartSeriesProcessed, selectorChartSeriesLayout } from "../../corePlugins/useChartSeries/index.mjs";
+import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
+import { selectorChartXAxis, selectorChartYAxis } from "../useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs";
+import { selectorChartsKeyboardItem, selectorChartsHasFocusedItem } from "../useChartKeyboardNavigation/index.mjs";
+import { selectorChartsLastInteraction } from "../useChartInteraction/useChartInteraction.selectors.mjs";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.mjs";
+import { isCartesianSeries } from "../../../isCartesian.mjs";
+import { selectorChartRadiusAxis, selectorChartRotationAxis } from "../useChartPolarAxis/useChartPolarAxis.selectors.mjs";
+const selectTooltip = state => state.tooltip;
+export const selectorChartsTooltipPointerItem = createSelector(selectTooltip, tooltip => tooltip?.item ?? null);
+export const selectorChartsTooltipPointerItemIsDefined = createSelector(selectorChartsTooltipPointerItem, item => item !== null);
+export const selectorChartsTooltipItem = createSelector(selectorChartsLastInteraction, selectorChartsTooltipPointerItem, selectorChartsKeyboardItem, (lastInteraction, pointerItem, keyboardItem) => lastInteraction === 'keyboard' ? keyboardItem : pointerItem ?? null);
+export const selectorChartsTooltipItemIsDefined = createSelector(selectorChartsLastInteraction, selectorChartsTooltipPointerItemIsDefined, selectorChartsHasFocusedItem, (lastInteraction, pointerItemIsDefined, keyboardItemIsDefined) => lastInteraction === 'keyboard' ? keyboardItemIsDefined : pointerItemIsDefined);
+const selectorChartsTooltipAxisConfig = createSelectorMemoized(selectorChartsTooltipItem, selectorChartXAxis, selectorChartYAxis, selectorChartRotationAxis, selectorChartRadiusAxis, selectorChartSeriesProcessed, function selectorChartsTooltipAxisConfig(identifier, {
+  axis: xAxis,
+  axisIds: xAxisIds
+}, {
+  axis: yAxis,
+  axisIds: yAxisIds
+}, rotationAxes, radiusAxes, series) {
+  if (!identifier) {
+    return {};
+  }
+  const itemSeries = series[identifier.type]?.series[identifier.seriesId];
+  if (!itemSeries) {
+    return {};
+  }
+  const axesConfig = {
+    rotationAxes,
+    radiusAxes
+  };
+  const xAxisId = isCartesianSeries(itemSeries) ? itemSeries.xAxisId ?? xAxisIds[0] : undefined;
+  const yAxisId = isCartesianSeries(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
+  if (xAxisId !== undefined) {
+    axesConfig.x = xAxis[xAxisId];
+  }
+  if (yAxisId !== undefined) {
+    axesConfig.y = yAxis[yAxisId];
+  }
+  return axesConfig;
+});
+export const selectorChartsTooltipItemPosition = createSelectorMemoized(selectorChartsTooltipItem, selectorChartDrawingArea, selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartSeriesLayout, selectorChartsTooltipAxisConfig, function selectorChartsTooltipItemPosition(identifier, drawingArea, seriesConfig, series, seriesLayout, axesConfig, placement) {
+  if (!identifier) {
+    return null;
+  }
+  const itemSeries = series[identifier.type]?.series[identifier.seriesId];
+  if (!itemSeries) {
+    return null;
+  }
+  return seriesConfig[itemSeries.type].tooltipItemPositionGetter?.({
+    series,
+    seriesLayout,
+    drawingArea,
+    axesConfig,
+    identifier,
+    placement
+  }) ?? null;
+});

package/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.types.d.mts

@@ -0,0 +1,51 @@
+import type { DefaultizedProps } from '@mui/x-internals/types';
+import type { ChartPluginSignature } from "../../models/index.mjs";
+import type { SeriesItemIdentifier, SeriesItemIdentifierWithType } from "../../../../models/seriesType/index.mjs";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+export interface UseChartTooltipInstance {
+  /**
+   * Setter for the item the user is pointing at.
+   * @param {SeriesItemIdentifier} newItem The identifier of the item.
+   */
+  setTooltipItem: (newItem: SeriesItemIdentifierWithType<ChartSeriesType>) => void;
+  /**
+   * Remove the item the user was pointing at.
+   * - If `itemToRemove` is provided, it removes the item only if it matches the current one.
+   *   Otherwise it assumes the item got already updated and does nothing.
+   * - If `itemToRemove` is not provided, it removes the current item unconditionally.
+   * @param {SeriesItemIdentifier} itemToRemove The identifier of the item.
+   */
+  removeTooltipItem: (itemToRemove?: SeriesItemIdentifierWithType<ChartSeriesType>) => void;
+}
+export interface UseChartTooltipParameters<TSeries extends ChartSeriesType = ChartSeriesType> {
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: SeriesItemIdentifier<TSeries> | SeriesItemIdentifierWithType<TSeries> | null;
+  /**
+   * The callback fired when the tooltip item changes.
+   *
+   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   */
+  onTooltipItemChange?: (tooltipItem: SeriesItemIdentifierWithType<TSeries> | null) => void;
+}
+export type UseChartTooltipDefaultizedParameters<TSeries extends ChartSeriesType = ChartSeriesType> = DefaultizedProps<UseChartTooltipParameters<TSeries>, 'tooltipItem'>;
+export interface UseChartTooltipState<TSeries extends ChartSeriesType = ChartSeriesType> {
+  tooltip: {
+    /**
+     * Indicates if the tooltip item is controlled.
+     */
+    itemIsControlled: boolean;
+    /**
+     * The item currently under the pointer.
+     */
+    item: null | SeriesItemIdentifierWithType<TSeries>;
+  };
+}
+export type UseChartTooltipSignature<TSeries extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
+  instance: UseChartTooltipInstance;
+  state: UseChartTooltipState;
+  params: UseChartTooltipParameters<TSeries>;
+  defaultizedParams: UseChartTooltipDefaultizedParameters<TSeries>;
+}>;

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

@@ -7,7 +7,7 @@ export interface UseChartTooltipInstance {
    * Setter for the item the user is pointing at.
    * @param {SeriesItemIdentifier} newItem The identifier of the item.
    */
-  setTooltipItem: (newItem: SeriesItemIdentifier<ChartSeriesType>) => void;
+  setTooltipItem: (newItem: SeriesItemIdentifierWithType<ChartSeriesType>) => void;
   /**
    * Remove the item the user was pointing at.
    * - If `itemToRemove` is provided, it removes the item only if it matches the current one.
@@ -15,14 +15,14 @@ export interface UseChartTooltipInstance {
    * - If `itemToRemove` is not provided, it removes the current item unconditionally.
    * @param {SeriesItemIdentifier} itemToRemove The identifier of the item.
    */
-  removeTooltipItem: (itemToRemove?: SeriesItemIdentifier<ChartSeriesType>) => void;
+  removeTooltipItem: (itemToRemove?: SeriesItemIdentifierWithType<ChartSeriesType>) => void;
 }
 export interface UseChartTooltipParameters<TSeries extends ChartSeriesType = ChartSeriesType> {
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
-  tooltipItem?: SeriesItemIdentifier<TSeries> | null;
+  tooltipItem?: SeriesItemIdentifier<TSeries> | SeriesItemIdentifierWithType<TSeries> | null;
   /**
    * The callback fired when the tooltip item changes.
    *

package/internals/plugins/featurePlugins/useChartVisibilityManager/index.d.mts

@@ -0,0 +1,3 @@
+export { useChartVisibilityManager } from "./useChartVisibilityManager.mjs";
+export * from "./useChartVisibilityManager.types.mjs";
+export * from "./useChartVisibilityManager.selectors.mjs";

package/internals/plugins/featurePlugins/useChartVisibilityManager/index.mjs

@@ -0,0 +1,3 @@
+export { useChartVisibilityManager } from "./useChartVisibilityManager.mjs";
+export * from "./useChartVisibilityManager.types.mjs";
+export * from "./useChartVisibilityManager.selectors.mjs";

package/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.d.mts

@@ -0,0 +1,3 @@
+import { type ChartPlugin } from "../../models/index.mjs";
+import { type UseChartVisibilityManagerSignature } from "./useChartVisibilityManager.types.mjs";
+export declare const useChartVisibilityManager: ChartPlugin<UseChartVisibilityManagerSignature<any>>;

package/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.js

@@ -26,25 +26,28 @@ const useChartVisibilityManager = ({
       console.error([`MUI X Charts: A chart component is changing the \`hiddenItems\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
     }
     store.set('visibilityManager', (0, _extends2.default)({}, store.state.visibilityManager, {
-      visibilityMap: (0, _visibilityParamToMap.visibilityParamToMap)(params.hiddenItems.map(item => instance.identifierWithType(item)), store.state.seriesConfig.config)
+      visibilityMap: (0, _visibilityParamToMap.visibilityParamToMap)(params.hiddenItems.map(item => instance.identifierWithType(item, 'visibility')), store.state.seriesConfig.config)
     }));
   }, [store, instance, params.hiddenItems]);
   const hideItem = (0, _useEventCallback.default)(identifier => {
     const visibilityMap = store.state.visibilityManager.visibilityMap;
-    const id = instance.serializeIdentifier(instance.identifierWithType(identifier));
+    const identifierWithType = instance.identifierWithType(identifier, 'visibility');
+    const id = instance.serializeIdentifier(identifierWithType);
     if (visibilityMap.has(id)) {
       return;
     }
     const newVisibilityMap = new Map(visibilityMap);
-    newVisibilityMap.set(id, identifier);
+    newVisibilityMap.set(id, identifierWithType);
     store.set('visibilityManager', (0, _extends2.default)({}, store.state.visibilityManager, {
       visibilityMap: newVisibilityMap
     }));
-    params.onHiddenItemsChange?.(Array.from(newVisibilityMap.values()));
+    const values = Array.from(newVisibilityMap.values());
+    params.onHiddenItemsChange?.(values);
   });
   const showItem = (0, _useEventCallback.default)(identifier => {
     const visibilityMap = store.state.visibilityManager.visibilityMap;
-    const id = instance.serializeIdentifier(instance.identifierWithType(identifier));
+    const identifierWithType = instance.identifierWithType(identifier, 'visibility');
+    const id = instance.serializeIdentifier(identifierWithType);
     if (!visibilityMap.has(id)) {
       return;
     }
@@ -57,11 +60,12 @@ const useChartVisibilityManager = ({
   });
   const toggleItem = (0, _useEventCallback.default)(identifier => {
     const visibilityMap = store.state.visibilityManager.visibilityMap;
-    const id = instance.serializeIdentifier(instance.identifierWithType(identifier));
+    const identifierWithType = instance.identifierWithType(identifier, 'visibility');
+    const id = instance.serializeIdentifier(identifierWithType);
     if (visibilityMap.has(id)) {
-      showItem(identifier);
+      showItem(identifierWithType);
     } else {
-      hideItem(identifier);
+      hideItem(identifierWithType);
     }
   });
   return {

package/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.mjs

@@ -0,0 +1,87 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
+import { EMPTY_VISIBILITY_MAP } from "./useChartVisibilityManager.selectors.mjs";
+import { visibilityParamToMap } from "./visibilityParamToMap.mjs";
+import { createIdentifierWithType } from "../../corePlugins/useChartSeries/useChartSeries.mjs";
+export const useChartVisibilityManager = ({
+  store,
+  params,
+  instance
+}) => {
+  // Manage controlled state
+  useEffectAfterFirstRender(() => {
+    if (params.hiddenItems === undefined) {
+      return;
+    }
+    if (process.env.NODE_ENV !== 'production' && !store.state.visibilityManager.isControlled) {
+      console.error([`MUI X Charts: A chart component is changing the \`hiddenItems\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+    }
+    store.set('visibilityManager', _extends({}, store.state.visibilityManager, {
+      visibilityMap: visibilityParamToMap(params.hiddenItems.map(item => instance.identifierWithType(item, 'visibility')), store.state.seriesConfig.config)
+    }));
+  }, [store, instance, params.hiddenItems]);
+  const hideItem = useEventCallback(identifier => {
+    const visibilityMap = store.state.visibilityManager.visibilityMap;
+    const identifierWithType = instance.identifierWithType(identifier, 'visibility');
+    const id = instance.serializeIdentifier(identifierWithType);
+    if (visibilityMap.has(id)) {
+      return;
+    }
+    const newVisibilityMap = new Map(visibilityMap);
+    newVisibilityMap.set(id, identifierWithType);
+    store.set('visibilityManager', _extends({}, store.state.visibilityManager, {
+      visibilityMap: newVisibilityMap
+    }));
+    const values = Array.from(newVisibilityMap.values());
+    params.onHiddenItemsChange?.(values);
+  });
+  const showItem = useEventCallback(identifier => {
+    const visibilityMap = store.state.visibilityManager.visibilityMap;
+    const identifierWithType = instance.identifierWithType(identifier, 'visibility');
+    const id = instance.serializeIdentifier(identifierWithType);
+    if (!visibilityMap.has(id)) {
+      return;
+    }
+    const newVisibilityMap = new Map(visibilityMap);
+    newVisibilityMap.delete(id);
+    store.set('visibilityManager', _extends({}, store.state.visibilityManager, {
+      visibilityMap: newVisibilityMap
+    }));
+    params.onHiddenItemsChange?.(Array.from(newVisibilityMap.values()));
+  });
+  const toggleItem = useEventCallback(identifier => {
+    const visibilityMap = store.state.visibilityManager.visibilityMap;
+    const identifierWithType = instance.identifierWithType(identifier, 'visibility');
+    const id = instance.serializeIdentifier(identifierWithType);
+    if (visibilityMap.has(id)) {
+      showItem(identifierWithType);
+    } else {
+      hideItem(identifierWithType);
+    }
+  });
+  return {
+    instance: {
+      hideItem,
+      showItem,
+      toggleItemVisibility: toggleItem
+    }
+  };
+};
+useChartVisibilityManager.getInitialState = (params, currentState) => {
+  const seriesConfig = currentState.seriesConfig.config;
+  const initialItems = params.hiddenItems ?? params.initialHiddenItems;
+  return {
+    visibilityManager: {
+      visibilityMap: initialItems ? visibilityParamToMap(initialItems.map(item => createIdentifierWithType(currentState)(item)), seriesConfig) : EMPTY_VISIBILITY_MAP,
+      isControlled: params.hiddenItems !== undefined
+    }
+  };
+};
+useChartVisibilityManager.params = {
+  onHiddenItemsChange: true,
+  hiddenItems: true,
+  initialHiddenItems: true
+};

package/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.selectors.d.mts

@@ -0,0 +1,13 @@
+export declare const EMPTY_VISIBILITY_MAP: Map<any, any>;
+/**
+ * Selector to get the hidden identifiers from the visibility manager.
+ */
+export declare const selectorVisibilityMap: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartVisibilityManager.types.mjs").UseChartVisibilityManagerState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => Map<any, any>;
+/**
+ * Selector that returns a function which returns whether an item is visible.
+ */
+export declare const selectorIsItemVisibleGetter: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartVisibilityManager.types.mjs").UseChartVisibilityManagerState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => any;

package/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.selectors.mjs

@@ -0,0 +1,24 @@
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
+import { serializeIdentifier } from "../../corePlugins/useChartSeriesConfig/utils/serializeIdentifier.mjs";
+/**
+ * Selector to get the visibility manager state.
+ */
+const selectVisibilityManager = state => state.visibilityManager;
+export const EMPTY_VISIBILITY_MAP = new Map();
+
+/**
+ * Selector to get the hidden identifiers from the visibility manager.
+ */
+export const selectorVisibilityMap = createSelector(selectVisibilityManager, visibilityManager => visibilityManager?.visibilityMap ?? EMPTY_VISIBILITY_MAP);
+const selectorIsItemVisibleFn = (visibilityMap, seriesConfig) => {
+  return identifier => {
+    const uniqueId = serializeIdentifier(seriesConfig, identifier);
+    return !visibilityMap.has(uniqueId);
+  };
+};
+
+/**
+ * Selector that returns a function which returns whether an item is visible.
+ */
+export const selectorIsItemVisibleGetter = createSelectorMemoized(selectorVisibilityMap, selectorChartSeriesConfig, selectorIsItemVisibleFn);

package/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.types.d.mts

@@ -0,0 +1,115 @@
+import { type ChartPluginSignature } from "../../models/index.mjs";
+import { type UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.mjs";
+import { type SeriesId, type SeriesItemIdentifierWithType } from "../../../../models/index.mjs";
+import { type ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+export type VisibilityIdentifier<T extends ChartSeriesType = ChartSeriesType> = Partial<SeriesItemIdentifierWithType<T>> & (SeriesItemIdentifierWithType<T> extends {
+  subType?: infer U;
+} ? {
+  subType: U;
+  seriesId: SeriesId;
+} : {
+  seriesId: SeriesId;
+});
+export type VisibilityIdentifierWithType<T extends ChartSeriesType = ChartSeriesType> = T extends any ? VisibilityIdentifier<T> & {
+  type: T;
+} : never;
+export type VisibilityMap = Map<string, VisibilityIdentifierWithType>;
+export type IsItemVisibleFunction = {
+  /**
+   * Function to check if an item is visible based on its identifier.
+   *
+   * @param {VisibilityIdentifierWithType} identifier The identifier of the item to check.
+   * @returns {boolean} Whether the item is visible.
+   */
+  (identifier: VisibilityIdentifierWithType): boolean;
+};
+export interface UseChartVisibilityManagerInstance<T extends ChartSeriesType> {
+  /**
+   * Hide an item by its identifier.
+   *
+   * @param {VisibilityIdentifier} identifier The identifier of the item to hide.
+   */
+  hideItem(identifier: VisibilityIdentifier<T>): void;
+  /**
+   * Show an item by its identifier.
+   *
+   * @param {VisibilityIdentifier} identifier The identifier of the item to show.
+   */
+  showItem(identifier: VisibilityIdentifier<T>): void;
+  /**
+   * Toggle the visibility of an item by its identifier.
+   *
+   * @param {VisibilityIdentifier} identifier The identifier of the item to toggle.
+   */
+  toggleItemVisibility(identifier: VisibilityIdentifier<T> | VisibilityIdentifierWithType<T>): void;
+}
+export interface UseChartVisibilityManagerParameters<T extends ChartSeriesType> {
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifierWithType[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange?: (hiddenItems: VisibilityIdentifierWithType<T>[]) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (VisibilityIdentifier<T> | VisibilityIdentifierWithType<T>)[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (VisibilityIdentifier<T> | VisibilityIdentifierWithType<T>)[];
+}
+export type UseChartVisibilityManagerDefaultizedParameters<T extends ChartSeriesType> = UseChartVisibilityManagerParameters<T>;
+export interface UseChartVisibilityManagerState {
+  visibilityManager: {
+    /**
+     * Map of hidden identifiers by their serialized form.
+     */
+    visibilityMap: VisibilityMap;
+    /**
+     * Internal information to know if the user controls the state or not.
+     */
+    isControlled: boolean;
+  };
+}
+export type UseChartVisibilityManagerSignature<T extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
+  instance: UseChartVisibilityManagerInstance<T>;
+  state: UseChartVisibilityManagerState;
+  params: UseChartVisibilityManagerParameters<T>;
+  defaultizedParams: UseChartVisibilityManagerDefaultizedParameters<T>;
+  dependencies: [UseChartSeriesSignature];
+}>;

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

@@ -1,8 +1,8 @@
 import { type ChartPluginSignature } from "../../models/index.js";
 import { type UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
-import { type SeriesId, type SeriesItemIdentifier } from "../../../../models/index.js";
+import { type SeriesId, type SeriesItemIdentifierWithType } from "../../../../models/index.js";
 import { type ChartSeriesType } from "../../../../models/seriesType/config.js";
-export type VisibilityIdentifier<T extends ChartSeriesType = ChartSeriesType> = Partial<SeriesItemIdentifier<T>> & (SeriesItemIdentifier<T> extends {
+export type VisibilityIdentifier<T extends ChartSeriesType = ChartSeriesType> = Partial<SeriesItemIdentifierWithType<T>> & (SeriesItemIdentifierWithType<T> extends {
   subType?: infer U;
 } ? {
   subType: U;
@@ -13,15 +13,15 @@ export type VisibilityIdentifier<T extends ChartSeriesType = ChartSeriesType> =
 export type VisibilityIdentifierWithType<T extends ChartSeriesType = ChartSeriesType> = T extends any ? VisibilityIdentifier<T> & {
   type: T;
 } : never;
-export type VisibilityMap = Map<string, VisibilityIdentifier>;
+export type VisibilityMap = Map<string, VisibilityIdentifierWithType>;
 export type IsItemVisibleFunction = {
   /**
    * Function to check if an item is visible based on its identifier.
    *
-   * @param {VisibilityIdentifier} identifier The identifier of the item to check.
+   * @param {VisibilityIdentifierWithType} identifier The identifier of the item to check.
    * @returns {boolean} Whether the item is visible.
    */
-  (identifier: VisibilityIdentifier): boolean;
+  (identifier: VisibilityIdentifierWithType): boolean;
 };
 export interface UseChartVisibilityManagerInstance<T extends ChartSeriesType> {
   /**
@@ -41,14 +41,14 @@ export interface UseChartVisibilityManagerInstance<T extends ChartSeriesType> {
    *
    * @param {VisibilityIdentifier} identifier The identifier of the item to toggle.
    */
-  toggleItemVisibility(identifier: VisibilityIdentifier<T>): void;
+  toggleItemVisibility(identifier: VisibilityIdentifier<T> | VisibilityIdentifierWithType<T>): void;
 }
 export interface UseChartVisibilityManagerParameters<T extends ChartSeriesType> {
   /**
    * Callback fired when any hidden identifiers change.
-   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   * @param {VisibilityIdentifierWithType[]} hiddenItems The new list of hidden identifiers.
    */
-  onHiddenItemsChange?: (hiddenItems: VisibilityIdentifier<T>[]) => void;
+  onHiddenItemsChange?: (hiddenItems: VisibilityIdentifierWithType<T>[]) => void;
   /**
    * List of hidden series and/or items.
    *
@@ -69,7 +69,7 @@ export interface UseChartVisibilityManagerParameters<T extends ChartSeriesType>
    * ]
    * ```
    */
-  hiddenItems?: VisibilityIdentifier<T>[];
+  hiddenItems?: (VisibilityIdentifier<T> | VisibilityIdentifierWithType<T>)[];
   /**
    * List of initially hidden series and/or items.
    * Used for uncontrolled state.
@@ -91,7 +91,7 @@ export interface UseChartVisibilityManagerParameters<T extends ChartSeriesType>
    * ]
    * ```
    */
-  initialHiddenItems?: VisibilityIdentifier<T>[];
+  initialHiddenItems?: (VisibilityIdentifier<T> | VisibilityIdentifierWithType<T>)[];
 }
 export type UseChartVisibilityManagerDefaultizedParameters<T extends ChartSeriesType> = UseChartVisibilityManagerParameters<T>;
 export interface UseChartVisibilityManagerState {