@mui/x-charts 8.23.0 → 8.24.0

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

@@ -45,7 +45,18 @@ export interface UseChartSeriesState<T extends ChartSeriesType = ChartSeriesType
     dataset?: Readonly<DatasetType>;
   };
 }
-export interface UseChartSeriesInstance {}
+export type SerializeIdentifierFunction = <T extends {
+  type: ChartSeriesType;
+}>(identifier: T) => string;
+export interface UseChartSeriesInstance {
+  /**
+   * Function to serialize a series item identifier into a unique string.
+   *
+   * @param identifier The identifier to serialize.
+   * @returns A unique string representing the identifier.
+   */
+  serializeIdentifier: SerializeIdentifierFunction;
+}
 export type UseChartSeriesSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
   params: UseChartSeriesParameters;
   defaultizedParams: UseChartSeriesDefaultizedParameters<SeriesType>;

package/esm/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.d.ts

@@ -0,0 +1,11 @@
+import { type SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
+import { type UseChartHighlightSignature } from "../useChartHighlight/index.js";
+import { type UseChartCartesianAxisSignature } from "../useChartCartesianAxis/index.js";
+import { type ChartState } from "../../models/index.js";
+/**
+ * Hook to get pointer interaction props for chart items.
+ */
+export declare function useRegisterPointerInteractions(getItemAtPosition: (state: ChartState<[UseChartCartesianAxisSignature, UseChartHighlightSignature]>, point: {
+  x: number;
+  y: number;
+}) => SeriesItemIdentifier | undefined, onItemEnter?: () => void, onItemLeave?: () => void): void;

package/esm/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js

@@ -0,0 +1,74 @@
+'use client';
+
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useSvgRef } from "../../../../hooks/index.js";
+import { useStore } from "../../../store/useStore.js";
+import { useChartContext } from "../../../../context/ChartProvider/index.js";
+import { getSVGPoint } from "../../../getSVGPoint.js";
+/**
+ * Hook to get pointer interaction props for chart items.
+ */
+export function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, onItemLeave) {
+  const {
+    instance
+  } = useChartContext();
+  const svgRef = useSvgRef();
+  const store = useStore();
+  const interactionActive = React.useRef(false);
+  const lastItemRef = React.useRef(undefined);
+  const onItemEnterRef = useEventCallback(() => onItemEnter?.());
+  const onItemLeaveRef = useEventCallback(() => onItemLeave?.());
+  React.useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return undefined;
+    }
+    function onPointerEnter() {
+      interactionActive.current = true;
+    }
+    function reset() {
+      const lastItem = lastItemRef.current;
+      if (lastItem) {
+        lastItemRef.current = undefined;
+        instance.removeTooltipItem(lastItem);
+        instance.clearHighlight();
+        onItemLeaveRef();
+      }
+    }
+    function onPointerLeave() {
+      interactionActive.current = false;
+      reset();
+    }
+    const onPointerMove = function onPointerMove(event) {
+      const svgPoint = getSVGPoint(svg, event);
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
+        reset();
+        return;
+      }
+      const item = getItemAtPosition(store.state, svgPoint);
+      if (item) {
+        instance.setLastUpdateSource('pointer');
+        instance.setTooltipItem(item);
+        instance.setHighlight(item);
+        onItemEnterRef();
+        lastItemRef.current = item;
+      } else {
+        reset();
+      }
+    };
+    svg.addEventListener('pointerleave', onPointerLeave);
+    svg.addEventListener('pointermove', onPointerMove);
+    svg.addEventListener('pointerenter', onPointerEnter);
+    return () => {
+      svg.removeEventListener('pointerenter', onPointerEnter);
+      svg.removeEventListener('pointermove', onPointerMove);
+      svg.removeEventListener('pointerleave', onPointerLeave);
+
+      /* Clean up state if this item is unmounted while active. */
+      if (interactionActive.current) {
+        onPointerLeave();
+      }
+    };
+  }, [getItemAtPosition, instance, onItemEnterRef, onItemLeaveRef, store, svgRef]);
+}

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -13,6 +13,16 @@ reverse) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return reverse ? [range[1], range[0]] : range;
 }
