[charts] Move axis interaction to selectors

[alexfauquette]

Fix #15565 at least for axes

The idea is to limit the stored data to the x/y position of the pointer. Knowing the index or value associated to the pointer position is computed by the selectors. Such that updating the axis will automatically trigger a new computation of the index/value

I still have some issues. For a reason I ignore when the pointer crosses the line the tooltip disappear.

Seems to come from the pointerout here which looks like a duplicate of pointerleave according to the MWN docs:

pointerout events have the same problems as mouseout. If the target element has child elements, pointerout and pointerover events fire as the pointer moves over the boundaries of these elements too, not just the target element itself. Usually, pointerenter and pointerleave events' behavior is more sensible, because they are not affected by moving into child elements.

In brief, I suspect the pointer to enter and leave the line item, which triggers the pointerout since it's leaving a child of the SVG.

mui-x/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts

Lines 113 to 117 in 3d7e504

	element.addEventListener('pointerdown', handleDown);
	element.addEventListener('pointermove', handleMove);
	element.addEventListener('pointerout', handleOut);
	element.addEventListener('pointercancel', handleOut);
	element.addEventListener('pointerleave', handleOut);

@JCQuintas Any reason to keep both out and leave?

Demo

Capture.video.du.2025-03-19.15-04-12.mp4

The code of the demo in the recoding

import { Box } from '@mui/material';
import * as React from 'react';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
import {
  ChartsAxisHighlight,
  ChartsGrid,
  LineHighlightPlot,
  ChartsAxis,
  ChartsClipPath,
} from '@mui/x-charts';

export default function App() {
  const [dataset, setDataset] = React.useState([{ t: 0, a: 0, b: 0 }]);

  const [run, setRun] = React.useState(false);
  React.useEffect(() => {
    if (!run) {
      return;
    }
    const interval = setInterval(function () {
      setDataset((prev) => {
        const lastValue = prev[prev.length - 1];
        const nextValue = {
          t: lastValue.t + 1,
          a: lastValue.a - 5 + 10 * Math.random(),
          b: lastValue.b - 10 + 20 * Math.random(),
        };

        if (prev.length < 50) {
          return [...prev, nextValue];
        }
        return [...prev.slice(1), nextValue];
      });
    }, 100);
    return () => {
      clearInterval(interval);
    };
  }, [run]);

  return (
    <Box
      sx={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <button onClick={() => setRun((p) => !p)}>{run ? 'stop' : 'run'}</button>
      <Box sx={{ height: 'calc(400px)' }}>
        <ChartContainer
          skipAnimation
          id="example-chart"
          dataset={dataset}
          xAxis={[
            {
              scaleType: 'point',
              dataKey: 't',
            },
          ]}
          series={[
            {
              id: 'a',
              label: 'a',
              dataKey: 'a',
              type: 'line',
              connectNulls: true,
              showMark: false,
              valueFormatter: (value) => value + '%',
            },
            {
              id: 'b',
              label: 'b',
              dataKey: 'b',
              type: 'line',
              connectNulls: true,
              showMark: false,
              valueFormatter: (value) => value + '%',
            },
          ]}
        >
          <LinePlot />

          <ChartsAxis />
          <MarkPlot />
          <LineHighlightPlot />

          <ChartsTooltip />

          <ChartsAxisHighlight x="line" />
          <ChartsClipPath id="1" />
          <ChartsGrid horizontal />
        </ChartContainer>
      </Box>
    </Box>
  );
}

[github-actions]

Thanks for adding a type label to the PR! 👍

[mui-bot]

Deploy preview: https://deploy-preview-17039--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against bfc38d5

[codspeed-hq]

CodSpeed Performance Report

Merging #17039 will not alter performance

_{Comparing alexfauquette:renaime-internals (bfc38d5) with master (6671527)}

Summary

✅ 7 untouched benchmarks

[JCQuintas]

This func needs some updated docs :)

[JCQuintas]

@JCQuintas Any reason to keep both out and leave?

Did you check with other charts as well? On my PR I noticed that in some instances, the pointer events from useInteractionItemProps affect my changes.

We can probably remove the pointerout and see if it affects anything negatively

[bernardobelchior]

Should we do this in this PR?

[alexfauquette]

I've a follow up PR in which it will be easier

[JCQuintas]

Why do we need to type the store now but didn't need it before? 🤔

[alexfauquette]

TL;TR

The selectorChartXAxis require to get access to the cartesian data. So selectorChartsInteractionXAxisIndex does too:

export const selectorChartsInteractionXAxisIndex = createSelector(
  [selectorChartsInteractionPointerX, selectorChartXAxis],
  (x, xAxes) => (x === null ? null : getAxisIndex(xAxes.axis[xAxes.axisIds[0]], x)),
);

Why in this PR

Before the axis interaciton state was handles only by the interaction plugging. And we were able to defaultize the result of the selector to { x: null, y: null } if the state do not exist.

Now we use the up to date value of axes with selectorChartXAxis

Why it's not requirering the interaction signature? -> Because it's included by default in the useStore typing

export function useStore<TSignatures extends ChartAnyPluginSignature[] = []>(): ChartStore<
  [...TSignatures, UseChartInteractionSignature, UseChartHighlightSignature]
> {

Is it a good thing?

I think yes. It forces us to take into consideration that this does nto work for polar charts.
An improvement might be to move it from required to optional pluggin. if we have fallback. But that would require to re-work bit the store typing.