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

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs

@@ -0,0 +1,86 @@
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { createSelector, createSelectorMemoizedWithOptions } from '@mui/x-internals/store';
+import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.mjs";
+import { generateSvg2rotation } from "./coordinateTransformation.mjs";
+import { getAxisIndex } from "./getAxisIndex.mjs";
+import { selectorChartPolarCenter, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.mjs";
+const optionalGetAxisId = (_, id) => id;
+const optionalGetAxisIds = (_, ids) => ids;
+
+/**
+ * Get interaction indexes
+ */
+
+function indexGetter(value, axes, ids) {
+  return Array.isArray(ids) ? ids.map(id => getAxisIndex(axes.axis[id], value)) : getAxisIndex(axes.axis[ids], value);
+}
+
+/**
+ * Helper to get the rotation associated to the interaction coordinate.
+ */
+const selectorChartsInteractionRotationAngle = createSelector(selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartPolarCenter, (x, y, center) => {
+  if (x === null || y === null) {
+    return null;
+  }
+  return generateSvg2rotation(center)(x, y);
+});
+export const selectorChartsInteractionRotationAxisIndex = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id = rotationAxis.axisIds[0]) => rotation === null ? null : indexGetter(rotation, rotationAxis, id));
+export const selectorChartsInteractionRotationAxisIndexes = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids = rotationAxis.axisIds) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids));
+export const selectorChartsInteractionRotationAxisValue = createSelector(selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex, optionalGetAxisId, (rotationAxis, rotationIndex, id = rotationAxis.axisIds[0]) => {
+  if (rotationIndex === null || rotationIndex === -1 || rotationAxis.axisIds.length === 0) {
+    return null;
+  }
+  const data = rotationAxis.axis[id]?.data;
+  if (!data) {
+    return null;
+  }
+  return data[rotationIndex];
+});
+export const selectorChartsInteractionRotationAxisValues = createSelector(selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndexes, optionalGetAxisIds, (rotationAxis, rotationIndexes, ids = rotationAxis.axisIds) => {
+  if (rotationIndexes === null) {
+    return null;
+  }
+  return ids.map((id, axisIndex) => {
+    const rotationIndex = rotationIndexes[axisIndex];
+    if (rotationIndex === -1) {
+      return null;
+    }
+    return rotationAxis.axis[id].data?.[rotationIndex];
+  });
+});
+
+/**
+ * Get rotation-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipRotationAxes = createSelectorMemoizedWithOptions({
+  memoizeOptions: {
+    // Keep the same reference if array content is the same.
+    // If possible, avoid this pattern by creating selectors that
+    // uses string/number as arguments.
+    resultEqualityCheck: isDeepEqual
+  }
+})(selectorChartsInteractionRotationAxisIndexes, selectorChartRotationAxis, (indexes, axes) => {
+  if (indexes === null) {
+    return [];
+  }
+  return axes.axisIds.map((axisId, axisIndex) => ({
+    axisId,
+    dataIndex: indexes[axisIndex]
+  })).filter(({
+    axisId,
+    dataIndex
+  }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
+});
+
+/**
+ * Get radius-axis ids and corresponding data index that should be displayed in the tooltip.
+ */
+export const selectorChartsInteractionTooltipRadiusAxes = () => {
+  // TODO implement this selector and add it to the `selectorChartsInteractionPolarAxisTooltip`
+  return [];
+};
+
+/**
+ * Return `true` if the axis tooltip has something to display.
+ */
+export const selectorChartsInteractionPolarAxisTooltip = createSelector(selectorChartsInteractionTooltipRotationAxes, rotationTooltip => rotationTooltip.length > 0);

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

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

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

@@ -0,0 +1,2 @@
+export { useChartTooltip } from "./useChartTooltip.mjs";
+export * from "./useChartTooltip.selectors.mjs";

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

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

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

