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

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;
  }

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'),
  );

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);

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) {

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)`,
  );
  }
  }

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]);

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)`,
  );
  }
  }

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`,
  );
  }
 

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'),
  );

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;
  }

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,

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] = {