[charts] Allow dataset to be used with ScatterChart

[JCQuintas]

Resolves #14333

Uses a single object signature. As it more accurately leverage typescript to force users to provide all keys when the object exists.

type DatasetKeys = {
  x: string,
  y: string,
  z?: string,
  id: string
}

type ScatterChart = {
  datasetKeys?: DatasetKeys
}

[mui-bot]

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

Updated pages:

• docs/data/charts/scatter/scatter.md

Generated by 🚫 dangerJS against 1e4ae95

[codspeed-hq]

CodSpeed Performance Report

Merging #14915 will not alter performance

_{Comparing JCQuintas:scatter-dataset (1e4ae95) with master (fe69246)}

Summary

✅ 3 untouched benchmarks

[alexfauquette]

@JCQuintas I like your idea of dataKeys = { x: 'xKey', y: 'ykey', id: 'idKey'}

Another more flexible option could be to introduce a getValue: (item) => ({ x, y, id }). But the first one has the advantage to be consistent with other charts and other libraries

[JCQuintas]

@JCQuintas I like your idea of dataKeys = { x: 'xKey', y: 'ykey', id: 'idKey'}

Another more flexible option could be to introduce a getValue: (item) => ({ x, y, id }). But the first one has the advantage to be consistent with other charts and other libraries

Yeah, a function is more flexible. We should probably migrate into functions eventually though, but I didn't feel confident to do so now 😅

[alexfauquette]

I didn't feel confident to do so now

But are you ok to update the PR with dataKeys object instead of multiple properties?

[JCQuintas]

I didn't feel confident to do so now

But are you ok to update the PR with dataKeys object instead of multiple properties?

yep

[alexfauquette]

Since datasetKeys should contain x, y, and id if defined, some ! could be removed

Suggested change

	const data = !hasStringKeys
	? (seriesData.data ?? [])
	: (dataset?.map((d) => {
	const x = d[xDataKey!]!;
	const y = d[yDataKey!]!;
	const z = d[zDataKey ?? ''];
	const id = d[idDataKey!]!;
	const data = !seriesData?.datasetKeys
	? (seriesData.data ?? [])
	: (dataset?.map((d) => {
	const x = d[seriesData?.datasetKeys.x];
	const y = d[seriesData?.datasetKeys.y];
	const z = seriesData?.datasetKeys && d[seriesData?.datasetKeys.z];
	const id = d[seriesData?.datasetKeys.id];

[JCQuintas]

Its kind of required still

            const x = d[seriesData?.datasetKeys!.x];
            const y = d[seriesData?.datasetKeys!.y];
            const z = seriesData?.datasetKeys?.z && d[seriesData?.datasetKeys!.z!];
            const id = d[seriesData?.datasetKeys!.id];

[JCQuintas]

I've made it closer to my initial solution, but made it cleaner, so we don't need all those ! 😅

[alexfauquette]

I added a commit to extract the datasetKeys to avoid all those seriesData?.datasetKeys. And instead of getting a boolean, I get the list of missing properties to have a more precise error message.

I also updated the docs demo to avoid overflow between y-axis ticks and the label