@@ -10,9 +10,11 @@ var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsist
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
+var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries");
 const useChartTooltip = ({
   store,
-  params
+  params,
+  instance
 }) => {
   (0, _useAssertModelConsistency.useAssertModelConsistency)({
     warningPrefix: 'MUI X Charts',
@@ -23,17 +25,20 @@ const useChartTooltip = ({
   });
   (0, _useEnhancedEffect.default)(() => {
     if (store.state.tooltip.item !== params.tooltipItem) {
-      store.set('tooltip', (0, _extends2.default)({}, 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', (0, _extends2.default)({}, store.state.tooltip, {
+          item: newItem
+        }));
+      }
     }
-  }, [store, params.tooltipItem]);
+  }, [store, instance, params.tooltipItem]);
   const removeTooltipItem = (0, _useEventCallback.default)(function removeTooltipItem(itemToRemove) {
     const prevItem = store.state.tooltip.item;
     if (prevItem === null) {
       return; // Already null, nothing to do
     }
-    if (!itemToRemove || (0, _fastObjectShallowCompare.fastObjectShallowCompare)(prevItem, itemToRemove)) {
+    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
@@ -65,10 +70,12 @@ const useChartTooltip = ({
   };
 };
 exports.useChartTooltip = useChartTooltip;
-useChartTooltip.getInitialState = params => ({
+useChartTooltip.getInitialState = (params, currentState) => ({
   tooltip: {
     itemIsControlled: params.tooltipItem !== undefined,
-    item: params.tooltipItem ?? null
+    item: params.tooltipItem == null ? null : (0, _useChartSeries.createIdentifierWithType)(currentState)(
+    // Need some as because the generic SeriesType can't be propagated to plugins methods.
+    params.tooltipItem)
   }
 });
 useChartTooltip.params = {

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

@@ -1,13 +1,13 @@
-import { type DefaultizedProps } from '@mui/x-internals/types';
+import type { DefaultizedProps } from '@mui/x-internals/types';
 import type { ChartPluginSignature } from "../../models/index.js";
-import type { SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { SeriesItemIdentifier, SeriesItemIdentifierWithType } from "../../../../models/seriesType/index.js";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
 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,20 +15,20 @@ 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.
    *
    * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
    */
-  onTooltipItemChange?: (tooltipItem: SeriesItemIdentifier<TSeries> | null) => void;
+  onTooltipItemChange?: (tooltipItem: SeriesItemIdentifierWithType<TSeries> | null) => void;
 }
 export type UseChartTooltipDefaultizedParameters<TSeries extends ChartSeriesType = ChartSeriesType> = DefaultizedProps<UseChartTooltipParameters<TSeries>, 'tooltipItem'>;
 export interface UseChartTooltipState<TSeries extends ChartSeriesType = ChartSeriesType> {
@@ -40,7 +40,7 @@ export interface UseChartTooltipState<TSeries extends ChartSeriesType = ChartSer
     /**
      * The item currently under the pointer.
      */
-    item: null | SeriesItemIdentifier<TSeries>;
+    item: null | SeriesItemIdentifierWithType<TSeries>;
   };
 }
 export type UseChartTooltipSignature<TSeries extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{

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

@@ -11,6 +11,7 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _useEffectAfterFirstRender = require("@mui/x-internals/useEffectAfterFirstRender");
 var _useChartVisibilityManager = require("./useChartVisibilityManager.selectors");
 var _visibilityParamToMap = require("./visibilityParamToMap");
+var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries");
 const useChartVisibilityManager = ({
   store,
   params,
@@ -25,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, store.state.seriesConfig.config)
+      visibilityMap: (0, _visibilityParamToMap.visibilityParamToMap)(params.hiddenItems.map(item => instance.identifierWithType(item, 'visibility')), store.state.seriesConfig.config)
     }));
-  }, [store, params.hiddenItems]);
+  }, [store, instance, params.hiddenItems]);
   const hideItem = (0, _useEventCallback.default)(identifier => {
     const visibilityMap = store.state.visibilityManager.visibilityMap;
-    const id = instance.serializeIdentifier(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(identifier);
+    const identifierWithType = instance.identifierWithType(identifier, 'visibility');
+    const id = instance.serializeIdentifier(identifierWithType);
     if (!visibilityMap.has(id)) {
       return;
     }
@@ -56,11 +60,12 @@ const useChartVisibilityManager = ({
   });
   const toggleItem = (0, _useEventCallback.default)(identifier => {
     const visibilityMap = store.state.visibilityManager.visibilityMap;
-    const id = instance.serializeIdentifier(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 {
@@ -77,7 +82,7 @@ useChartVisibilityManager.getInitialState = (params, currentState) => {
   const initialItems = params.hiddenItems ?? params.initialHiddenItems;
   return {
     visibilityManager: {
-      visibilityMap: initialItems ? (0, _visibilityParamToMap.visibilityParamToMap)(initialItems, seriesConfig) : _useChartVisibilityManager.EMPTY_VISIBILITY_MAP,
+      visibilityMap: initialItems ? (0, _visibilityParamToMap.visibilityParamToMap)(initialItems.map(item => (0, _useChartSeries.createIdentifierWithType)(currentState)(item)), seriesConfig) : _useChartVisibilityManager.EMPTY_VISIBILITY_MAP,
       isControlled: params.hiddenItems !== undefined
     }
   };

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;