[charts] Improve zoomed highlight behaviour (#13868)

JCQuintas · alexfauquette · web-flow · commit cd68580bd2c8 · 2024-07-18T11:13:49.000+02:00
Signed-off-by: Jose C Quintas Jr &lt;juniorquintas@gmail.com&gt;
Co-authored-by: Alexandre Fauquette &lt;45398769+alexfauquette@users.noreply.github.com&gt;
diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
@@ -51,10 +51,10 @@ const BarChartPro = React.forwardRef(function BarChartPro(props: BarChartProProp
       <g {...clipPathGroupProps}>
         <BarChartPlotZoom {...barPlotProps} />
         <ChartsOverlay {...overlayProps} />
+        <ChartsAxisHighlight {...axisHighlightProps} />
       </g>
       <ChartsAxis {...chartsAxisProps} />
       <ChartsLegend {...legendProps} />
-      <ChartsAxisHighlight {...axisHighlightProps} />
       {!props.loading && <ChartsTooltip {...tooltipProps} />}
       <ChartsClipPath {...clipPathProps} />
       <ZoomSetup />
diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
@@ -62,9 +62,9 @@ const LineChartPro = React.forwardRef(function LineChartPro(props: LineChartProP
         <AreaPlotZoom {...areaPlotProps} />
         <LinePlotZoom {...linePlotProps} />
         <ChartsOverlay {...overlayProps} />
+        <ChartsAxisHighlight {...axisHighlightProps} />
       </g>
       <ChartsAxis {...chartsAxisProps} />
-      <ChartsAxisHighlight {...axisHighlightProps} />
       <MarkPlotZoom {...markPlotProps} />
       <LineHighlightPlot {...lineHighlightPlotProps} />
       <ChartsLegend {...legendProps} />
diff --git a/packages/x-charts-pro/src/context/ZoomProvider/useSetupPan.ts b/packages/x-charts-pro/src/context/ZoomProvider/useSetupPan.ts
@@ -4,18 +4,9 @@ import { getSVGPoint } from '@mui/x-charts/internals';
 import { useZoom } from './useZoom';
 import { ZoomData } from './Zoom.types';
 
-const isPointOutside = (
-  point: { x: number; y: number },
-  area: { left: number; top: number; width: number; height: number },
-) => {
-  const outsideX = point.x < area.left || point.x > area.left + area.width;
-  const outsideY = point.y < area.top || point.y > area.top + area.height;
-  return outsideX || outsideY;
-};
-
 export const useSetupPan = () => {
   const { zoomData, setZoomData, setIsInteracting, isPanEnabled, options } = useZoom();
-  const area = useDrawingArea();
+  const drawingArea = useDrawingArea();
 
   const svgRef = useSvgRef();
 
@@ -55,7 +46,7 @@ export const useSetupPan = () => {
         const MAX_PERCENT = option.maxEnd;
 
         const movement = option.axisDirection === 'x' ? movementX : movementY;
-        const dimension = option.axisDirection === 'x' ? area.width : area.height;
+        const dimension = option.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
 
         let newMinPercent = min - (movement / dimension) * span;
         let newMaxPercent = max - (movement / dimension) * span;
@@ -93,7 +84,7 @@ export const useSetupPan = () => {
       eventCacheRef.current.push(event);
       const point = getSVGPoint(element, event);
 
-      if (isPointOutside(point, area)) {
+      if (!drawingArea.isPointInside(point)) {
         return;
       }
 
@@ -135,5 +126,14 @@ export const useSetupPan = () => {
       document.removeEventListener('pointercancel', handleUp);
       document.removeEventListener('pointerleave', handleUp);
     };
-  }, [area, svgRef, isDraggingRef, setIsInteracting, zoomData, setZoomData, isPanEnabled, options]);
+  }, [
+    drawingArea,
+    svgRef,
+    isDraggingRef,
+    setIsInteracting,
+    zoomData,
+    setZoomData,
+    isPanEnabled,
+    options,
+  ]);
 };
diff --git a/packages/x-charts-pro/src/context/ZoomProvider/useSetupZoom.ts b/packages/x-charts-pro/src/context/ZoomProvider/useSetupZoom.ts
@@ -54,18 +54,9 @@ const zoomAtPoint = (
   return [newMinRange, newMaxRange];
 };
 
-const isPointOutside = (
-  point: { x: number; y: number },
-  area: { left: number; top: number; width: number; height: number },
-) => {
-  const outsideX = point.x < area.left || point.x > area.left + area.width;
-  const outsideY = point.y < area.top || point.y > area.top + area.height;
-  return outsideX || outsideY;
-};
-
 export const useSetupZoom = () => {
   const { zoomData, setZoomData, isZoomEnabled, options, setIsInteracting } = useZoom();
-  const area = useDrawingArea();
+  const drawingArea = useDrawingArea();
 
   const svgRef = useSvgRef();
   const eventCacheRef = React.useRef<PointerEvent[]>([]);
@@ -85,7 +76,7 @@ export const useSetupZoom = () => {
 
       const point = getSVGPoint(element, event);
 
-      if (isPointOutside(point, area)) {
+      if (!drawingArea.isPointInside(point)) {
         return;
       }
 
@@ -104,8 +95,8 @@ export const useSetupZoom = () => {
         const option = options[zoom.axisId];
         const centerRatio =
           option.axisDirection === 'x'
-            ? getHorizontalCenterRatio(point, area)
-            : getVerticalCenterRatio(point, area);
+            ? getHorizontalCenterRatio(point, drawingArea)
+            : getVerticalCenterRatio(point, drawingArea);
 
         const { scaleRatio, isZoomIn } = getWheelScaleRatio(event, option.step);
         const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
@@ -162,8 +153,8 @@ export const useSetupZoom = () => {
 
         const centerRatio =
           option.axisDirection === 'x'
-            ? getHorizontalCenterRatio(point, area)
-            : getVerticalCenterRatio(point, area);
+            ? getHorizontalCenterRatio(point, drawingArea)
+            : getVerticalCenterRatio(point, drawingArea);
 
         const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
 
@@ -219,7 +210,7 @@ export const useSetupZoom = () => {
         clearTimeout(interactionTimeoutRef.current);
       }
     };
-  }, [svgRef, setZoomData, zoomData, area, isZoomEnabled, options, setIsInteracting]);
+  }, [svgRef, setZoomData, zoomData, drawingArea, isZoomEnabled, options, setIsInteracting]);
 };
 
 /**
diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx
@@ -132,10 +132,10 @@ const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) {
       <g {...clipPathGroupProps}>
         <BarPlot {...barPlotProps} />
         <ChartsOverlay {...overlayProps} />
+        <ChartsAxisHighlight {...axisHighlightProps} />
       </g>
       <ChartsAxis {...chartsAxisProps} />
       <ChartsLegend {...legendProps} />
-      <ChartsAxisHighlight {...axisHighlightProps} />
       {!props.loading && <ChartsTooltip {...tooltipProps} />}
       <ChartsClipPath {...clipPathProps} />
       {children}
diff --git a/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx
@@ -10,7 +10,7 @@ export interface LegendRendererProps extends Omit<LegendPerItemProps, 'itemsToDi
   /**
    * @deprecated Use the `useDrawingArea` hook instead.
    */
-  drawingArea: DrawingArea;
+  drawingArea: Omit<DrawingArea, 'isPointInside'>;
 }
 
 function DefaultChartsLegend(props: LegendRendererProps) {
diff --git a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx
@@ -31,13 +31,14 @@ type VoronoiSeries = { seriesId: SeriesId; startIndex: number; endIndex: number
 function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
   const { voronoiMaxRadius, onItemClick } = props;
   const svgRef = useSvgRef();
-  const { left, top, width, height } = useDrawingArea();
+  const drawingArea = useDrawingArea();
   const { xAxis, yAxis, xAxisIds, yAxisIds } = useCartesianContext();
   const { dispatch } = React.useContext(InteractionContext);
 
   const { series, seriesOrder } = useScatterSeries() ?? {};
   const voronoiRef = React.useRef<Record<string, VoronoiSeries>>({});
   const delauneyRef = React.useRef<Delaunay<any> | undefined>(undefined);
+  const lastFind = React.useRef<number | undefined>(undefined);
 
   const { setHighlighted, clearHighlighted } = useHighlighted();
 
@@ -70,7 +71,20 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
       const getXPosition = getValueToPositionMapper(xScale);
       const getYPosition = getValueToPositionMapper(yScale);
 
-      const seriesPoints = data.flatMap(({ x, y }) => [getXPosition(x), getYPosition(y)]);
+      const seriesPoints = data.flatMap(({ x, y }) => {
+        const pointX = getXPosition(x);
+        const pointY = getYPosition(y);
+
+        if (!drawingArea.isPointInside({ x: pointX, y: pointY })) {
+          // If the point is not displayed we move them to a trash coordinate.
+          // This avoids managing index mapping before/after filtering.
+          // The trash point is far enough such that any point in the drawing area will be closer to the mouse than the trash coordinate.
+          return [-drawingArea.width, -drawingArea.height];
+        }
+
+        return [pointX, pointY];
+      });
+
       voronoiRef.current[seriesId] = {
         seriesId,
         startIndex: points.length,
@@ -80,15 +94,15 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
     });
 
     delauneyRef.current = new Delaunay(points);
-  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis]);
+    lastFind.current = undefined;
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
 
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null) {
       return undefined;
     }
 
