[charts] Move Voronoi handler in a dedicated plugin (#16470)

Author: alexfauquette

docs/data/charts/scatter-demo/scatter-demo.md

@@ -1,7 +1,7 @@
 ---
 title: Charts - Scatter demonstration
 productId: x-charts
-components: Scatter, ScatterChart, ScatterPlot, ChartsVoronoiHandler
+components: Scatter, ScatterChart, ScatterPlot
 ---
 
 # Charts - Scatter demonstration

docs/data/charts/scatter/scatter.md

@@ -1,7 +1,7 @@
 ---
 title: React Scatter chart
 productId: x-charts
-components: ScatterChart, ScatterChartPro, ScatterPlot, ChartsVoronoiHandler, ChartsGrid
+components: ScatterChart, ScatterChartPro, ScatterPlot, ChartsGrid
 ---
 
 # Charts - Scatter
@@ -40,12 +40,6 @@ Or set the `disableVoronoi` prop to `true` to trigger interactions only when hov
 
 {{"demo": "VoronoiInteraction.js"}}
 
-To use this feature with composition, add the `ChartsVoronoiHandler`.
-
-```jsx
-<ChartsVoronoiHandler voronoiMaxRadius={50} />
-```
-
 ## Click event
 
 Scatter Chart provides an `onItemClick` handler for handling clicks on specific scatter items.

docs/data/chartsApiPages.ts

@@ -104,10 +104,6 @@ const chartsApiPages: MuiPage[] = [
     pathname: '/x/api/charts/charts-tooltip-container',
     title: 'ChartsTooltipContainer',
   },
-  {
-    pathname: '/x/api/charts/charts-voronoi-handler',
-    title: 'ChartsVoronoiHandler',
-  },
   {
     pathname: '/x/api/charts/charts-x-axis',
     title: 'ChartsXAxis',

docs/pages/x/api/charts/chart-container.json

@@ -6,6 +6,7 @@
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },
+    "disableVoronoi": { "type": { "name": "bool" } },
     "height": { "type": { "name": "number" } },
     "highlightedItem": {
       "type": {
@@ -34,8 +35,16 @@
         "describedArgs": ["highlightedItem"]
       }
     },
+    "onItemClick": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void",
+        "describedArgs": ["event", "scatterItemIdentifier"]
+      }
+    },
     "series": { "type": { "name": "arrayOf", "description": "Array<object>" } },
     "skipAnimation": { "type": { "name": "bool" } },
+    "voronoiMaxRadius": { "type": { "name": "number" } },
     "width": { "type": { "name": "number" } },
     "xAxis": {
       "type": {

docs/pages/x/api/charts/charts-voronoi-handler.js

@@ -17,6 +17,7 @@
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },
+    "disableVoronoi": { "type": { "name": "bool" } },
     "height": { "type": { "name": "number" } },
     "highlightedItem": {
       "type": {
@@ -46,6 +47,13 @@
         "describedArgs": ["highlightedItem"]
       }
     },
+    "onItemClick": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void",
+        "describedArgs": ["event", "scatterItemIdentifier"]
+      }
+    },
     "plotType": {
       "type": { "name": "enum", "description": "'bar'<br>&#124;&nbsp;'line'" },
       "default": "'line'"
@@ -68,6 +76,7 @@
         "returned": "string"
       }
     },
