[chart] Use default values instead of non-null assertion to prevent error being thrown (mui#13637)

Signed-off-by: Jose C Quintas Jr <[email protected]>
Co-authored-by: Alexandre Fauquette <[email protected]>

Author: 2 people

packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx

@@ -80,11 +80,34 @@ function ChartsAxisHighlight(props: ChartsAxisHighlightProps) {
 
   const getXPosition = getValueToPositionMapper(xScale);
   const getYPosition = getValueToPositionMapper(yScale);
+
+  const axisX = axis.x;
+  const axisY = axis.y;
+
+  const isBandScaleX = xAxisHighlight === 'band' && axisX !== null && isBandScale(xScale);
+  const isBandScaleY = yAxisHighlight === 'band' && axisY !== null && isBandScale(yScale);
+
+  if (process.env.NODE_ENV !== 'production') {
+    const isXError = isBandScaleX && xScale(axisX.value) === undefined;
+    const isYError = isBandScaleY && yScale(axisY.value) === undefined;
+
+    if (isXError || isYError) {
+      console.error(
+        [
+          `MUI X Charts: The position value provided for the axis is not valid for the current scale.`,
+          `This probably means something is wrong with the data passed to the chart.`,
+          `The ChartsAxisHighlight component will not be displayed.`,
+        ].join('\n'),
+      );
+    }
+  }
+
   return (
     <React.Fragment>
-      {xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && (
+      {isBandScaleX && xScale(axisX.value) !== undefined && (
         <ChartsAxisHighlightPath
-          d={`M ${xScale(axis.x.value)! - (xScale.step() - xScale.bandwidth()) / 2} ${
+          // @ts-expect-error, xScale value is checked in the statement above
+          d={`M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${
             yScale.range()[0]
           } l ${xScale.step()} 0 l 0 ${
             yScale.range()[1] - yScale.range()[0]
@@ -94,10 +117,11 @@ function ChartsAxisHighlight(props: ChartsAxisHighlightProps) {
         />
       )}
 
-      {yAxisHighlight === 'band' && axis.y !== null && isBandScale(yScale) && (
+      {isBandScaleY && yScale(axisY.value) === undefined && (
         <ChartsAxisHighlightPath
           d={`M ${xScale.range()[0]} ${
-            yScale(axis.y.value)! - (yScale.step() - yScale.bandwidth()) / 2
+            // @ts-expect-error, yScale value is checked in the statement above
+            yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2
           } l 0 ${yScale.step()} l ${
             xScale.range()[1] - xScale.range()[0]
           } 0 l 0 ${-yScale.step()} Z`}

packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx

@@ -5,7 +5,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { InteractionContext } from '../context/InteractionProvider';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
-import { getSVGPoint } from '../internals/utils';
+import { getSVGPoint } from '../internals/getSVGPoint';
 import { ScatterItemIdentifier } from '../models';
 import { SeriesId } from '../models/seriesType/common';
 import { useDrawingArea, useSvgRef } from '../hooks';

packages/x-charts/src/hooks/useAxisEvents.ts

@@ -3,7 +3,7 @@ import { InteractionContext } from '../context/InteractionProvider';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { isBandScale } from '../internals/isBandScale';
 import { AxisDefaultized } from '../models/axis';
-import { getSVGPoint } from '../internals/utils';
+import { getSVGPoint } from '../internals/getSVGPoint';
 import { useSvgRef } from './useSvgRef';
 import { useDrawingArea } from './useDrawingArea';
 
@@ -31,10 +31,7 @@ export const useAxisEvents = (disableAxisListener: boolean) => {
       return () => {};
     }
 
-    const getUpdate = (axisConfig: AxisDefaultized, mouseValue: number) => {
-      if (usedXAxis === null) {
-        return null;
-      }
+    function getNewAxisState(axisConfig: AxisDefaultized, mouseValue: number) {
       const { scale, data: axisData, reverse } = axisConfig;
 
       if (!isBandScale(scale)) {
@@ -93,7 +90,7 @@ export const useAxisEvents = (disableAxisListener: boolean) => {
         index: dataIndex,
         value: axisData![dataIndex],
       };
-    };
+    }
 
     const handleOut = () => {
       mousePosition.current = {
@@ -118,8 +115,8 @@ export const useAxisEvents = (disableAxisListener: boolean) => {
         dispatch({ type: 'exitChart' });
         return;
       }
-      const newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
-      const newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
+      const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
+      const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
 
       dispatch({ type: 'updateAxis', data: { x: newStateX, y: newStateY } });
     };

packages/x-charts/src/hooks/useScale.ts

@@ -10,7 +10,7 @@ import { AxisScaleConfig, D3Scale, ScaleName } from '../models/axis';
  */
 export function getValueToPositionMapper(scale: D3Scale) {
   if (isBandScale(scale)) {
-    return (value: any) => scale(value)! + scale.bandwidth() / 2;
+    return (value: any) => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
   return (value: any) => scale(value) as number;
 }

packages/x-charts/src/internals/getSVGPoint.ts

@@ -0,0 +1,11 @@
+/**
+ * Transform mouse event position to coordinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>) {
+  const pt = svg.createSVGPoint();
+  pt.x = event.clientX;
+  pt.y = event.clientY;
+  return pt.matrixTransform(svg.getScreenCTM()!.inverse());
+}

packages/x-charts/src/internals/index.ts

@@ -7,6 +7,7 @@ export * from '../ResponsiveChartContainer/ResizableContainer';
 // hooks
 export { useReducedMotion } from '../hooks/useReducedMotion';
 export { useSeries } from '../hooks/useSeries';
+export { useDrawingArea } from '../hooks/useDrawingArea';
 export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
 export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
 export { useLineChartProps } from '../LineChart/useLineChartProps';
@@ -15,6 +16,7 @@ export { useBarChartProps } from '../BarChart/useBarChartProps';
 // utils
 export * from './defaultizeValueFormatter';
 export * from './configInit';
+export * from './getSVGPoint';
 
 // contexts
 

packages/x-charts/src/internals/utils.ts

@@ -9,18 +9,6 @@ export function getSymbol(shape: SymbolsTypes): number {
 type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
 export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
 
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-export function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>) {
-  const pt = svg.createSVGPoint();
-  pt.x = event.clientX;
-  pt.y = event.clientY;
-  return pt.matrixTransform(svg.getScreenCTM()!.inverse());
-}
-
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.