[charts] Handle item identifier with data

packages/x-charts-pro/src/typeOverloads/modules.ts

@@ -20,6 +20,7 @@ declare module '@mui/x-charts/internals' {
       series: DefaultizedHeatmapSeriesType;
       seriesProp: HeatmapSeriesType;
       itemIdentifier: HeatmapItemIdentifier;
+      itemIdentifierWithData: HeatmapItemIdentifier;
       valueType: HeatmapValueType;
       axisType: 'cartesian';
     };
@@ -30,6 +31,7 @@ declare module '@mui/x-charts/internals' {
       series: DefaultizedFunnelSeriesType;
       seriesProp: FunnelSeriesType;
       itemIdentifier: FunnelItemIdentifier;
+      itemIdentifierWithData: FunnelItemIdentifier;
       valueType: MakeRequired<FunnelValueType, 'id' | 'color'>;
       axisType: 'cartesian';
     };

packages/x-charts/src/hooks/useInteractionItemProps.ts

@@ -1,10 +1,10 @@
 'use client';
 import * as React from 'react';
-import { SeriesItemIdentifier } from '../models';
+import { SeriesItemIdentifierWithData } from '../models';
 import { useChartContext } from '../context/ChartProvider';
 import { UseChartHighlightSignature } from '../internals/plugins/featurePlugins/useChartHighlight';
 import { UseChartInteractionSignature } from '../internals/plugins/featurePlugins/useChartInteraction';