-    // TODO: A perf optimisation of voronoi could be to use the last point as the initial point for the next search.
     function getClosestPoint(
       event: MouseEvent,
     ):
@@ -99,21 +113,21 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
       // Get mouse coordinate in global SVG space
       const svgPoint = getSVGPoint(element, event);
 
-      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
-      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
-      if (outsideX || outsideY) {
+      if (!drawingArea.isPointInside(svgPoint)) {
+        lastFind.current = undefined;
         return 'outside-chart';
       }
 
       if (!delauneyRef.current) {
         return 'no-point-found';
       }
 
-      const closestPointIndex = delauneyRef.current.find(svgPoint.x, svgPoint.y);
+      const closestPointIndex = delauneyRef.current.find(svgPoint.x, svgPoint.y, lastFind.current);
       if (closestPointIndex === undefined) {
         return 'no-point-found';
       }
 
+      lastFind.current = closestPointIndex;
       const closestSeries = Object.values(voronoiRef.current).find((value) => {
         return 2 * closestPointIndex >= value.startIndex && 2 * closestPointIndex < value.endIndex;
       });
@@ -137,7 +151,7 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
       return { seriesId: closestSeries.seriesId, dataIndex };
     }
 
-    const handleMouseOut = () => {
+    const handleMouseLeave = () => {
       dispatch({ type: 'exitChart' });
       clearHighlighted();
     };
@@ -180,27 +194,24 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
       onItemClick(event, { type: 'scatter', seriesId, dataIndex });
     };
 
