[charts] Fix line chart props not passing correct event handlers (mui…

…#13609)
DungTiger · Jul 23, 2024 · a8b0a7d · a8b0a7d
1 parent a314339
commit a8b0a7d
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 37 deletions.
diff --git a/packages/x-charts/src/BarChart/useBarChartProps.ts b/packages/x-charts/src/BarChart/useBarChartProps.ts
@@ -1,6 +1,16 @@
 import useId from '@mui/utils/useId';
 import type { BarChartProps } from './BarChart';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { BarPlotProps } from './BarPlot';
+import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
+import { ChartsGridProps } from '../ChartsGrid';
+import { ChartsClipPathProps } from '../ChartsClipPath';
+import { ChartsOverlayProps } from '../ChartsOverlay';
+import { ChartsAxisProps } from '../ChartsAxis';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsTooltipProps } from '../ChartsTooltip';
 
 /**
  * A helper function that extracts BarChartProps from the input props
@@ -57,7 +67,7 @@ export const useBarChartProps = (props: BarChartProps) => {
     ),
   } as const;
 
-  const chartContainerProps = {
+  const chartContainerProps: ResponsiveChartContainerProps = {
     series: series.map((s) => ({
       type: 'bar' as const,
       ...s,
@@ -84,7 +94,7 @@ export const useBarChartProps = (props: BarChartProps) => {
       !onAxisClick,
   };
 
-  const barPlotProps = {
+  const barPlotProps: BarPlotProps = {
     onItemClick,
     slots,
     slotProps,
@@ -93,11 +103,11 @@ export const useBarChartProps = (props: BarChartProps) => {
     barLabel,
   };
 
-  const axisClickHandlerProps = {
+  const axisClickHandlerProps: ChartsOnAxisClickHandlerProps = {
     onAxisClick,
   };
 
-  const gridProps = {
+  const gridProps: ChartsGridProps = {
     vertical: grid?.vertical,
     horizontal: grid?.horizontal,
   };
@@ -106,17 +116,17 @@ export const useBarChartProps = (props: BarChartProps) => {
     clipPath: `url(#${clipPathId})`,
   };
 
-  const clipPathProps = {
+  const clipPathProps: ChartsClipPathProps = {
     id: clipPathId,
   };
 
-  const overlayProps = {
+  const overlayProps: ChartsOverlayProps = {
     slots,
     slotProps,
     loading,
   };
 
-  const chartsAxisProps = {
+  const chartsAxisProps: ChartsAxisProps = {
     topAxis,
     leftAxis,
     rightAxis,
@@ -125,18 +135,18 @@ export const useBarChartProps = (props: BarChartProps) => {
     slotProps,
   };
 
-  const axisHighlightProps = {
+  const axisHighlightProps: ChartsAxisHighlightProps = {
     ...(hasHorizontalSeries ? ({ y: 'band' } as const) : ({ x: 'band' } as const)),
     ...axisHighlight,
   };
 
-  const legendProps = {
+  const legendProps: ChartsLegendProps = {
     ...legend,
     slots,
     slotProps,
   };
 
-  const tooltipProps = {
+  const tooltipProps: ChartsTooltipProps = {
     ...tooltip,
     slots,
     slotProps,

diff --git a/packages/x-charts/src/LineChart/useLineChartProps.ts b/packages/x-charts/src/LineChart/useLineChartProps.ts
@@ -1,6 +1,19 @@
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import type { LineChartProps } from './LineChart';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
+import { ChartsGridProps } from '../ChartsGrid';
+import { ChartsClipPathProps } from '../ChartsClipPath';
+import { AreaPlotProps } from './AreaPlot';
+import { LinePlotProps } from './LinePlot';
+import { MarkPlotProps } from './MarkPlot';
+import { ChartsOverlayProps } from '../ChartsOverlay';
+import { ChartsAxisProps } from '../ChartsAxis';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { LineHighlightPlotProps } from './LineHighlightPlot';
+import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsTooltipProps } from '../ChartsTooltip';
 
 /**
  * A helper function that extracts LineChartProps from the input props
@@ -45,7 +58,7 @@ export const useLineChartProps = (props: LineChartProps) => {
   const id = useId();
   const clipPathId = `${id}-clip-path`;
 
-  const chartContainerProps = {
+  const chartContainerProps: ResponsiveChartContainerProps = {
     series: series.map((s) => ({
       disableHighlight: !!disableLineItemHighlight,
       type: 'line' as const,
@@ -77,11 +90,11 @@ export const useLineChartProps = (props: LineChartProps) => {
       !onAxisClick,
   };
 
-  const axisClickHandlerProps = {
+  const axisClickHandlerProps: ChartsOnAxisClickHandlerProps = {
     onAxisClick,
   };
 
-  const gridProps = {
+  const gridProps: ChartsGridProps = {
     vertical: grid?.vertical,
     horizontal: grid?.horizontal,
   };
@@ -90,38 +103,38 @@ export const useLineChartProps = (props: LineChartProps) => {
     clipPath: `url(#${clipPathId})`,
   };
 
-  const clipPathProps = {
+  const clipPathProps: ChartsClipPathProps = {
     id: clipPathId,
   };
 
-  const areaPlotProps = {
+  const areaPlotProps: AreaPlotProps = {
     slots,
     slotProps,
-    onAreaClick,
+    onItemClick: onAreaClick,
     skipAnimation,
   };
 
-  const linePlotProps = {
+  const linePlotProps: LinePlotProps = {
     slots,
     slotProps,
-    onLineClick,
+    onItemClick: onLineClick,
     skipAnimation,
   };
 
-  const markPlotProps = {
+  const markPlotProps: MarkPlotProps = {
     slots,
     slotProps,
-    onMarkClick,
+    onItemClick: onMarkClick,
     skipAnimation,
   };
 
-  const overlayProps = {
+  const overlayProps: ChartsOverlayProps = {
     slots,
     slotProps,
     loading,
   };
 
-  const chartsAxisProps = {
+  const chartsAxisProps: ChartsAxisProps = {
     topAxis,
     leftAxis,
     rightAxis,
@@ -130,23 +143,23 @@ export const useLineChartProps = (props: LineChartProps) => {
     slotProps,
   };
 
-  const axisHighlightProps = {
+  const axisHighlightProps: ChartsAxisHighlightProps = {
     x: 'line' as const,
     ...axisHighlight,
   };
 
-  const lineHighlightPlotProps = {
+  const lineHighlightPlotProps: LineHighlightPlotProps = {
     slots,
     slotProps,
   };
 
-  const legendProps = {
+  const legendProps: ChartsLegendProps = {
     ...legend,
     slots,
     slotProps,
   };
 
-  const tooltipProps = {
+  const tooltipProps: ChartsTooltipProps = {
     ...tooltip,
     slots,
     slotProps,

diff --git a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts
@@ -1,4 +1,12 @@
+import { ChartsAxisProps } from '../ChartsAxis';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { ChartsGridProps } from '../ChartsGrid';
+import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsOverlayProps } from '../ChartsOverlay';
+import { ChartsTooltipProps } from '../ChartsTooltip';
 import type { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ZAxisContextProviderProps } from '../context';
 import type { ScatterChartProps } from './ScatterChart';
 import type { ScatterPlotProps } from './ScatterPlot';
 
@@ -39,7 +47,7 @@ export const useScatterChartProps = (props: ScatterChartProps) => {
     onHighlightChange,
   } = props;
 
-  const chartContainerProps = {
+  const chartContainerProps: ResponsiveChartContainerProps = {
     series: series.map((s) => ({ type: 'scatter' as const, ...s })),
     width,
     height,
@@ -51,14 +59,14 @@ export const useScatterChartProps = (props: ScatterChartProps) => {
     highlightedItem,
     onHighlightChange,
   };
-  const zAxisProps = {
+  const zAxisProps: Omit<ZAxisContextProviderProps, 'children'> = {
     zAxis,
   };
-  const voronoiHandlerProps = {
+  const voronoiHandlerProps: ChartsVoronoiHandlerProps = {
     voronoiMaxRadius,
     onItemClick: onItemClick as ChartsVoronoiHandlerProps['onItemClick'],
   };
-  const chartsAxisProps = {
+  const chartsAxisProps: ChartsAxisProps = {
     topAxis,
     leftAxis,
     rightAxis,
@@ -67,36 +75,36 @@ export const useScatterChartProps = (props: ScatterChartProps) => {
     slotProps,
   };
 
-  const gridProps = {
+  const gridProps: ChartsGridProps = {
     vertical: grid?.vertical,
     horizontal: grid?.horizontal,
   };
 
-  const scatterPlotProps = {
+  const scatterPlotProps: ScatterPlotProps = {
     onItemClick: disableVoronoi ? (onItemClick as ScatterPlotProps['onItemClick']) : undefined,
     slots,
     slotProps,
   };
 
-  const overlayProps = {
+  const overlayProps: ChartsOverlayProps = {
     loading,
     slots,
     slotProps,
   };
 
-  const legendProps = {
+  const legendProps: ChartsLegendProps = {
     ...legend,
     slots,
     slotProps,
   };
 
-  const axisHighlightProps = {
+  const axisHighlightProps: ChartsAxisHighlightProps = {
     y: 'none' as const,
     x: 'none' as const,
     ...axisHighlight,
   };
 
-  const tooltipProps = {
+  const tooltipProps: ChartsTooltipProps = {
     trigger: 'item' as const,
     ...tooltip,
     slots,

diff --git a/packages/x-charts/src/hooks/useColor.ts b/packages/x-charts/src/hooks/useColor.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartSeriesType } from '../internals';
+import { ChartSeriesType } from '../models/seriesType/config';
 import { ColorContext } from '../context/ColorProvider';
 import { ColorProcessorsConfig } from '../models/plugin';