[charts] Allow customizing shape in scatter charts

[bernardobelchior]

Allow customizing shape in scatter charts by using the marker slot.

This is my first time using slots, so I'm not sure if I'm using them properly and whether the ownerState/additionalProps is well defined.

Still need to write the docs, but at the moment I'm only looking for feedback on the implementation.

[mui-bot]

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

Updated pages:

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

Generated by 🚫 dangerJS against ba795ba

[codspeed-hq]

CodSpeed Performance Report

Merging #16640 will degrade performances by 20.01%

_{Comparing bernardobelchior:scatter-chart-shape (ba795ba) with master (15f5a84)}

Summary

❌ 1 regressions
✅ 5 untouched benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Benchmarks breakdown

	Benchmark	BASE	HEAD	Change
❌	ScatterChart with big data amount	380.7 ms	476 ms	-20.01%

[JCQuintas]

Left some comments, if there are other places you want input, let me know

[JCQuintas]

We can remove this and merge the props into the ScatterMarkerProps

[bernardobelchior]

This is used in Scatter.types.ts and on ScatterMarkerProps, so it's probably better to keep it to avoid duplication.

I'll remove it if we have only one usage.

[bernardobelchior]

The current implementation seems to work, but it's weird that the legend's marker is different from the chart's. I'll think of way to reuse the marker slot.

[JCQuintas]

The current implementation seems to work, but it's weird that the legend's marker is different from the chart's. I'll think of way to reuse the marker slot.

A lot of the times, the slots are passed to the top component, which means you should be able to pass it around to the legend component to be used as the marker there. Though a lot of parts will probably need to change 😆