From e075b850c82e5bfc2e8ecfb373731480ed144c90 Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Mon, 24 Jun 2024 13:26:10 +0200 Subject: [PATCH] [charts] Fix line chart props not passing correct event handlers (#13609) --- .../x-charts/src/BarChart/useBarChartProps.ts | 30 ++++++++----- .../src/LineChart/useLineChartProps.ts | 45 ++++++++++++------- .../src/ScatterChart/useScatterChartProps.ts | 28 +++++++----- packages/x-charts/src/hooks/useColor.ts | 2 +- 4 files changed, 68 insertions(+), 37 deletions(-) diff --git a/packages/x-charts/src/BarChart/useBarChartProps.ts b/packages/x-charts/src/BarChart/useBarChartProps.ts index b8c9e00ceea9b..72d1141b43c92 100644 --- 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 index 226061be2a17a..97413791ca0c8 100644 --- 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 index 9f57a8c01c74f..383e7a105fe0a 100644 --- 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 = { 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 index c124c75cd796d..68b6ecc59fa52 100644 --- 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';