From bffa6fc9265fbb9a13ec9d6382d6de46e729ded7 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 21 Dec 2023 18:51:46 +0100 Subject: [PATCH] [charts] Make error message more explicit (#11457) --- packages/x-charts/src/BarChart/BarPlot.tsx | 29 ++++++++++++++++--- packages/x-charts/src/BarChart/formatter.ts | 2 +- .../x-charts/src/ChartsAxis/ChartsAxis.tsx | 28 +++++++++++++++--- .../ChartsReferenceLine.tsx | 8 +++-- packages/x-charts/src/LineChart/AreaPlot.tsx | 9 ++++-- .../src/LineChart/LineHighlightPlot.tsx | 7 ++++- packages/x-charts/src/LineChart/LinePlot.tsx | 9 ++++-- packages/x-charts/src/LineChart/MarkPlot.tsx | 7 ++++- packages/x-charts/src/LineChart/formatter.ts | 2 +- .../src/ResponsiveChartContainer/index.tsx | 4 +-- .../src/context/CartesianContextProvider.tsx | 4 +-- .../src/context/SeriesContextProvider.tsx | 2 +- 12 files changed, 88 insertions(+), 23 deletions(-) diff --git a/packages/x-charts/src/BarChart/BarPlot.tsx b/packages/x-charts/src/BarChart/BarPlot.tsx index 8858ab5cb80e..30df42838df6 100644 --- 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 index 92897fc32b86..12f08d21692e 100644 --- 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 index c42886aa1278..d3a40d6fda44 100644 --- 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 index a8c9f1a6c069..5357d78b2c1c 100644 --- a/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx +++ b/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx @@ -11,11 +11,15 @@ type ChartsReferenceLineProps; @@ -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 index c610d5a744a3..c84c30335a18 100644 --- 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; @@ -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 index bdaa7455a89b..65b9881656a0 100644 --- 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; @@ -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 index 51c057316d58..6eda1a188db6 100644 --- 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; @@ -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 index 5b98e752dc68..93dcfdc4abad 100644 --- 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 index 7c3775d890bd..bc7c8b84d2a7 100644 --- 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 index 3d826e060ce2..6c894da269d2 100644 --- 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 index 4c6969307077..025cdfd115ca 100644 --- 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] = {