@mui/x-charts 8.23.0 → 8.24.0

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.serializeIdentifier = void 0;
+/**
+ * Serializes a series item identifier into a unique string using the appropriate serializer
+ * from the provided series configuration.
+ *
+ * @param {ChartSeriesConfig<ChartSeriesType>} seriesConfig - The configuration object for chart series.
+ * @param {SeriesItemIdentifier<ChartSeriesType>} identifier - The series item identifier to serialize.
+ * @returns {string} A unique string representation of the identifier.
+ * @throws Will throw an error if no serializer is found for the given series type.
+ */
+const serializeIdentifier = (seriesConfig, identifier) => {
+  const serializer = seriesConfig[identifier.type]?.identifierSerializer;
+  if (!serializer) {
+    throw new Error(`MUI X Charts: No identifier serializer found for series type "${identifier.type}".`);
+  }
+  // @ts-expect-error identifierSerializer expects the full object,
+  // but this function accepts a partial one in order be able to serialize all identifiers.
+  return serializer(identifier);
+};
+exports.serializeIdentifier = serializeIdentifier;

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

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartSeries = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useEffectAfterFirstRender = require("@mui/x-internals/useEffectAfterFirstRender");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _colorPalettes = require("../../../../colorPalettes");
 var _processSeries = require("./processSeries");
+var _serializeIdentifier = require("./serializeIdentifier");
 const useChartSeries = ({
   params,
   store,
@@ -34,7 +36,12 @@ const useChartSeries = ({
       dataset
     }));
   }, [colors, dataset, series, theme, seriesConfig, store]);
-  return {};
+  const serializeIdentifier = (0, _useEventCallback.default)(identifier => (0, _serializeIdentifier.serializeIdentifier)(seriesConfig, identifier));
+  return {
+    instance: {
+      serializeIdentifier
+    }
+  };
 };
 exports.useChartSeries = useChartSeries;
 useChartSeries.params = {

package/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/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/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js

@@ -0,0 +1,81 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRegisterPointerInteractions = useRegisterPointerInteractions;
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _hooks = require("../../../../hooks");
+var _useStore = require("../../../store/useStore");
+var _ChartProvider = require("../../../../context/ChartProvider");
+var _getSVGPoint = require("../../../getSVGPoint");
+/**
+ * Hook to get pointer interaction props for chart items.
+ */
+function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, onItemLeave) {
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
+  const svgRef = (0, _hooks.useSvgRef)();
+  const store = (0, _useStore.useStore)();
+  const interactionActive = React.useRef(false);
+  const lastItemRef = React.useRef(undefined);
+  const onItemEnterRef = (0, _useEventCallback.default)(() => onItemEnter?.());
+  const onItemLeaveRef = (0, _useEventCallback.default)(() => 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 = (0, _getSVGPoint.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/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -20,6 +20,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;
 function computeAxisValue({
@@ -54,8 +64,10 @@ 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 ((0, _scaleGuards.isBandScale)(scale) && (0, _axis.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] = (0, _extends2.default)({
           offset: 0,
           height: 0,
@@ -64,7 +76,12 @@ 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' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
             values: axis.data

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

@@ -23,6 +23,7 @@ var _getSVGPoint = require("../../../getSVGPoint");
 var _useChartInteraction = require("../useChartInteraction");
 var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
 var _checkHasInteractionPlugin = require("../useChartInteraction/checkHasInteractionPlugin");
+const AXIS_CLICK_SERIES_TYPES = new Set(['bar', 'rangeBar', 'line']);
 const useChartCartesianAxis = ({
   params,
   store,
@@ -172,13 +173,19 @@ 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/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/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorBarItemAtPosition = void 0;
+var _store = require("@mui/x-internals/store");
+var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
+var _useChartSeries = require("../../corePlugins/useChartSeries");
+var _getBandSize = require("../../../../internals/getBandSize");
+var _scaleGuards = require("../../../../internals/scaleGuards");
+var _invertScale = require("../../../../internals/invertScale");
+const selectorBarItemAtPosition = exports.selectorBarItemAtPosition = (0, _store.createSelector)(_useChartCartesianAxisRendering.selectorChartXAxis, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartSeries.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 (!(0, _scaleGuards.isBandScale)(bandScale)) {
+        continue;
+      }
+      const dataIndex = (0, _invertScale.getDataIndexForOrdinalScaleValue)(bandScale, svgPointBandCoordinate);
+      const {
+        barWidth,
+        offset
+      } = (0, _getBandSize.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/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/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMaxSeriesLength = getMaxSeriesLength;
+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/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getNextNonEmptySeries = getNextNonEmptySeries;
+var _getNonEmptySeriesArray = require("./getNonEmptySeriesArray");
 /**
  * Returns the next series type and id that contains some data.
  * Returns `null` if no other series have data.
@@ -13,39 +14,10 @@ exports.getNextNonEmptySeries = getNextNonEmptySeries;
  * @param seriesId - The current series id.
  */
 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 = (0, _getNonEmptySeriesArray.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/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/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getNonEmptySeriesArray.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNonEmptySeriesArray = getNonEmptySeriesArray;
+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/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries.js

@@ -4,43 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPreviousNonEmptySeries = getPreviousNonEmptySeries;
+var _getNonEmptySeriesArray = require("./getNonEmptySeriesArray");
 /**
  * Returns the previous series type and id that contains some data.
  * Returns `null` if no other series have data.
  */
 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 = (0, _getNonEmptySeriesArray.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/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/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/internals/plugins/featurePlugins/useChartVisibilityManager/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartVisibilityManager: true
+};
+Object.defineProperty(exports, "useChartVisibilityManager", {
+  enumerable: true,
+  get: function () {
+    return _useChartVisibilityManager.useChartVisibilityManager;
+  }
+});
+var _useChartVisibilityManager = require("./useChartVisibilityManager");
+var _useChartVisibilityManager2 = require("./useChartVisibilityManager.types");
+Object.keys(_useChartVisibilityManager2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartVisibilityManager2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartVisibilityManager2[key];
+    }
+  });
+});
+var _useChartVisibilityManager3 = require("./useChartVisibilityManager.selectors");
+Object.keys(_useChartVisibilityManager3).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartVisibilityManager3[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartVisibilityManager3[key];
+    }
+  });
+});

package/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/internals/plugins/featurePlugins/useChartVisibilityManager/isIdentifierVisible.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isIdentifierVisible = void 0;
+var _serializeIdentifier = require("../../corePlugins/useChartSeries/serializeIdentifier");
+const isIdentifierVisible = (visibilityMap, identifier, seriesConfig) => {
+  const uniqueId = (0, _serializeIdentifier.serializeIdentifier)(seriesConfig, identifier);
+  return !visibilityMap.has(uniqueId);
+};
+exports.isIdentifierVisible = isIdentifierVisible;

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