[charts] Fix interaction performance (#16897)

JCQuintas · web-flow · commit 94ef0a4614e6 · 2025-03-11T16:18:18.000+01:00
diff --git a/packages/x-charts-pro/src/FunnelChart/FunnelSection.tsx b/packages/x-charts-pro/src/FunnelChart/FunnelSection.tsx
@@ -31,15 +31,15 @@ const FunnelSection = consumeSlots(
     ref: React.Ref<SVGPathElement>,
   ) {
     const { seriesId, dataIndex, classes, color, onClick, className, ...other } = props;
-    const getInteractionItemProps = useInteractionItemProps();
+    const interactionProps = useInteractionItemProps({ type: 'funnel', seriesId, dataIndex });
     const { isFaded, isHighlighted } = useItemHighlighted({
       seriesId,
       dataIndex,
     });
 
     return (
       <FunnelSectionPath
-        {...getInteractionItemProps({ type: 'funnel', seriesId, dataIndex })}
+        {...interactionProps}
         filter={isHighlighted ? 'brightness(120%)' : undefined}
         opacity={isFaded ? 0.3 : 1}
         fill={color}
diff --git a/packages/x-charts-pro/src/Heatmap/HeatmapItem.tsx b/packages/x-charts-pro/src/Heatmap/HeatmapItem.tsx
@@ -76,7 +76,7 @@ const useUtilityClasses = (ownerState: HeatmapItemOwnerState) => {
 function HeatmapItem(props: HeatmapItemProps) {
   const { seriesId, dataIndex, color, value, slotProps = {}, slots = {}, ...other } = props;
 
-  const getInteractionItemProps = useInteractionItemProps();
+  const interactionProps = useInteractionItemProps({ type: 'heatmap', seriesId, dataIndex });
   const { isFaded, isHighlighted } = useItemHighlighted({
     seriesId,
     dataIndex,
@@ -95,7 +95,7 @@ function HeatmapItem(props: HeatmapItemProps) {
   const Cell = slots?.cell ?? HeatmapCell;
   const cellProps = useSlotProps({
     elementType: Cell,
-    additionalProps: { ...getInteractionItemProps({ type: 'heatmap', seriesId, dataIndex }) },
+    additionalProps: interactionProps,
     externalForwardedProps: { ...other },
     externalSlotProps: slotProps.cell,
     ownerState,
diff --git a/packages/x-charts/src/BarChart/BarElement.tsx b/packages/x-charts/src/BarChart/BarElement.tsx
@@ -87,7 +87,7 @@ function BarElement(props: BarElementProps) {
     onClick,
     ...other
   } = props;
-  const getInteractionItemProps = useInteractionItemProps();
+  const interactionProps = useInteractionItemProps({ type: 'bar', seriesId: id, dataIndex });
   const { isFaded, isHighlighted } = useItemHighlighted({
     seriesId: id,
     dataIndex,
@@ -111,7 +111,7 @@ function BarElement(props: BarElementProps) {
     externalSlotProps: slotProps?.bar,
     externalForwardedProps: other,
     additionalProps: {
-      ...getInteractionItemProps({ type: 'bar', seriesId: id, dataIndex }),
+      ...interactionProps,
       style,
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
diff --git a/packages/x-charts/src/ChartsTooltip/contentDisplayed.test.tsx b/packages/x-charts/src/ChartsTooltip/contentDisplayed.test.tsx
@@ -24,9 +24,19 @@ const config: Partial<BarChartProps> = {
 // | X X
 // | X X X X
 // ---A---B-
+//
+// Horizontal layout
+// A| X X X X
+// A| X X
+// B| X
+// B| X
+//   --------
 
 describe('ChartsTooltip', () => {
   const { render } = createRenderer();
+  const wrapper = ({ children }: { children?: React.ReactNode }) => (
+    <div style={{ width: 400, height: 400 }}>{children}</div>
+  );
 
   beforeEach(() => {
     // TODO: Remove beforeEach/afterEach after vitest becomes our main runner
@@ -45,21 +55,16 @@ describe('ChartsTooltip', () => {
   describeSkipIf(isJSDOM)('axis trigger', () => {
     it('should show right values with vertical layout on axis', async () => {
       const { user } = render(
-        <div
-          style={{
-            width: 400,
-            height: 400,
-          }}
-        >
-          <BarChart
-            {...config}
-            series={[
-              { dataKey: 'v1', id: 's1', label: 'S1' },
-              { dataKey: 'v2', id: 's2', label: 'S2' },
-            ]}
-            xAxis={[{ scaleType: 'band', dataKey: 'x' }]}
-          />
-        </div>,
+        <BarChart
+          {...config}
+          series={[
+            { dataKey: 'v1', id: 's1', label: 'S1' },
+            { dataKey: 'v2', id: 's2', label: 'S2' },
+          ]}
+          xAxis={[{ scaleType: 'band', dataKey: 'x', position: 'none' }]}
+          slotProps={{ tooltip: { trigger: 'axis' } }}
+        />,
+        { wrapper },
       );
       const svg = document.querySelector<HTMLElement>('svg')!;
 
@@ -104,22 +109,17 @@ describe('ChartsTooltip', () => {
 
     it('should show right values with horizontal layout on axis', async () => {
       const { user } = render(
-        <div
-          style={{
-            width: 400,
-            height: 400,
-          }}
-        >
-          <BarChart
-            {...config}
-            layout="horizontal"
-            series={[
-              { dataKey: 'v1', id: 's1', label: 'S1' },
-              { dataKey: 'v2', id: 's2', label: 'S2' },
-            ]}
-            yAxis={[{ scaleType: 'band', dataKey: 'x' }]}
-          />
-        </div>,
+        <BarChart
+          {...config}
+          layout="horizontal"
+          series={[
+            { dataKey: 'v1', id: 's1', label: 'S1' },
+            { dataKey: 'v2', id: 's2', label: 'S2' },
+          ]}
+          yAxis={[{ scaleType: 'band', dataKey: 'x', position: 'none' }]}
+          slotProps={{ tooltip: { trigger: 'axis' } }}
+        />,
+        { wrapper },
       );
       const svg = document.querySelector<HTMLElement>('svg')!;
 
@@ -167,22 +167,16 @@ describe('ChartsTooltip', () => {
   describeSkipIf(isJSDOM)('item trigger', () => {
     it('should show right values with vertical layout on item', async () => {
       const { user } = render(
-        <div
-          style={{
-            width: 400,
-            height: 400,
-          }}
-        >
-          <BarChart
-            {...config}
-            series={[
-              { dataKey: 'v1', id: 's1', label: 'S1' },
-              { dataKey: 'v2', id: 's2', label: 'S2' },
-            ]}
-            xAxis={[{ scaleType: 'band', dataKey: 'x' }]}
-            slotProps={{ tooltip: { trigger: 'item' } }}
-          />
-        </div>,
+        <BarChart
+          {...config}
+          series={[
+            { dataKey: 'v1', id: 's1', label: 'S1' },
+            { dataKey: 'v2', id: 's2', label: 'S2' },
+          ]}
+          xAxis={[{ scaleType: 'band', dataKey: 'x', position: 'none' }]}
+          slotProps={{ tooltip: { trigger: 'item' } }}
+        />,
+        { wrapper },
       );
       const rectangles = document.querySelectorAll<HTMLElement>('rect');
 
@@ -205,30 +199,24 @@ describe('ChartsTooltip', () => {
 
     it('should show right values with horizontal layout on item', async () => {
       const { user } = render(
-        <div
-          style={{
-            width: 400,
-            height: 400,
-          }}
-        >
-          <BarChart
-            {...config}
-            series={[
-              { dataKey: 'v1', id: 's1', label: 'S1' },
-              { dataKey: 'v2', id: 's2', label: 'S2' },
-            ]}
-            layout="horizontal"
-            yAxis={[{ scaleType: 'band', dataKey: 'x' }]}
-            slotProps={{ tooltip: { trigger: 'item' } }}
-          />
-        </div>,
+        <BarChart
+          {...config}
+          series={[
+            { dataKey: 'v1', id: 's1', label: 'S1' },
+            { dataKey: 'v2', id: 's2', label: 'S2' },
+          ]}
+          layout="horizontal"
+          yAxis={[{ scaleType: 'band', dataKey: 'x', position: 'none' }]}
+          slotProps={{ tooltip: { trigger: 'item' } }}
+        />,
+        { wrapper },
       );
+
       const rectangles = document.querySelectorAll<HTMLElement>('rect');
 
       await user.pointer({
         target: rectangles[0],
       });
-
       let cells = document.querySelectorAll<HTMLElement>('.MuiChartsTooltip-root td');
       expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', 'S1', '4']);
 
diff --git a/packages/x-charts/src/LineChart/AreaElement.tsx b/packages/x-charts/src/LineChart/AreaElement.tsx
@@ -101,7 +101,7 @@ function AreaElement(props: AreaElementProps) {
     ...other
   } = props;
 
-  const getInteractionItemProps = useInteractionItemProps();
+  const interactionProps = useInteractionItemProps({ type: 'line', seriesId: id });
   const { isFaded, isHighlighted } = useItemHighlighted({
     seriesId: id,
   });
@@ -121,7 +121,7 @@ function AreaElement(props: AreaElementProps) {
     elementType: Area,
     externalSlotProps: slotProps?.area,
     additionalProps: {
-      ...getInteractionItemProps({ type: 'line', seriesId: id }),
+      ...interactionProps,
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
     },
diff --git a/packages/x-charts/src/LineChart/CircleMarkElement.tsx b/packages/x-charts/src/LineChart/CircleMarkElement.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
-import { animated, useSpring } from '@react-spring/web';
+import { animated, useSpringValue } from '@react-spring/web';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { useItemHighlighted } from '../hooks/useItemHighlighted';
 import { MarkElementOwnerState, useUtilityClasses } from './markElementClasses';
@@ -49,15 +49,22 @@ function CircleMarkElement(props: CircleMarkElementProps) {
   } = props;
 
   const theme = useTheme();
-  const getInteractionItemProps = useInteractionItemProps();
+  const interactionProps = useInteractionItemProps({ type: 'line', seriesId: id, dataIndex });
   const { isFaded, isHighlighted } = useItemHighlighted({
     seriesId: id,
   });
 
   const store = useStore();
   const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
 
-  const position = useSpring({ to: { x, y }, immediate: skipAnimation });
+  const cx = useSpringValue(x, { immediate: skipAnimation });
+  const cy = useSpringValue(y, { immediate: skipAnimation });
+
+  React.useEffect(() => {
+    cy.start(y, { immediate: skipAnimation });
+    cx.start(x, { immediate: skipAnimation });
+  }, [cy, y, cx, x, skipAnimation]);
+
   const ownerState = {
     id,
     classes: innerClasses,
@@ -71,16 +78,16 @@ function CircleMarkElement(props: CircleMarkElementProps) {
     <animated.circle
       {...other}
       // @ts-expect-error
-      cx={position.x}
-      cy={position.y}
+      cx={cx}
+      cy={cy}
       r={5}
       fill={(theme.vars || theme).palette.background.paper}
       stroke={color}
       strokeWidth={2}
       className={classes.root}
       onClick={onClick}
       cursor={onClick ? 'pointer' : 'unset'}
-      {...getInteractionItemProps({ type: 'line', seriesId: id, dataIndex })}
+      {...interactionProps}
     />
   );
 }
diff --git a/packages/x-charts/src/LineChart/LineElement.tsx b/packages/x-charts/src/LineChart/LineElement.tsx
@@ -100,7 +100,7 @@ function LineElement(props: LineElementProps) {
     onClick,
     ...other
   } = props;
-  const getInteractionItemProps = useInteractionItemProps();
+  const interactionProps = useInteractionItemProps({ type: 'line', seriesId: id });
   const { isFaded, isHighlighted } = useItemHighlighted({
     seriesId: id,
   });
@@ -120,7 +120,7 @@ function LineElement(props: LineElementProps) {
     elementType: Line,
     externalSlotProps: slotProps?.line,
     additionalProps: {
-      ...getInteractionItemProps({ type: 'line', seriesId: id }),
+      ...interactionProps,
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
     },
diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
-import { animated, to, useSpring } from '@react-spring/web';
+import { animated, to, useSpringValue } from '@react-spring/web';
 import { getSymbol } from '../internals/getSymbol';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { useItemHighlighted } from '../hooks/useItemHighlighted';
@@ -63,15 +63,22 @@ function MarkElement(props: MarkElementProps) {
     ...other
   } = props;
 
-  const getInteractionItemProps = useInteractionItemProps();
+  const interactionProps = useInteractionItemProps({ type: 'line', seriesId: id, dataIndex });
   const { isFaded, isHighlighted } = useItemHighlighted({
     seriesId: id,
   });
 
   const store = useStore();
   const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
 
-  const position = useSpring({ to: { x, y }, immediate: skipAnimation });
+  const cx = useSpringValue(x, { immediate: skipAnimation });
+  const cy = useSpringValue(y, { immediate: skipAnimation });
+
+  React.useEffect(() => {
+    cy.start(y, { immediate: skipAnimation });
+    cx.start(x, { immediate: skipAnimation });
+  }, [cy, y, cx, x, skipAnimation]);
+
   const ownerState = {
     id,
     classes: innerClasses,
@@ -85,16 +92,16 @@ function MarkElement(props: MarkElementProps) {
     <MarkElementPath
       {...other}
       style={{
-        transform: to([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
-        transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`),
+        transform: to([cx, cy], (pX, pY) => `translate(${pX}px, ${pY}px)`),
+        transformOrigin: to([cx, cy], (pX, pY) => `${pX}px ${pY}px`),
       }}
       ownerState={ownerState}
       // @ts-expect-error
       className={classes.root}
       d={d3Symbol(d3SymbolsFill[getSymbol(shape)])()!}
       onClick={onClick}
       cursor={onClick ? 'pointer' : 'unset'}
-      {...getInteractionItemProps({ type: 'line', seriesId: id, dataIndex })}
+      {...interactionProps}
     />
   );
 }
diff --git a/packages/x-charts/src/PieChart/PieArc.tsx b/packages/x-charts/src/PieChart/PieArc.tsx
@@ -104,7 +104,7 @@ function PieArc(props: PieArcProps) {
   };
   const classes = useUtilityClasses(ownerState);
 
-  const getInteractionItemProps = useInteractionItemProps();
+  const interactionProps = useInteractionItemProps({ type: 'pie', seriesId: id, dataIndex });
 
   return (
     <PieArcRoot
@@ -131,7 +131,7 @@ function PieArc(props: PieArcProps) {
       strokeWidth={1}
       strokeLinejoin="round"
       {...other}
-      {...getInteractionItemProps({ type: 'pie', seriesId: id, dataIndex })}
+      {...interactionProps}
     />
   );
 }
diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx
diff --git a/packages/x-charts/src/hooks/useInteractionItemProps.ts b/packages/x-charts/src/hooks/useInteractionItemProps.ts
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts
