From 8f39c972fd31dfb8cadcc3bf84abcc09e2f78ec5 Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Thu, 1 Feb 2024 13:16:29 +0100
Subject: [PATCH] simplify typing check

---
 .../ChartsAxisTooltipContent.tsx              | 29 +++++-----
 .../DefaultChartsAxisTooltipContent.tsx       | 54 +++++++++----------
 packages/x-charts/src/ChartsTooltip/utils.tsx | 16 +++++-
 3 files changed, 52 insertions(+), 47 deletions(-)

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 90edc37a8d9ab..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 { CartesianChartSeriesType, 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,36 +33,32 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) {
         )}
 
         <tbody>
-          {series
-            .filter((item): item is ChartSeriesDefaultized<CartesianChartSeriesType> =>
-              ['bar', 'line', 'scatter'].includes(item.type),
-            )
-            .map(({ color, id, label, valueFormatter, data }) => {
-              // @ts-ignore
-              const formattedValue = valueFormatter(data[dataIndex] ?? null);
-              if (formattedValue == null) {
-                return null;
-              }
-              return (
-                <ChartsTooltipRow key={id} className={classes.row}>
-                  <ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
-                    <ChartsTooltipMark
-                      ownerState={{ color }}
-                      boxShadow={1}
-                      className={classes.mark}
-                    />
-                  </ChartsTooltipCell>
+          {series.filter(isCartesianSeries).map(({ color, id, label, valueFormatter, data }) => {
+            // @ts-ignore
+            const formattedValue = valueFormatter(data[dataIndex] ?? null);
+            if (formattedValue == null) {
+              return null;
+            }
+            return (
+              <ChartsTooltipRow key={id} className={classes.row}>
+                <ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
+                  <ChartsTooltipMark
+                    ownerState={{ color }}
+                    boxShadow={1}
+                    className={classes.mark}
+                  />
+                </ChartsTooltipCell>
 
-                  <ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
-                    {label ? <Typography>{label}</Typography> : null}
-                  </ChartsTooltipCell>
+                <ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
+                  {label ? <Typography>{label}</Typography> : null}
+                </ChartsTooltipCell>
 
-                  <ChartsTooltipCell className={clsx(classes.valueCell, classes.cell)}>
-                    <Typography>{formattedValue}</Typography>
-                  </ChartsTooltipCell>
-                </ChartsTooltipRow>
-              );
-            })}
+                <ChartsTooltipCell className={clsx(classes.valueCell, classes.cell)}>
+                  <Typography>{formattedValue}</Typography>
+                </ChartsTooltipCell>
+              </ChartsTooltipRow>
+            );
+          })}
         </tbody>
       </ChartsTooltipTable>
     </ChartsTooltipPaper>
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<ChartSeriesType>,
+): series is ChartSeriesDefaultized<CartesianChartSeriesType> {
+  return isCartesianSeriesType(series.type);
+}