+function shouldIgnoreGapRatios(scale, categoryGapRatio) {
+  const step = scale.step();
+  const paddingPx = step * categoryGapRatio;
+
+  /* If the padding is less than 0.1px, we consider it negligible and ignore it.
+   * This prevents issues where very small gaps cause rendering artifacts or unexpected layouts.
+   * A threshold of 0.1px is chosen as it's generally below the perceptible limit for most displays.
+   */
+  return paddingPx < 0.1;
+}
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
 export function computeAxisValue({
@@ -47,8 +57,10 @@ export function computeAxisValue({
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
       const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
       if (isBandScale(scale) && isBandScaleConfig(axis)) {
-        const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-        const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+        const desiredCategoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+        const ignoreGapRatios = shouldIgnoreGapRatios(scale, desiredCategoryGapRatio);
+        const categoryGapRatio = ignoreGapRatios ? 0 : desiredCategoryGapRatio;
+        const barGapRatio = ignoreGapRatios ? 0 : axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
         completeAxis[axis.id] = _extends({
           offset: 0,
           height: 0,
@@ -57,7 +69,12 @@ export function computeAxisValue({
           triggerTooltip
         }, axis, {
           data,
-          scale,
+          /* Doing this here is technically wrong, but acceptable in practice.
+           * In theory, this should be done in the normalized scale selector, but then we'd need that selector to depend
+           * on the zoom range, which would void its goal (which is to be independent of zoom).
+           * Since we only ignore gap ratios when they're practically invisible, the small errors caused by this
+           * discrepancy will hopefully not be noticeable. */
+          scale: ignoreGapRatios ? scale.copy().padding(0) : scale,
           tickNumber,
           colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
             values: axis.data

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

@@ -16,6 +16,7 @@ import { getSVGPoint } from "../../../getSVGPoint.js";
 import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
 import { selectorChartAxisInteraction } from "./useChartCartesianInteraction.selectors.js";
 import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.js";
+const AXIS_CLICK_SERIES_TYPES = new Set(['bar', 'rangeBar', 'line']);
 export const useChartCartesianAxis = ({
   params,
   store,
@@ -165,13 +166,19 @@ export const useChartCartesianAxis = ({
       // The .data exist because otherwise the dataIndex would be null or -1.
       const axisValue = (isXAxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
       const seriesValues = {};
-      Object.keys(processedSeries).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
-        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
-          const seriesItem = processedSeries[seriesType].series[seriesId];
+      Object.keys(processedSeries).filter(seriesType => AXIS_CLICK_SERIES_TYPES.has(seriesType)).forEach(seriesType => {
+        // @ts-ignore
+        const seriesTypeConfig = processedSeries[seriesType];
+        seriesTypeConfig?.seriesOrder.forEach(seriesId => {
+          const seriesItem = seriesTypeConfig.series[seriesId];
           const providedXAxisId = seriesItem.xAxisId;
           const providedYAxisId = seriesItem.yAxisId;
           const axisKey = isXAxis ? providedXAxisId : providedYAxisId;
           if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+            // @ts-ignore This is safe because users need to opt in to use range bar series.
+            // In that case, they should import the module augmentation from `x-charts-pro/moduleAugmentation/rangeBarOnClick`
+            // Which adds the proper type to the series data.
+            // TODO(v9): Remove this ts-ignore when we can make the breaking change to ChartsAxisData.
             seriesValues[seriesId] = seriesItem.data[dataIndex];
           }
         });

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.d.ts

@@ -0,0 +1,4 @@
+import { type BarItemIdentifier } from "../../../../models/index.js";
+export declare const selectorBarItemAtPosition: (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<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, svgPoint: Pick<DOMPoint, "x" | "y">) => BarItemIdentifier | undefined;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.js

@@ -0,0 +1,83 @@
+import { createSelector } from '@mui/x-internals/store';
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
+import { getBandSize } from "../../../getBandSize.js";
+import { isBandScale } from "../../../scaleGuards.js";
+import { getDataIndexForOrdinalScaleValue } from "../../../invertScale.js";
+export const selectorBarItemAtPosition = createSelector(selectorChartXAxis, selectorChartYAxis, selectorChartSeriesProcessed, function selectorBarItemAtPosition({
+  axis: xAxes,
+  axisIds: xAxisIds
+}, {
+  axis: yAxes,
+  axisIds: yAxisIds
+}, processedSeries, svgPoint) {
+  const {
+    series,
+    stackingGroups = []
+  } = processedSeries?.bar ?? {};
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  let item = undefined;
+  for (let stackIndex = 0; stackIndex < stackingGroups.length; stackIndex += 1) {
+    const group = stackingGroups[stackIndex];
+    const seriesIds = group.ids;
+    for (const seriesId of seriesIds) {
+      const aSeries = (series ?? {})[seriesId];
+      const xAxisId = aSeries.xAxisId ?? defaultXAxisId;
+      const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
+      const xAxis = xAxes[xAxisId];
+      const yAxis = yAxes[yAxisId];
+      const bandAxis = aSeries.layout === 'horizontal' ? yAxis : xAxis;
+      const continuousAxis = aSeries.layout === 'horizontal' ? xAxis : yAxis;
+      const bandScale = bandAxis.scale;
+      const svgPointBandCoordinate = aSeries.layout === 'horizontal' ? svgPoint.y : svgPoint.x;
+      if (!isBandScale(bandScale)) {
+        continue;
+      }
+      const dataIndex = getDataIndexForOrdinalScaleValue(bandScale, svgPointBandCoordinate);
+      const {
+        barWidth,
+        offset
+      } = getBandSize(bandScale.bandwidth(), stackingGroups.length, bandAxis.barGapRatio);
+      const barOffset = stackIndex * (barWidth + offset);
+      const bandValue = bandAxis.data?.[dataIndex];
+      if (bandValue == null) {
+        continue;
+      }
+      const bandStart = bandScale(bandValue);
+      if (bandStart == null) {
+        continue;
+      }
+      const bandBarStart = bandStart + barOffset;
+      const bandBarEnd = bandBarStart + barWidth;
+      const bandBarMin = Math.min(bandBarStart, bandBarEnd);
+      const bandBarMax = Math.max(bandBarStart, bandBarEnd);
+      if (svgPointBandCoordinate >= bandBarMin && svgPointBandCoordinate <= bandBarMax) {
+        // The point is inside the band for this series
+        const svgPointContinuousCoordinate = aSeries.layout === 'horizontal' ? svgPoint.x : svgPoint.y;
+        const bar = aSeries.stackedData[dataIndex];
+        const start = continuousAxis.scale(bar[0]);
+        const end = continuousAxis.scale(bar[1]);
+        if (start == null || end == null) {
+          continue;
+        }
+        const continuousMin = Math.min(start, end);
+        const continuousMax = Math.max(start, end);
+        if (svgPointContinuousCoordinate >= continuousMin && svgPointContinuousCoordinate <= continuousMax) {
+          item = {
+            seriesId,
+            dataIndex
+          };
+        }
+      }
+    }
+  }
+  if (item) {
+    return {
+      type: 'bar',
+      seriesId: item.seriesId,
+      dataIndex: item.dataIndex
+    };
+  }
+  return undefined;
+});

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength.d.ts

@@ -0,0 +1,3 @@
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.js";
+import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/useChartSeries.types.js";
+export declare function getMaxSeriesLength<OutSeriesType extends Exclude<ChartSeriesType, 'sankey'>>(series: ProcessedSeries<ChartSeriesType>, availableSeriesTypes: Set<OutSeriesType>): number;

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

@@ -0,0 +1,6 @@
+export function getMaxSeriesLength(series, availableSeriesTypes) {
+  return Object.keys(series).filter(type => availableSeriesTypes.has(type)).flatMap(type => {
+    const seriesOfType = series[type];
+    return seriesOfType.seriesOrder.filter(seriesId => seriesOfType.series[seriesId].data.length > 0 && seriesOfType.series[seriesId].data.some(value => value != null)).map(seriesId => seriesOfType.series[seriesId].data.length);
+  }).reduce((maxLengths, length) => Math.max(maxLengths, length), 0);
+}

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

@@ -1,3 +1,5 @@
+import { getNonEmptySeriesArray } from "./getNonEmptySeriesArray.js";
+
 /**
  * Returns the next series type and id that contains some data.
  * Returns `null` if no other series have data.
@@ -7,39 +9,10 @@
  * @param seriesId - The current series id.
  */
 export function getNextNonEmptySeries(series, availableSeriesTypes, type, seriesId) {
-  const seriesType = Object.keys(series);
-  const currentSeriesIndex = type !== undefined && seriesId !== undefined && series[type] && series[type].series[seriesId] ? series[type].seriesOrder.indexOf(seriesId) : -1;
-  const typesAvailable = seriesType.filter(t => availableSeriesTypes?.has(t));
-  const startingTypeIndex = type !== undefined && series[type] ? typesAvailable.indexOf(type) : 0;
-
-  // Loop over all series types starting with the current seriesType
-  for (let typeGap = 0; typeGap < typesAvailable.length; typeGap += 1) {
-    const typeIndex = (startingTypeIndex + typeGap) % typesAvailable.length;
-    const seriesOfType = series[typesAvailable[typeIndex]];
-
-    // Edge case for the current series type: we don't loop on previous series of the same type.
-    const startingSeriesIndex = typeGap === 0 ? currentSeriesIndex + 1 : 0;
-    for (let seriesIndex = startingSeriesIndex; seriesIndex < seriesOfType.seriesOrder.length; seriesIndex += 1) {
-      if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
-        return {
-          type: typesAvailable[typeIndex],
-          seriesId: seriesOfType.seriesOrder[seriesIndex]
-        };
-      }
-    }
-  }
-
-  // End looping on the initial type up to the initial series (excluded)
-  const typeIndex = startingTypeIndex;
-  const seriesOfType = series[typesAvailable[typeIndex]];
-  const endingSeriesIndex = currentSeriesIndex;
-  for (let seriesIndex = 0; seriesIndex < endingSeriesIndex; seriesIndex += 1) {
-    if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
-      return {
-        type: typesAvailable[typeIndex],
-        seriesId: seriesOfType.seriesOrder[seriesIndex]
-      };
-    }
+  const nonEmptySeries = getNonEmptySeriesArray(series, availableSeriesTypes);
+  if (nonEmptySeries.length === 0) {
+    return null;
   }
-  return null;
+  const currentSeriesIndex = type !== undefined && seriesId !== undefined ? nonEmptySeries.findIndex(seriesItem => seriesItem.type === type && seriesItem.seriesId === seriesId) : -1;
+  return nonEmptySeries[(currentSeriesIndex + 1) % nonEmptySeries.length];
 }

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getNonEmptySeriesArray.d.ts

@@ -0,0 +1,7 @@
+import type { SeriesId } from "../../../../../models/seriesType/common.js";
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.js";
+import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/useChartSeries.types.js";
+export declare function getNonEmptySeriesArray<OutSeriesType extends Exclude<ChartSeriesType, 'sankey'>>(series: ProcessedSeries<ChartSeriesType>, availableSeriesTypes: Set<OutSeriesType>): {
+  seriesId: SeriesId;
+  type: OutSeriesType;
+}[];

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

@@ -0,0 +1,9 @@
+export function getNonEmptySeriesArray(series, availableSeriesTypes) {
+  return Object.keys(series).filter(type => availableSeriesTypes.has(type)).flatMap(type => {
+    const seriesOfType = series[type];
+    return seriesOfType.seriesOrder.filter(seriesId => seriesOfType.series[seriesId].data.length > 0 && seriesOfType.series[seriesId].data.some(value => value != null)).map(seriesId => ({
+      type,
+      seriesId
+    }));
+  });
+}

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

@@ -1,40 +1,18 @@
+import { getNonEmptySeriesArray } from "./getNonEmptySeriesArray.js";
+
 /**
  * Returns the previous series type and id that contains some data.
  * Returns `null` if no other series have data.
  */
 export function getPreviousNonEmptySeries(series, availableSeriesTypes, type, seriesId) {
-  const seriesType = Object.keys(series);
-  const startingSeriesIndex = type !== undefined && seriesId !== undefined && series[type] && series[type].series[seriesId] ? series[type].seriesOrder.indexOf(seriesId) : 1;
-  const typesAvailable = seriesType.filter(t => availableSeriesTypes?.has(t));
-  const startingTypeIndex = type !== undefined && series[type] ? typesAvailable.indexOf(type) : 0;
-
-  // Loop over all series types starting with the current seriesType
-  for (let typeGap = 0; typeGap < typesAvailable.length; typeGap += 1) {
-    const typeIndex = (typesAvailable.length + startingTypeIndex - typeGap) % typesAvailable.length;
-    const seriesOfType = series[typesAvailable[typeIndex]];
-    const maxGap = typeGap === 0 ? startingSeriesIndex + 1 : seriesOfType.seriesOrder.length;
-    for (let seriesGap = 1; seriesGap < maxGap; seriesGap += 1) {
-      const seriesIndex = (seriesOfType.seriesOrder.length + startingSeriesIndex - seriesGap) % seriesOfType.seriesOrder.length;
-      if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
-        return {
-          type: typesAvailable[typeIndex],
-          seriesId: seriesOfType.seriesOrder[seriesIndex]
-        };
-      }
-    }
+  const nonEmptySeries = getNonEmptySeriesArray(series, availableSeriesTypes);
+  if (nonEmptySeries.length === 0) {
+    return null;
   }
-
-  // End looping on the initial type down to the initial series (excluded)
-  const typeIndex = startingTypeIndex;
-  const seriesOfType = series[typesAvailable[typeIndex]];
-  const availableSeriesIds = seriesOfType.seriesOrder;
-  for (let seriesIndex = availableSeriesIds.length - 1; seriesIndex > startingSeriesIndex; seriesIndex -= 1) {
-    if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
-      return {
-        type: typesAvailable[typeIndex],
-        seriesId: seriesOfType.seriesOrder[seriesIndex]
-      };
-    }
+  const currentSeriesIndex = type !== undefined && seriesId !== undefined ? nonEmptySeries.findIndex(seriesItem => seriesItem.type === type && seriesItem.seriesId === seriesId) : -1;
+  if (currentSeriesIndex <= 0) {
+    // If no current series, or if it's the first series
+    return nonEmptySeries[nonEmptySeries.length - 1];
   }
-  return null;
+  return nonEmptySeries[(currentSeriesIndex - 1 + nonEmptySeries.length) % nonEmptySeries.length];
 }

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

@@ -1,12 +1,12 @@
 export declare const selectorChartsTooltipPointerItem: (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("./useChartTooltip.types.js").UseChartTooltipState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null;
+}) => import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null;
 export declare const selectorChartsTooltipPointerItemIsDefined: (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("./useChartTooltip.types.js").UseChartTooltipState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean;
 export declare const selectorChartsTooltipItem: (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/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null;
+}) => import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null;
 export declare const selectorChartsTooltipItemIsDefined: (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/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean;

package/esm/internals/plugins/featurePlugins/useChartVisibilityManager/index.d.ts

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

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

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

package/esm/internals/plugins/featurePlugins/useChartVisibilityManager/isIdentifierVisible.d.ts

@@ -0,0 +1,4 @@
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { ChartSeriesConfig } from "../../models/index.js";
+import type { VisibilityIdentifier, VisibilityMap } from "./useChartVisibilityManager.types.js";
+export declare const isIdentifierVisible: (visibilityMap: VisibilityMap, identifier: VisibilityIdentifier, seriesConfig: ChartSeriesConfig<ChartSeriesType>) => boolean;

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

@@ -0,0 +1,5 @@
+import { serializeIdentifier } from "../../corePlugins/useChartSeries/serializeIdentifier.js";
+export const isIdentifierVisible = (visibilityMap, identifier, seriesConfig) => {
+  const uniqueId = serializeIdentifier(seriesConfig, identifier);
+  return !visibilityMap.has(uniqueId);
+};

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

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

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

@@ -0,0 +1,78 @@
+'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.js";
+import { visibilityParamToMap } from "./visibilityParamToMap.js";
+export const useChartVisibilityManager = ({
+  store,
+  params,
+  seriesConfig,
+  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, seriesConfig)
+    }));
+  }, [store, params.hiddenItems, seriesConfig]);
+  const hideItem = useEventCallback(identifier => {
+    const visibilityMap = store.state.visibilityManager.visibilityMap;
+    const id = instance.serializeIdentifier(identifier);
+    if (visibilityMap.has(id)) {
+      return;
+    }
+    const newVisibilityMap = new Map(visibilityMap);
+    newVisibilityMap.set(id, identifier);
+    store.set('visibilityManager', _extends({}, store.state.visibilityManager, {
+      visibilityMap: newVisibilityMap
+    }));
+    params.onHiddenItemsChange?.(Array.from(newVisibilityMap.values()));
+  });
+  const showItem = useEventCallback(identifier => {
+    const visibilityMap = store.state.visibilityManager.visibilityMap;
+    const id = instance.serializeIdentifier(identifier);
+    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 id = instance.serializeIdentifier(identifier);
+    if (visibilityMap.has(id)) {
+      showItem(identifier);
+    } else {
+      hideItem(identifier);
+    }
+  });
+  return {
+    instance: {
+      hideItem,
+      showItem,
+      toggleItemVisibility: toggleItem
+    }
+  };
+};
+useChartVisibilityManager.getInitialState = (params, _, seriesConfig) => ({
+  visibilityManager: {
+    visibilityMap: params.hiddenItems ? visibilityParamToMap(params.hiddenItems, seriesConfig) : EMPTY_VISIBILITY_MAP,
+    isControlled: params.hiddenItems !== undefined
+  }
+});
+useChartVisibilityManager.params = {
+  onHiddenItemsChange: true,
+  hiddenItems: true
+};

package/esm/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.selectors.d.ts

@@ -0,0 +1,16 @@
+import type { VisibilityIdentifier } from "./useChartVisibilityManager.types.js";
+import type { ChartSeriesConfig } from "../../models/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+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.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("./useChartVisibilityManager.types.js").UseChartVisibilityManagerState> & {
+  cacheKey: import("../../models/index.js").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.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("./useChartVisibilityManager.types.js").UseChartVisibilityManagerState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => (seriesConfig: ChartSeriesConfig<ChartSeriesType>, identifier: VisibilityIdentifier) => boolean;

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

@@ -0,0 +1,19 @@
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { isIdentifierVisible } from "./isIdentifierVisible.js";
+/**
+ * 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);
+
+/**
+ * Selector that returns a function which returns whether an item is visible.
+ */
+export const selectorIsItemVisibleGetter = createSelectorMemoized(selectorVisibilityMap, visibilityMap => {
+  return (seriesConfig, identifier) => isIdentifierVisible(visibilityMap, identifier, seriesConfig);
+});