+    "voronoiMaxRadius": { "type": { "name": "number" } },
     "width": { "type": { "name": "number" } },
     "xAxis": {
       "type": {

docs/pages/x/api/charts/charts-voronoi-handler.json

@@ -8,6 +8,7 @@
     "disableAxisListener": {
       "description": "If <code>true</code>, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance."
     },
+    "disableVoronoi": { "description": "If true, the voronoi interaction are ignored." },
     "height": {
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
@@ -31,12 +32,22 @@
       "description": "The callback fired when the highlighted item changes.",
       "typeDescriptions": { "highlightedItem": "The newly highlighted item." }
     },
+    "onItemClick": {
+      "description": "Callback fired when clicking close to an item. This is only available for scatter plot for now.",
+      "typeDescriptions": {
+        "event": "Mouse event caught at the svg level",
+        "scatterItemIdentifier": "Identify which item got clicked"
+      }
+    },
     "series": {
       "description": "The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it."
     },
     "skipAnimation": {
       "description": "If <code>true</code>, animations are skipped. If unset or <code>false</code>, the animations respects the user&#39;s <code>prefers-reduced-motion</code> setting."
     },
+    "voronoiMaxRadius": {
+      "description": "Defines the maximal distance between a scatter point and the pointer that triggers the interaction. If <code>undefined</code>, the radius is assumed to be infinite."
+    },
     "width": {
       "description": "The width of the chart in px. If not defined, it takes the width of the parent element."
     },

docs/pages/x/api/charts/spark-line-chart.json

@@ -13,6 +13,7 @@
     "disableAxisListener": {
       "description": "If <code>true</code>, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance."
     },
+    "disableVoronoi": { "description": "If true, the voronoi interaction are ignored." },
     "height": {
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
@@ -36,6 +37,13 @@
       "description": "The callback fired when the highlighted item changes.",
       "typeDescriptions": { "highlightedItem": "The newly highlighted item." }
     },
+    "onItemClick": {
+      "description": "Callback fired when clicking close to an item. This is only available for scatter plot for now.",
+      "typeDescriptions": {
+        "event": "Mouse event caught at the svg level",
+        "scatterItemIdentifier": "Identify which item got clicked"
+      }
+    },
     "plotType": { "description": "Type of plot used." },
     "showHighlight": {
       "description": "Set to <code>true</code> to highlight the value. With line, it shows a point. With bar, it shows a highlight band."
@@ -52,6 +60,9 @@
       "description": "Formatter used by the tooltip.",
       "typeDescriptions": { "value": "The value to format.", "string": "the formatted value." }
     },
+    "voronoiMaxRadius": {
+      "description": "Defines the maximal distance between a scatter point and the pointer that triggers the interaction. If <code>undefined</code>, the radius is assumed to be infinite."
+    },
     "width": {
       "description": "The width of the chart in px. If not defined, it takes the width of the parent element."
     },

docs/translations/api-docs/charts/chart-container/chart-container.json

@@ -30,7 +30,7 @@ export const useChartContainerProProps = <
   const { initialZoom, onZoomChange, plugins, apiRef, ...baseProps } =
     props as ChartContainerProProps<TSeries, AllPluginSignatures>;
 
-  const { chartDataProviderProps, chartsSurfaceProps, children } = useChartContainerProps<TSeries>(
+  const { chartDataProviderProps, chartsSurfaceProps, children } = useChartContainerProps(
     baseProps,
     ref,
   );

docs/translations/api-docs/charts/charts-voronoi-handler/charts-voronoi-handler.json

@@ -7,6 +7,8 @@ import {
   UseChartInteractionSignature,
   useChartHighlight,
   UseChartHighlightSignature,
+  useChartVoronoi,
+  UseChartVoronoiSignature,
   ConvertSignaturesIntoPlugins,
 } from '@mui/x-charts/internals';
 import { useChartProZoom, UseChartProZoomSignature } from '../internals/plugins/useChartProZoom';
@@ -16,8 +18,16 @@ export type ScatterChartProPluginsSignatures = [
   UseChartCartesianAxisSignature<'scatter'>,
   UseChartInteractionSignature,
   UseChartHighlightSignature,
+  UseChartVoronoiSignature,
   UseChartProZoomSignature,
 ];
 
 export const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginsSignatures> =
-  [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProZoom];
+  [
+    useChartZAxis,
+    useChartCartesianAxis,
+    useChartInteraction,
+    useChartHighlight,
+    useChartVoronoi,
+    useChartProZoom,
+  ];

docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ScatterChartProps, ScatterPlot } from '@mui/x-charts/ScatterChart';
-import { ChartsVoronoiHandler } from '@mui/x-charts/ChartsVoronoiHandler';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
 import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
@@ -22,7 +21,10 @@ import {
 
 export interface ScatterChartProProps
   extends Omit<ScatterChartProps, 'apiRef'>,
-    Omit<ChartContainerProProps<'scatter'>, 'series' | 'plugins' | 'seriesConfig'> {}
+    Omit<
+      ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>,
+      'series' | 'plugins' | 'seriesConfig' | 'onItemClick'
+    > {}
 
 /**
  * Demos:
@@ -43,7 +45,6 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro(
   const {
     chartsWrapperProps,
     chartContainerProps,
-    voronoiHandlerProps,
     chartsAxisProps,
     gridProps,
     scatterPlotProps,
@@ -73,7 +74,6 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro(
       <ChartsWrapper {...chartsWrapperProps}>
         {!props.hideLegend && <ChartsLegend {...legendProps} />}
         <ChartsSurface {...chartsSurfaceProps}>
-          {!props.disableVoronoi && <ChartsVoronoiHandler {...voronoiHandlerProps} />}
           <ChartsAxis {...chartsAxisProps} />
           <ChartsGrid {...gridProps} />
           <g data-drawing-container>

packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts

@@ -16,7 +16,6 @@ export * from '@mui/x-charts/ChartsText';
 export * from '@mui/x-charts/ChartsTooltip';
 export * from '@mui/x-charts/ChartsLegend';
 export * from '@mui/x-charts/ChartsAxisHighlight';
-export * from '@mui/x-charts/ChartsVoronoiHandler';
 export * from '@mui/x-charts/BarChart';
 export * from '@mui/x-charts/LineChart';
 export * from '@mui/x-charts/PieChart';

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.plugins.ts

@@ -25,6 +25,7 @@ import { ChartDataProvider } from '../ChartDataProvider';
 import { ChartsSurface } from '../ChartsSurface';
 import { useChartContainerProps } from '../ChartContainer/useChartContainerProps';
 import { ChartsWrapper } from '../internals/components/ChartsWrapper';
+import { BarChartPluginsSignatures } from './BarChart.plugins';
 
 export interface BarChartSlots
   extends ChartsAxisSlots,
@@ -40,7 +41,10 @@ export interface BarChartSlotProps
     ChartsTooltipSlotProps {}
 
 export interface BarChartProps
-  extends Omit<ChartContainerProps<'bar'>, 'series' | 'plugins' | 'zAxis'>,
+  extends Omit<
+      ChartContainerProps<'bar', BarChartPluginsSignatures>,
+      'series' | 'plugins' | 'zAxis'
+    >,
     Omit<ChartsAxisProps, 'slots' | 'slotProps'>,
     Omit<BarPlotProps, 'slots' | 'slotProps'>,
     Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
@@ -119,7 +123,7 @@ const BarChart = React.forwardRef(function BarChart(
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
 
   return (
-    <ChartDataProvider {...chartDataProviderProps}>
+    <ChartDataProvider<'bar', BarChartPluginsSignatures> {...chartDataProviderProps}>
       <ChartsWrapper {...chartsWrapperProps}>
         {!props.hideLegend && <ChartsLegend {...legendProps} />}
         <ChartsSurface {...chartsSurfaceProps}>

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx

@@ -83,6 +83,10 @@ ChartContainer.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * If true, the voronoi interaction are ignored.
+   */
+  disableVoronoi: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -124,6 +128,13 @@ ChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * Callback fired when clicking close to an item.
+   * This is only available for scatter plot for now.
+   * @param {MouseEvent} event Mouse event caught at the svg level
+   * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
+   */
+  onItemClick: PropTypes.func,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -142,6 +153,11 @@ ChartContainer.propTypes = {
   ]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  voronoiMaxRadius: PropTypes.number,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

packages/x-charts-pro/src/index.ts

@@ -33,6 +33,9 @@ export const useChartContainerProps = <
     dataset,
     desc,
     onAxisClick,
+    disableVoronoi,
+    voronoiMaxRadius,
+    onItemClick,
     disableAxisListener,
     highlightedItem,
     onHighlightChange,
@@ -63,6 +66,9 @@ export const useChartContainerProps = <
     highlightedItem,
     onHighlightChange,
     onAxisClick,
+    disableVoronoi,
+    voronoiMaxRadius,
+    onItemClick,
     xAxis,
     yAxis,
     zAxis,