[charts] Make error message more explicit (#11457)

mui · Dec 21, 2023 · bffa6fc · bffa6fc
1 parent 49113fb
commit bffa6fc
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 23 deletions.
diff --git a/packages/x-charts/src/BarChart/BarPlot.tsx b/packages/x-charts/src/BarChart/BarPlot.tsx
@@ -8,6 +8,7 @@ import { isBandScaleConfig } from '../models/axis';
 import { FormatterResult } from '../models/seriesType/config';
 import { HighlightScope } from '../context/HighlightProvider';
 import { BarSeriesType } from '../models';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 
 /**
  * Solution of the equations
@@ -97,22 +98,42 @@ const useCompletedData = (): CompletedBarData[] => {
       if (verticalLayout) {
         if (!isBandScaleConfig(xAxisConfig)) {
           throw new Error(
-            `Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`,
+            `MUI-X-Charts: ${
+              xAxisKey === DEFAULT_X_AXIS_KEY
+                ? 'The first `xAxis`'
+                : `The x-axis with id "${xAxisKey}"`
+            } shoud be of type "band" to display the bar series of id "${seriesId}"`,
           );
         }
         if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+          throw new Error(
+            `MUI-X-Charts: ${
+              xAxisKey === DEFAULT_X_AXIS_KEY
+                ? 'The first `xAxis`'
+                : `The x-axis with id "${xAxisKey}"`
+            } shoud have data property`,
+          );
         }
         baseScaleConfig = xAxisConfig;
       } else {
         if (!isBandScaleConfig(yAxisConfig)) {
           throw new Error(
-            `Axis with id "${yAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`,
+            `MUI-X-Charts: ${
+              yAxisKey === DEFAULT_Y_AXIS_KEY
+                ? 'The first `yAxis`'
+                : `The y-axis with id "${yAxisKey}"`
+            } shoud be of type "band" to display the bar series of id "${seriesId}"`,
           );
         }
 
         if (yAxis[yAxisKey].data === undefined) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+          throw new Error(
+            `MUI-X-Charts: ${
+              yAxisKey === DEFAULT_Y_AXIS_KEY
+                ? 'The first `yAxis`'
+                : `The y-axis with id "${yAxisKey}"`
+            } shoud have data property`,
+          );
         }
         baseScaleConfig = yAxisConfig;
       }

diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts
@@ -32,7 +32,7 @@ const formatter: Formatter<'bar'> = (params, dataset) => {
     } else if (dataset === undefined) {
       throw new Error(
         [
-          `MUI: bar series with id='${id}' has no data.`,
+          `MUI-X-Charts: bar series with id='${id}' has no data.`,
           'Either provide a data property to the series or use the dataset prop.',
         ].join('\n'),
       );

diff --git a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx
@@ -95,16 +95,36 @@ function ChartsAxis(props: ChartsAxisProps) {
   const rightId = getAxisId(rightAxis);
 
   if (topId !== null && !xAxis[topId]) {
-    throw Error(`MUI: id used for top axis "${topId}" is not defined`);
+    throw Error(
+      [
+        `MUI-X-Charts: id used for top axis "${topId}" is not defined.`,
+        `Available ids are: ${xAxisIds.join(', ')}.`,
+      ].join('\n'),
+    );
   }
   if (leftId !== null && !yAxis[leftId]) {
-    throw Error(`MUI: id used for left axis "${leftId}" is not defined`);
+    throw Error(
+      [
+        `MUI-X-Charts: id used for left axis "${leftId}" is not defined.`,
+        `Available ids are: ${yAxisIds.join(', ')}.`,
+      ].join('\n'),
+    );
   }
   if (rightId !== null && !yAxis[rightId]) {
-    throw Error(`MUI: id used for right axis "${rightId}" is not defined`);
+    throw Error(
+      [
+        `MUI-X-Charts: id used for right axis "${rightId}" is not defined.`,
+        `Available ids are: ${yAxisIds.join(', ')}.`,
+      ].join('\n'),
+    );
   }
   if (bottomId !== null && !xAxis[bottomId]) {
-    throw Error(`MUI: id used for bottom axis "${bottomId}" is not defined`);
+    throw Error(
+      [
+        `MUI-X-Charts: id used for bottom axis "${bottomId}" is not defined.`,
+        `Available ids are: ${xAxisIds.join(', ')}.`,
+      ].join('\n'),
+    );
   }
   const topAxisProps = mergeProps(topAxis, slots, slotProps);
   const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);

diff --git a/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx b/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx
@@ -11,11 +11,15 @@ type ChartsReferenceLineProps<TValue extends string | number | Date = string | n
 
 function ChartsReferenceLine(props: ChartsReferenceLineProps) {
   if (props.x !== undefined && props.y !== undefined) {
-    throw new Error('MUI-X: The ChartsReferenceLine can not have both `x` and `y` props set.');
+    throw new Error(
+      'MUI-X-Charts: The ChartsReferenceLine can not have both `x` and `y` props set.',
+    );
   }
 
   if (props.x === undefined && props.y === undefined) {
-    throw new Error('MUI-X: The ChartsReferenceLine should have a value in `x` or `y` prop.');
+    throw new Error(
+      'MUI-X-Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.',
+    );
   }
 
   if (props.x !== undefined) {

diff --git a/packages/x-charts/src/LineChart/AreaPlot.tsx b/packages/x-charts/src/LineChart/AreaPlot.tsx
@@ -6,6 +6,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { AreaElement, AreaElementProps } from './AreaElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 
 export interface AreaPlotSlots {
   area?: React.JSXElementConstructor<AreaElementProps>;
@@ -63,12 +64,16 @@ function AreaPlot(props: AreaPlotProps) {
           if (process.env.NODE_ENV !== 'production') {
             if (xData === undefined) {
               throw new Error(
-                `Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`,
+                `MUI-X-Charts: ${
+                  xAxisKey === DEFAULT_X_AXIS_KEY
+                    ? 'The first `xAxis`'
+                    : `The x-axis with id "${xAxisKey}"`
+                } should have data property to be able to display a line plot.`,
               );
             }
             if (xData.length < stackedData.length) {
               throw new Error(
-                `MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`,
+                `MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`,
               );
             }
           }

diff --git a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx
@@ -5,6 +5,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineHighlightElement, LineHighlightElementProps } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { InteractionContext } from '../context/InteractionProvider';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 
 export interface LineHighlightPlotSlots {
   lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
@@ -80,7 +81,11 @@ function LineHighlightPlot(props: LineHighlightPlotProps) {
 
           if (xData === undefined) {
             throw new Error(
-              `Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`,
+              `MUI-X-Charts: ${
+                xAxisKey === DEFAULT_X_AXIS_KEY
+                  ? 'The first `xAxis`'
+                  : `The x-axis with id "${xAxisKey}"`
+              } should have data property to be able to display a line plot.`,
             );
           }
           const x = xScale(xData[highlightedIndex]);

diff --git a/packages/x-charts/src/LineChart/LinePlot.tsx b/packages/x-charts/src/LineChart/LinePlot.tsx
@@ -6,6 +6,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineElement, LineElementProps } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 
 export interface LinePlotSlots {
   line?: React.JSXElementConstructor<LineElementProps>;
@@ -61,12 +62,16 @@ function LinePlot(props: LinePlotProps) {
           if (process.env.NODE_ENV !== 'production') {
             if (xData === undefined) {
               throw new Error(
-                `Axis of id "${xAxisKey}" should have data property to be able to display a line plot`,
+                `MUI-X-Charts: ${
+                  xAxisKey === DEFAULT_X_AXIS_KEY
+                    ? 'The first `xAxis`'
+                    : `The x-axis with id "${xAxisKey}"`
+                } should have data property to be able to display a line plot`,
               );
             }
             if (xData.length < stackedData.length) {
               throw new Error(
-                `MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`,
+                `MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`,
               );
             }
           }

diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx
@@ -4,6 +4,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement, MarkElementProps } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 
 export interface MarkPlotSlots {
   mark?: React.JSXElementConstructor<MarkElementProps>;
@@ -87,7 +88,11 @@ function MarkPlot(props: MarkPlotProps) {
 
           if (xData === undefined) {
             throw new Error(
-              `Axis of id "${xAxisKey}" should have data property to be able to display a line plot`,
+              `MUI-X-Charts: ${
+                xAxisKey === DEFAULT_X_AXIS_KEY
+                  ? 'The first `xAxis`'
+                  : `The x-axis with id "${xAxisKey}"`
+              } should have data property to be able to display a line plot`,
             );
           }
 

diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts
@@ -31,7 +31,7 @@ const formatter: Formatter<'line'> = (params, dataset) => {
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
       throw new Error(
         [
-          `MUI: line series with id='${id}' has no data.`,
+          `MUI-X-Charts: line series with id='${id}' has no data.`,
           'Either provide a data property to the series or use the dataset prop.',
         ].join('\n'),
       );

diff --git a/packages/x-charts/src/ResponsiveChartContainer/index.tsx b/packages/x-charts/src/ResponsiveChartContainer/index.tsx
@@ -74,13 +74,13 @@ const useChartDimensions = (
   if (process.env.NODE_ENV !== 'production') {
     if (displayError.current && inWidth === undefined && width === 0) {
       console.error(
-        `MUI: Charts does not have \`width\` prop, and its container has no \`width\` defined.`,
+        `MUI-X-Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`,
       );
       displayError.current = false;
     }
     if (displayError.current && inHeight === undefined && height === 0) {
       console.error(
-        `MUI: Charts does not have \`height\` prop, and its container has no \`height\` defined.`,
+        `MUI-X-Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`,
       );
       displayError.current = false;
     }

diff --git a/packages/x-charts/src/context/CartesianContextProvider.tsx b/packages/x-charts/src/context/CartesianContextProvider.tsx
@@ -112,7 +112,7 @@ function CartesianContextProvider({
           return axisConfig;
         }
         if (dataset === undefined) {
-          throw Error('MUI: x-axis uses `dataKey` but no `dataset` is provided.');
+          throw Error('MUI-X-Charts: x-axis uses `dataKey` but no `dataset` is provided.');
         }
         return {
           ...axisConfig,
@@ -130,7 +130,7 @@ function CartesianContextProvider({
           return axisConfig;
         }
         if (dataset === undefined) {
-          throw Error('MUI: y-axis uses `dataKey` but no `dataset` is provided.');
+          throw Error('MUI-X-Charts: y-axis uses `dataKey` but no `dataset` is provided.');
         }
         return {
           ...axisConfig,

diff --git a/packages/x-charts/src/context/SeriesContextProvider.tsx b/packages/x-charts/src/context/SeriesContextProvider.tsx
@@ -60,7 +60,7 @@ const formatSeries = (series: AllSeriesType[], colors: string[], dataset?: Datas
       seriesGroups[type] = { series: {}, seriesOrder: [] };
     }
     if (seriesGroups[type]?.series[id] !== undefined) {
-      throw new Error(`MUI: series' id "${id}" is not unique`);
+      throw new Error(`MUI-X-Charts: series' id "${id}" is not unique`);
     }
 
     seriesGroups[type]!.series[id] = {