Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[charts] Warn if axis data don't have enough elements #16830

Merged
merged 3 commits into from
Mar 6, 2025
Merged

[charts] Warn if axis data don't have enough elements #16830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4bead99
[charts] Warn if axis data don't have enought elements
alexfauquette Mar 5, 2025
05468b4
feedback
alexfauquette Mar 5, 2025
c229948
feedback
alexfauquette Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 9 additions & 12 deletions packages/x-charts/src/BarChart/BarPlot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const useAggregatedData = (): {

const verticalLayout = series[seriesId].layout === 'vertical';

checkScaleErrors(verticalLayout, seriesId, xAxisId, xAxis, yAxisId, yAxis);
checkScaleErrors(verticalLayout, seriesId, series[seriesId], xAxisId, xAxis, yAxisId, yAxis);

const baseScaleConfig = (
verticalLayout ? xAxisConfig : yAxisConfig
Expand All @@ -138,10 +138,11 @@ const useAggregatedData = (): {
});
const barOffset = groupIndex * (barWidth + offset);

const { stackedData } = series[seriesId];
const { stackedData, data: currentSeriesData, layout } = series[seriesId];

return stackedData
.map((values, dataIndex: number) => {
return baseScaleConfig
.data!.map((baseValue, dataIndex: number) => {
const values = stackedData[dataIndex];
const valueCoordinates = values.map((v) => (verticalLayout ? yScale(v)! : xScale(v)!));

const minValueCoord = Math.round(Math.min(...valueCoordinates));
Expand All @@ -152,19 +153,15 @@ const useAggregatedData = (): {
const result = {
seriesId,
dataIndex,
layout: series[seriesId].layout,
x: verticalLayout
? xScale(xAxis[xAxisId].data?.[dataIndex])! + barOffset
: minValueCoord,
y: verticalLayout
? minValueCoord
: yScale(yAxis[yAxisId].data?.[dataIndex])! + barOffset,
layout,
x: verticalLayout ? xScale(baseValue)! + barOffset : minValueCoord,
y: verticalLayout ? minValueCoord : yScale(baseValue)! + barOffset,
xOrigin: xScale(0)!,
yOrigin: yScale(0)!,
height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
color: colorGetter(dataIndex),
value: series[seriesId].data[dataIndex],
value: currentSeriesData[dataIndex],
maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`,
};

Expand Down
58 changes: 48 additions & 10 deletions packages/x-charts/src/BarChart/checkScaleErrors.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ describe('BarChart - checkScaleErrors', () => {
checkScaleErrors(
true,
'seriesId',
// @ts-expect-error
{ stackedData: [[0, 1]] },
xKey,
{
// @ts-expect-error
[xKey]: { id: xKey, scaleType: 'linear' },
},
yKey,
Expand All @@ -33,9 +34,10 @@ describe('BarChart - checkScaleErrors', () => {
checkScaleErrors(
true,
'seriesId',
// @ts-expect-error
{ stackedData: [[0, 1]] },
xKey,
{
// @ts-expect-error
[xKey]: { id: xKey, scaleType: 'band' },
},
yKey,
Expand All @@ -46,16 +48,45 @@ describe('BarChart - checkScaleErrors', () => {
}).throws('MUI X: The first `xAxis` should have data property.');
});

it('should throw an error when the x-axis data property is smaller than the series data.', () => {
expect(() => {
const xKey = DEFAULT_X_AXIS_KEY;
const yKey = DEFAULT_Y_AXIS_KEY;
checkScaleErrors(
true,
'seriesId',
// @ts-expect-error
{
stackedData: [
[0, 1],
[0, 1],
],
},
xKey,
{
[xKey]: { id: xKey, scaleType: 'band', data: [1] },
},
yKey,
{
[yKey]: { id: yKey, scaleType: 'linear' },
},
);
}).toErrorDev(
'MUI X: The first `xAxis` has less data (1 values) than the bar series of id "seriesId" (2 values)',
);
});

it('should throw an error when the y-axis is not a continuous scale', () => {
expect(() => {
const xKey = DEFAULT_X_AXIS_KEY;
const yKey = DEFAULT_Y_AXIS_KEY;
checkScaleErrors(
true,
'seriesId',
// @ts-expect-error
{ stackedData: [[0, 1]] },
xKey,
{
// @ts-expect-error
[xKey]: { id: xKey, scaleType: 'band', data: [] },
},
yKey,
Expand All @@ -75,9 +106,10 @@ describe('BarChart - checkScaleErrors', () => {
checkScaleErrors(
true,
'seriesId',
// @ts-expect-error
{ stackedData: [] },
xKey,
{
// @ts-expect-error
[xKey]: { id: xKey, scaleType: 'band', data: [] },
},
yKey,
Expand All @@ -97,9 +129,10 @@ describe('BarChart - checkScaleErrors', () => {
checkScaleErrors(
false,
'seriesId',
// @ts-expect-error
{ stackedData: [[0, 1]] },
xKey,
{
// @ts-expect-error
[xKey]: { id: xKey, scaleType: 'linear' },
},
yKey,
Expand All @@ -119,9 +152,10 @@ describe('BarChart - checkScaleErrors', () => {
checkScaleErrors(
false,
'seriesId',
// @ts-expect-error
{ stackedData: [[0, 1]] },
xKey,
{
// @ts-expect-error
[xKey]: { id: xKey, scaleType: 'linear' },
},
yKey,
Expand All @@ -139,9 +173,10 @@ describe('BarChart - checkScaleErrors', () => {
checkScaleErrors(
false,
'seriesId',
// @ts-expect-error
{ stackedData: [[0, 1]] },
xKey,
{
// @ts-expect-error
[xKey]: { id: xKey, scaleType: 'band' },
},
yKey,
Expand All @@ -161,9 +196,10 @@ describe('BarChart - checkScaleErrors', () => {
checkScaleErrors(
false,
'seriesId',
// @ts-expect-error
{ stackedData: [] },
xKey,
{
// @ts-expect-error
[xKey]: { id: xKey, scaleType: 'linear' },
},
yKey,
Expand All @@ -182,9 +218,10 @@ describe('BarChart - checkScaleErrors', () => {
checkScaleErrors(
true,
'seriesId',
// @ts-expect-error
{ stackedData: [[0, 1]] },
xKey,
{
// @ts-expect-error
[xKey]: { id: xKey, scaleType: 'linear' },
},
yKey,
Expand All @@ -204,9 +241,10 @@ describe('BarChart - checkScaleErrors', () => {
checkScaleErrors(
false,
'seriesId',
// @ts-expect-error
{ stackedData: [[0, 1]] },
xKey,
{
// @ts-expect-error
[xKey]: { id: xKey, scaleType: 'band' },
},
yKey,
Expand Down
14 changes: 14 additions & 0 deletions packages/x-charts/src/BarChart/checkScaleErrors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { warnOnce } from '@mui/x-internals/warning';
import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
import { AxisDefaultized, AxisId, isBandScaleConfig, isPointScaleConfig } from '../models/axis';
import { DefaultizedBarSeriesType } from '../models/seriesType/bar';
import { SeriesId } from '../models/seriesType/common';

const getAxisMessage = (axisDirection: 'x' | 'y', axisId: AxisId) => {
Expand All @@ -14,6 +16,7 @@ const getAxisMessage = (axisDirection: 'x' | 'y', axisId: AxisId) => {
export function checkScaleErrors(
verticalLayout: boolean,
seriesId: SeriesId,
series: DefaultizedBarSeriesType & { stackedData: [number, number][] },
xAxisId: AxisId,
xAxis: { [axisId: AxisId]: AxisDefaultized },
yAxisId: AxisId,
Expand Down Expand Up @@ -46,4 +49,15 @@ export function checkScaleErrors(
`MUI X: ${getAxisMessage(continuousAxisDirection, continuousAxisId)} should be a continuous type to display the bar series of id "${seriesId}".`,
);
}
if (process.env.NODE_ENV !== 'production') {
if (discreteAxisConfig.data.length < series.stackedData.length) {
warnOnce(
[
`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} has less data (${discreteAxisConfig.data.length} values) than the bar series of id "${seriesId}" (${series.stackedData.length} values).`,
'The axis data should have at least the same length than the series using it.',
],
'error',
);
}
}
}
4 changes: 3 additions & 1 deletion packages/x-charts/src/LineChart/LinePlot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import { warnOnce } from '@mui/x-internals/warning';
import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
import {
LineElement,
Expand Down Expand Up @@ -98,8 +99,9 @@ const useAggregatedData = () => {
);
}
if (xData.length < stackedData.length) {
throw new Error(
warnOnce(
`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`,
'error',
);
}
}
Expand Down