[charts] Move the line item highligh into a dedicated component

[alexfauquette]

Linked to #9228 (comment)

Since the mark element is CPU consuming (a lot of tinny items to render)

If we only want to display the highlighted ones, it's better to render only those instead of rendering them all and hiding the other with CSS.

I let it for review without updating all the demos, such that it stays as small as possible.

I'm also uncertain about naming: showMark, disableHighlight, and disableLineItemHighlight.

Maybe it would be better to replace the series property renderHighlight with disableHighlight.

Todo

• Define a way to choose between this new approach and the mark elements
• Document it
• Add this to sparkline
• Update all demo

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-10117--material-ui-x.netlify.app/

Updated pages

• docs/data/charts/lines/lines.md

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	-192.7	-12.9	-42.7	-81.32	61.634
Sort 100k rows	ms	674	1,487	1,416.1	1,232.16	293.446
Select 100k rows	ms	698	880.4	770.3	766.92	64.644
Deselect 100k rows	ms	143	246.2	203	196.76	33.505

Generated by 🚫 dangerJS against a18f51c

[LukasTy]

Very nice improvement! 👍

Leaving a few syntax suggestions as well as a suggestion for the prop name inversion. 😉

[LukasTy]

Is there a point in exporting the OwnerState type in charts codebase? 🤔
I don't see it exported on pickers or data grid. 🤷

[alexfauquette]

Not really, I probably added export by reflex when defining those interfaces