-import { ChartItemIdentifier, ChartSeriesType } from '../models/seriesType/config';
+import { ChartSeriesType, type ChartItemIdentifierWithData } from '../models/seriesType/config';
 import { ChartInstance } from '../internals/plugins/models';
 
 function onPointerDown(event: React.PointerEvent) {
@@ -17,7 +17,7 @@ function onPointerDown(event: React.PointerEvent) {
 }
 
 export const useInteractionItemProps = (
-  data: SeriesItemIdentifier,
+  data: SeriesItemIdentifierWithData,
   skip?: boolean,
 ): {
   onPointerEnter?: () => void;
@@ -30,26 +30,15 @@ export const useInteractionItemProps = (
 
   const onPointerEnter = React.useCallback(() => {
     interactionActive.current = true;
-    instance.setItemInteraction({
-      type: data.type,
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex,
-    } as SeriesItemIdentifier);
-    instance.setHighlight({
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex,
-    });
-  }, [instance, data.type, data.seriesId, data.dataIndex]);
+    instance.setItemInteraction(data);
+    instance.setHighlight(data);
+  }, [instance, data]);
 
   const onPointerLeave = React.useCallback(() => {
     interactionActive.current = false;
-    instance.removeItemInteraction({
-      type: data.type,
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex,
-    } as SeriesItemIdentifier);
+    instance.removeItemInteraction(data);
     instance.clearHighlight();
-  }, [instance, data.type, data.seriesId, data.dataIndex]);
+  }, [instance, data]);
 
   React.useEffect(() => {
     return () => {
@@ -71,7 +60,10 @@ export const useInteractionItemProps = (
   };
 };
 
-export const useInteractionAllItemProps = (data: SeriesItemIdentifier[], skip?: boolean) => {
+export const useInteractionAllItemProps = (
+  data: SeriesItemIdentifierWithData[],
+  skip?: boolean,
+) => {
   const { instance } =
     useChartContext<[UseChartInteractionSignature, UseChartHighlightSignature]>();
 
@@ -86,7 +78,7 @@ export const useInteractionAllItemProps = (data: SeriesItemIdentifier[], skip?:
 
 export function getInteractionItemProps(
   instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature]>,
-  item: ChartItemIdentifier<ChartSeriesType>,
+  item: ChartItemIdentifierWithData<ChartSeriesType>,
 ): {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
@@ -97,10 +89,7 @@ export function getInteractionItemProps(
       return;
     }
     instance.setItemInteraction(item);
-    instance.setHighlight({
-      seriesId: item.seriesId,
-      dataIndex: item.dataIndex,
-    });
+    instance.setHighlight(item);
   }
 
   function onPointerLeave() {

packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.ts

@@ -2,7 +2,11 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { ChartPlugin } from '../../models';
 import { Coordinate, UseChartInteractionSignature } from './useChartInteraction.types';
-import { ChartItemIdentifier, ChartSeriesType } from '../../../../models/seriesType/config';
+import {
+  ChartItemIdentifier,
+  ChartSeriesType,
+  type ChartItemIdentifierWithData,
+} from '../../../../models/seriesType/config';
 
 export const useChartInteraction: ChartPlugin<UseChartInteractionSignature> = ({ store }) => {
   const cleanInteraction = useEventCallback(function cleanInteraction() {
@@ -56,7 +60,7 @@ export const useChartInteraction: ChartPlugin<UseChartInteractionSignature> = ({
   });
 
   const setItemInteraction = useEventCallback(function setItemInteraction(
-    newItem: ChartItemIdentifier<ChartSeriesType>,
+    newItem: ChartItemIdentifierWithData<ChartSeriesType>,
   ) {
     store.update((prev) => {
       if (fastObjectShallowCompare(prev.interaction.item, newItem)) {

packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.ts

@@ -1,5 +1,9 @@
 import { ChartPluginSignature } from '../../models';
-import { ChartItemIdentifier, ChartSeriesType } from '../../../../models/seriesType/config';
+import {
+  ChartItemIdentifier,
+  ChartSeriesType,
+  type ChartItemIdentifierWithData,
+} from '../../../../models/seriesType/config';
 
 export type Coordinate = { x: number; y: number };
 
@@ -12,7 +16,7 @@ export interface UseChartInteractionInstance {
    * Setter for the item the user is interacting with.
    * @param {ChartItemIdentifier} newItem The identifier of the item.
    */
-  setItemInteraction: (newItem: ChartItemIdentifier<ChartSeriesType>) => void;
+  setItemInteraction: (newItem: ChartItemIdentifierWithData<ChartSeriesType>) => void;
   /**
    * Remove item interaction if the current if the provided item is still the one interacting.
    * @param {ChartItemIdentifier} itemToRemove The identifier of the item.
@@ -30,7 +34,7 @@ export interface UseChartInteractionState {
     /**
      * The item currently interacting.
      */
-    item: null | ChartItemIdentifier<ChartSeriesType>;
+    item: null | ChartItemIdentifierWithData<ChartSeriesType>;
     /**
      * The x/y SVG coordinate of the "main" pointer
      */

packages/x-charts/src/internals/plugins/models/seriesConfig/tooltipGetter.types.ts

@@ -1,5 +1,5 @@
 import type {
-  ChartItemIdentifier,
+  ChartItemIdentifierWithData,
   ChartSeriesDefaultized,
   ChartSeriesType,
   ChartsSeriesConfig,
@@ -20,7 +20,7 @@ export interface ItemTooltip<T extends ChartSeriesType> {
   /**
    * An object that identifies the item to display.
    */
-  identifier: ChartItemIdentifier<T>;
+  identifier: ChartItemIdentifierWithData<T>;
   /**
    * The color associated with the item.
    */
@@ -78,7 +78,7 @@ export type TooltipGetter<TSeriesType extends ChartSeriesType> = (params: {
   series: ChartSeriesDefaultized<TSeriesType>;
   axesConfig: TooltipGetterAxesConfig;
   getColor: ColorGetter<TSeriesType>;
-  identifier: ChartItemIdentifier<TSeriesType> | null;
+  identifier: ChartItemIdentifierWithData<TSeriesType> | null;
 }) =>
   | (TSeriesType extends 'radar'
       ? ItemTooltipWithMultipleValues<TSeriesType>

packages/x-charts/src/models/seriesType/config.ts

@@ -31,6 +31,7 @@ export interface ChartsSeriesConfig {
      */
     seriesProp: BarSeriesType;
     itemIdentifier: BarItemIdentifier;
+    itemIdentifierWithData: BarItemIdentifier;
     valueType: number | null;
     canBeStacked: true;
     axisType: 'cartesian';
@@ -40,6 +41,7 @@ export interface ChartsSeriesConfig {
     series: DefaultizedLineSeriesType;
     seriesProp: LineSeriesType;
     itemIdentifier: LineItemIdentifier;
+    itemIdentifierWithData: LineItemIdentifier;
     valueType: number | null;
     canBeStacked: true;
     axisType: 'cartesian';
@@ -50,6 +52,7 @@ export interface ChartsSeriesConfig {
     seriesProp: ScatterSeriesType;
     valueType: ScatterValueType;
     itemIdentifier: ScatterItemIdentifier;
+    itemIdentifierWithData: ScatterItemIdentifier;
     axisType: 'cartesian';
   };
   pie: {
@@ -59,13 +62,15 @@ export interface ChartsSeriesConfig {
     series: DefaultizedPieSeriesType;
     seriesProp: PieSeriesType<MakeOptional<PieValueType, 'id'>>;
     itemIdentifier: PieItemIdentifier;
+    itemIdentifierWithData: PieItemIdentifier;
     valueType: DefaultizedPieValueType;
   };
   radar: {
     seriesInput: DefaultizedProps<RadarSeriesType, 'id'> & { color: string };
     series: DefaultizedRadarSeriesType;
     seriesProp: RadarSeriesType;
     itemIdentifier: RadarItemIdentifier;
+    itemIdentifierWithData: RadarItemIdentifier;
     valueType: number;
     axisType: 'polar';
   };
@@ -107,6 +112,9 @@ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConf
 export type ChartItemIdentifier<T extends ChartSeriesType> =
   ChartsSeriesConfig[T]['itemIdentifier'];
 
+export type ChartItemIdentifierWithData<T extends ChartSeriesType> =
+  ChartsSeriesConfig[T]['itemIdentifierWithData'];
+
 export type DatasetElementType<T> = {
   [key: string]: Readonly<T>;
 };

packages/x-charts/src/models/seriesType/index.ts

@@ -37,6 +37,9 @@ type StackableSeriesType = DefaultizedSeriesType<StackableChartSeriesType>;
 export type SeriesItemIdentifier<T extends ChartSeriesType = ChartSeriesType> =
   ChartsSeriesConfig[T]['itemIdentifier'];
 
+export type SeriesItemIdentifierWithData<T extends ChartSeriesType = ChartSeriesType> =
+  ChartsSeriesConfig[T]['itemIdentifierWithData'];
+
 export * from './line';
 export * from './bar';
 export * from './scatter';

packages/x-charts/tsconfig.json

@@ -9,5 +9,10 @@
     ],
     "skipLibCheck": true
   },
-  "include": ["src/**/*", "../../test/utils/addChaiAssertions.ts"]
+  "include": [
+    "src/**/*",
+    "../../test/utils/addChaiAssertions.ts",
+    // We include this file in development so to ensure the type overloads don't cause issues.
+    "../x-charts-pro/src/typeOverloads/index.ts"
+  ]
 }

scripts/x-charts-pro.exports.json

@@ -459,6 +459,7 @@
   { "name": "ScatterSlots", "kind": "Interface" },
   { "name": "ScatterValueType", "kind": "TypeAlias" },
   { "name": "SeriesItemIdentifier", "kind": "TypeAlias" },
+  { "name": "SeriesItemIdentifierWithData", "kind": "TypeAlias" },
   { "name": "SeriesLegendItemContext", "kind": "Interface" },
   { "name": "ShowMarkParams", "kind": "Interface" },
   { "name": "SparkLineChart", "kind": "Variable" },

scripts/x-charts.exports.json

@@ -377,6 +377,7 @@
   { "name": "ScatterSlots", "kind": "Interface" },
   { "name": "ScatterValueType", "kind": "TypeAlias" },
   { "name": "SeriesItemIdentifier", "kind": "TypeAlias" },
+  { "name": "SeriesItemIdentifierWithData", "kind": "TypeAlias" },
   { "name": "SeriesLegendItemContext", "kind": "Interface" },
   { "name": "ShowMarkParams", "kind": "Interface" },
   { "name": "SparkLineChart", "kind": "Variable" },