diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts index 2c7d571fb0772..e7cc322ad8142 100644 --- a/packages/x-charts/src/BarChart/formatter.ts +++ b/packages/x-charts/src/BarChart/formatter.ts @@ -86,9 +86,7 @@ const formatter: Formatter<'bar'> = (params, dataset) => { return { seriesOrder, stackingGroups, - series: defaultizeValueFormatter(completedSeries, (v) => - v === null ? '' : v.toLocaleString(), - ), + series: defaultizeValueFormatter(completedSeries, (v) => (v == null ? '' : v.toLocaleString())), }; }; diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx index 102bb42989ea0..1ea6324818568 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx @@ -5,14 +5,11 @@ import { useSlotProps } from '@mui/base/utils'; import { AxisInteractionData } from '../context/InteractionProvider'; import { SeriesContext } from '../context/SeriesContextProvider'; import { CartesianContext } from '../context/CartesianContextProvider'; -import { - CartesianChartSeriesType, - ChartSeriesDefaultized, - ChartSeriesType, -} from '../models/seriesType/config'; +import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config'; import { AxisDefaultized } from '../models/axis'; import { ChartsTooltipClasses } from './chartsTooltipClasses'; import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent'; +import { isCartesianSeriesType } from './utils'; export type ChartsAxisContentProps = { /** @@ -63,19 +60,17 @@ function ChartsAxisTooltipContent(props: { const relevantSeries = React.useMemo(() => { const rep: any[] = []; - ( - Object.keys(series).filter((seriesType) => - ['bar', 'line', 'scatter'].includes(seriesType), - ) as CartesianChartSeriesType[] - ).forEach((seriesType) => { - series[seriesType]!.seriesOrder.forEach((seriesId) => { - const item = series[seriesType]!.series[seriesId]; - const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey; - if (axisKey === undefined || axisKey === USED_AXIS_ID) { - rep.push(series[seriesType]!.series[seriesId]); - } + Object.keys(series) + .filter(isCartesianSeriesType) + .forEach((seriesType) => { + series[seriesType]!.seriesOrder.forEach((seriesId) => { + const item = series[seriesType]!.series[seriesId]; + const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey; + if (axisKey === undefined || axisKey === USED_AXIS_ID) { + rep.push(series[seriesType]!.series[seriesId]); + } + }); }); - }); return rep; }, [USED_AXIS_ID, isXaxis, series]); diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx index 9a708be0ee29f..e02e09e773cf7 100644 --- a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import Typography from '@mui/material/Typography'; -import { ChartSeriesDefaultized } from '../models/seriesType/config'; import { ChartsTooltipCell, ChartsTooltipPaper, @@ -11,6 +10,7 @@ import { ChartsTooltipRow, } from './ChartsTooltipTable'; import type { ChartsAxisContentProps } from './ChartsAxisTooltipContent'; +import { isCartesianSeries } from './utils'; function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) { const { series, axis, dataIndex, axisValue, sx, classes } = props; @@ -33,8 +33,9 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) { )} - {series.map(({ color, id, label, valueFormatter, data }: ChartSeriesDefaultized) => { - const formattedValue = valueFormatter(data[dataIndex]); + {series.filter(isCartesianSeries).map(({ color, id, label, valueFormatter, data }) => { + // @ts-ignore + const formattedValue = valueFormatter(data[dataIndex] ?? null); if (formattedValue == null) { return null; } diff --git a/packages/x-charts/src/ChartsTooltip/utils.tsx b/packages/x-charts/src/ChartsTooltip/utils.tsx index a0f8f6addb4bb..0b59e3106002c 100644 --- a/packages/x-charts/src/ChartsTooltip/utils.tsx +++ b/packages/x-charts/src/ChartsTooltip/utils.tsx @@ -1,7 +1,11 @@ import * as React from 'react'; import { AxisInteractionData, ItemInteractionData } from '../context/InteractionProvider'; import { SVGContext } from '../context/DrawingProvider'; -import { ChartSeriesType } from '../models/seriesType/config'; +import { + CartesianChartSeriesType, + ChartSeriesDefaultized, + ChartSeriesType, +} from '../models/seriesType/config'; export function generateVirtualElement(mousePosition: { x: number; y: number } | null) { if (mousePosition === null) { @@ -85,3 +89,13 @@ export function getTooltipHasData( return hasAxisXData || hasAxisYData; } + +export function isCartesianSeriesType(seriesType: string): seriesType is CartesianChartSeriesType { + return ['bar', 'line', 'scatter'].includes(seriesType); +} + +export function isCartesianSeries( + series: ChartSeriesDefaultized, +): series is ChartSeriesDefaultized { + return isCartesianSeriesType(series.type); +} diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts index 7734671d42053..d041eff126794 100644 --- a/packages/x-charts/src/LineChart/formatter.ts +++ b/packages/x-charts/src/LineChart/formatter.ts @@ -83,9 +83,7 @@ const formatter: Formatter<'line'> = (params, dataset) => { return { seriesOrder, stackingGroups, - series: defaultizeValueFormatter(completedSeries, (v) => - v === null ? '' : v.toLocaleString(), - ), + series: defaultizeValueFormatter(completedSeries, (v) => (v == null ? '' : v.toLocaleString())), }; };