[charts] Remove redundant default axis

[bernardobelchior]

Remove redundant default axis when processing user-provided axes.

Also fixes a crash with the Heatmap when the xAxis prop was an empty array.

Added unit tests for every chart that accepts an array for either the xAxis or the yAxis prop.

Before:

Screen.Recording.2025-02-26.at.09.51.14.mov

After:

Screen.Recording.2025-02-26.at.09.51.33.mov

[mui-bot]

Deploy preview: https://deploy-preview-16734--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 3322dbd

[alexfauquette]

I'm surprised you had to modify the x-axis and not the y-axis since they are used the same way.

A slight improvement could be to set some default data such that he series can be display.

Suggested change

	data: [],
	data: Array.from(
	{ length: Math.max(...series[0].data.map(([xIndex, ]) => xIndex) + 1 },
	(_, index) => index,
	),

similarly for the y axis

        data: Array.from(
      { length: Math.max(...series[0].data.map(([_, yIndex, ]) => yIndex) + 1 },
      (_, index) => index,
    ),

Another improvement coudl be to add in he HeatMapPlot a warning to indicate that some indexes of the series are shight than the length of x/y axes' data. SO they can not be displayed. Otherwise data are missing without giving a clue to the developer about why

Capture.video.du.2025-02-26.10-20-39.mp4

[bernardobelchior]

I'm surprised you had to modify the x-axis and not the y-axis since they are used the same way.

I accidentally reproduced this and the y-axis has the same problem. The difference is that we need to pass an empty axis object inside the array (yAxis={[{}]}) instead of just an empty array (yAxis={[]}). I'll add a unit test to verify this.

A slight improvement could be to set some default data such that he series can be display.

Sure thing. I'd like to test this, though. I'd prefer a unit test here, but I can't seem to find a selector for the X/Y axes without relying on CSS classes. Would it make sense to add an ARIA role, test ID or some other attribute to axes?

I'd prefer to use ARIA roles, but from my quick investigation there doesn't seem to be a standard for accessibility in charts. There seems to be this proposal, which looks good, but it doesn't seem to have been accepted.

[JCQuintas]

ARIA for charts is a bit all over the place as far as I know. In the end we rely that developers create an accessible description of the chart instead.

You should be able to use data-testid, which will be removed on build. (Hence can't be used in performance tests, but unit/browser should work

[alexfauquette]

I can't seem to find a selector for the X/Y axes without relying on CSS classes.

I don't see issues about using CSS classes. We need to keep them stable since devs are using them for customization. So using them in selectors should be fine, and has the adventage of also testing the extense of those classes :)

[bernardobelchior]

@alexfauquette added the defaulting as you suggested, but changed it slightly. It'll only show values that exist in the dataset, rather than values from 0 to the greatest value in the dataset.

The problem with the latter approach is that negative numbers would be hidden.

[codspeed-hq]

CodSpeed Performance Report

Merging #16734 will not alter performance

_{Comparing bernardobelchior:remove-redundant-default-axis (3322dbd) with master (1613993)}

Summary

✅ 6 untouched benchmarks

[alexfauquette]

Not sure about why having intermediate function, but not a big deal

Suggested change

	data: axis.data ? undefined : getDefaultDataForXAxis(series),
	data: axis.data ? undefined : getDefaultDataForAxis(series, 0),

[bernardobelchior]

It feels better for readability, but I don't feel too strongly about it.

[alexfauquette]

You just need the maximal value in the direction, because the 2 first numbers in heatmap series.data are respectively the x and y indexes of the cell.

So default values should go from 0 to the maximal index

It's your test that let me realised that. The [-1, 3, 7] can not be displayed because -1 is not be a valid index

[bernardobelchior]

This heatmap API seems a bit weird to me. If the x- and y-axes are band scales, why can't I set any value I want?

Nevertheless, I'll update this to your proposed solution 👍

[alexfauquette]

If the x- and y-axes are band scales, why can't I set any value I want?

That's the purpose, you can put any value in the x/y (dates, numbers, string). The series is independent from them since it relies only on indexes. Avoiding types like

seris.data: [(Date | number | string), (Date | number | string), number]

Technically, you could put any thing as a default value in data Just you need to have enough items to display the min/max indexes