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

…#13609)
thomasmoon · Sep 6, 2024 · e075b85 · e075b85
1 parent c3ef3fd
commit e075b85
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';