-    element.addEventListener('pointerout', handleMouseOut);
+    element.addEventListener('pointerleave', handleMouseLeave);
     element.addEventListener('pointermove', handleMouseMove);
     element.addEventListener('click', handleMouseClick);
     return () => {
-      element.removeEventListener('pointerout', handleMouseOut);
+      element.removeEventListener('pointerleave', handleMouseLeave);
       element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
   }, [
     svgRef,
     dispatch,
-    left,
-    width,
-    top,
-    height,
     yAxis,
     xAxis,
     voronoiMaxRadius,
     onItemClick,
     setHighlighted,
     clearHighlighted,
+    drawingArea,
   ]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx
@@ -162,9 +162,9 @@ const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref
         <AreaPlot {...areaPlotProps} />
         <LinePlot {...linePlotProps} />
         <ChartsOverlay {...overlayProps} />
+        <ChartsAxisHighlight {...axisHighlightProps} />
       </g>
       <ChartsAxis {...chartsAxisProps} />
-      <ChartsAxisHighlight {...axisHighlightProps} />
       <MarkPlot {...markPlotProps} />
       <LineHighlightPlot {...lineHighlightPlotProps} />
       <ChartsLegend {...legendProps} />
diff --git a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx
@@ -7,6 +7,7 @@ import { InteractionContext } from '../context/InteractionProvider';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import getColor from './getColor';
 import { useLineSeries } from '../hooks/useSeries';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 
 export interface LineHighlightPlotSlots {
   lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
@@ -44,6 +45,7 @@ function LineHighlightPlot(props: LineHighlightPlotProps) {
 
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
+  const drawingArea = useDrawingArea();
   const { axis } = React.useContext(InteractionContext);
 
   const highlightedIndex = axis.x?.index;
@@ -93,6 +95,10 @@ function LineHighlightPlot(props: LineHighlightPlotProps) {
           const x = xScale(xData[highlightedIndex]);
           const y = yScale(stackedData[highlightedIndex][1])!; // This should not be undefined since y should not be a band scale
 
+          if (!drawingArea.isPointInside({ x, y })) {
+            return null;
+          }
+
           const colorGetter = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
           return (
             <Element
diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx
@@ -59,7 +59,7 @@ function MarkPlot(props: MarkPlotProps) {
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
   const chartId = useChartId();
-  const { left, width, top, height } = useDrawingArea();
+  const drawingArea = useDrawingArea();
 
   const Mark = slots?.mark ?? MarkElement;
 
@@ -91,16 +91,6 @@ function MarkPlot(props: MarkPlotProps) {
           const yScale = yAxis[yAxisKey].scale;
           const xData = xAxis[xAxisKey].data;
 
-          const isInRange = ({ x, y }: { x: number; y: number }) => {
-            if (x < left || x > left + width) {
-              return false;
-            }
-            if (y < top || y > top + height) {
-              return false;
-            }
-            return true;
-          };
-
           if (xData === undefined) {
             throw new Error(
               `MUI X Charts: ${
@@ -133,7 +123,7 @@ function MarkPlot(props: MarkPlotProps) {
                     // Remove missing data point
                     return false;
                   }
-                  if (!isInRange({ x, y })) {
+                  if (!drawingArea.isPointInside({ x, y })) {
                     // Remove out of range
                     return false;
                   }
diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx
@@ -43,7 +43,7 @@ export interface ScatterProps {
 function Scatter(props: ScatterProps) {
   const { series, xScale, yScale, color, colorGetter, markerSize, onItemClick } = props;
 
-  const { left, width, top, height } = useDrawingArea();
+  const drawingArea = useDrawingArea();
 
   const { useVoronoiInteraction } = React.useContext(InteractionContext);
 
@@ -69,7 +69,7 @@ function Scatter(props: ScatterProps) {
       const x = getXPosition(scatterPoint.x);
       const y = getYPosition(scatterPoint.y);
 
-      const isInRange = x >= left && x <= left + width && y >= top && y <= top + height;
+      const isInRange = drawingArea.isPointInside({ x, y });
 
       const pointCtx = { type: 'scatter' as const, seriesId: series.id, dataIndex: i };
 
@@ -96,10 +96,7 @@ function Scatter(props: ScatterProps) {
   }, [
     xScale,
     yScale,
-    left,
-    width,
-    top,
-    height,
+    drawingArea,
     series.data,
     series.id,
     isHighlighted,
diff --git a/packages/x-charts/src/context/DrawingProvider.tsx b/packages/x-charts/src/context/DrawingProvider.tsx
diff --git a/packages/x-charts/src/hooks/useAxisEvents.ts b/packages/x-charts/src/hooks/useAxisEvents.ts
diff --git a/packages/x-charts/src/hooks/useDrawingArea.ts b/packages/x-charts/src/hooks/useDrawingArea.ts

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export interface LegendRendererProps extends Omit<LegendPerItemProps, 'itemsToDi`
`10`	`10`	`/**`
`11`	`11`	* @deprecated Use the `useDrawingArea` hook instead.
`12`	`12`	`*/`
`13`		`- drawingArea: DrawingArea;`
	`13`	`+ drawingArea: Omit<DrawingArea, 'isPointInside'>;`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`function DefaultChartsLegend(props: LegendRendererProps) {`