mui
[charts] Add bar batch renderer
Part of https://github.com/mui/mui-x/issues/12960.
Here's a PR where bar charts default to the batch renderer so you can test it and check Argos.
Differences from the individual bar plot:
- When the border radius is greater than half the bar's width or height, the batch plot handles it differently:
Before/After
Before
After
- CSS styling of single bars is no longer possible. For this reason, when onItemClick is set, cursor: pointer is not applied to bars.
- Transparent highlight style: for performance reasons, the highlighted state creates a highlighted bar on top of the original bar. Applying transparency to the highlighted bar can cause the original bar to be partially visible.
- No animation when highlighting or fading bars.
Deploy preview: https://deploy-preview-20457--material-ui-x.netlify.app/
Updated pages:
Bundle size report
| Bundle | Parsed size | Gzip size |
|---|---|---|
| @mui/x-data-grid | 0B(0.00%) | 0B(0.00%) |
| @mui/x-data-grid-pro | 0B(0.00%) | 0B(0.00%) |
| @mui/x-data-grid-premium | 0B(0.00%) | 0B(0.00%) |
| @mui/x-charts | 🔺+6.97KB(+2.01%) | 🔺+2.29KB(+2.21%) |
| @mui/x-charts-pro | 🔺+6.84KB(+1.52%) | 🔺+2.08KB(+1.53%) |
| @mui/x-charts-premium | 🔺+6.85KB(+1.53%) | 🔺+2.16KB(+1.61%) |
| @mui/x-date-pickers | 0B(0.00%) | 0B(0.00%) |
| @mui/x-date-pickers-pro | 0B(0.00%) | 0B(0.00%) |
| @mui/x-tree-view | 0B(0.00%) | 0B(0.00%) |
| @mui/x-tree-view-pro | 0B(0.00%) | 0B(0.00%) |
Generated by :no_entry_sign: dangerJS against 7e9b8bbb95b64ab022b7d692da701d6f04c9894a
CodSpeed Performance Report
Merging #20457 will not alter performance
Comparing bernardobelchior:batch-bar-plot (7e9b8bb) with master (139a02a)[^unexpected-base]
[^unexpected-base]: No successful run was found on master (262e368) during the generation of this report, so 139a02a was used instead as the comparison base. There might be some changes unrelated to this pull request in this report.
Summary
✅ 13 untouched
![codspeed-hq[bot] avatar](https://avatars.githubusercontent.com/in/257293?v=4 "Published by a pub.dev verified publisher"){kind=small}
This pull request has conflicts, please resolve those before we can evaluate the pull request.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This pull request has conflicts, please resolve those before we can evaluate the pull request.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
In the demo, zooming in throws this runtime error, I guess a rebase will fix it?
This pull request has conflicts, please resolve those before we can evaluate the pull request.
It seems like the click handle is not getting the correct element 🤔
You can see on the video below, that I click on multiple bars before the dataindex or seriesId change
https://github.com/user-attachments/assets/6e5c86db-47f6-4a83-b8bf-f1b6e6518bf8
In the demo, zooming in throws this runtime error, I guess a rebase will fix it?
Fixed in the most recent commit, good catch!
It seems like the click handle is not getting the correct element 🤔
You can see on the video below, that I click on multiple bars before the dataindex or seriesId change
The issue was caused by pointermove reporting subpixel values, but click reporting rounded values in Chrome. I'm now rounding both values to ensure the click and highlight are consistent.
About the animation, what about not having it? 😇
When rendering that much data, we are not facing nice dashboard, but serious one for people that don't have 500ms to lose on bar chart growing
About the animation, what about not having it? 😇
Yeah, I also considered that option, but I'm not sure what's best.
You can always disable animation if you want to by using skipAnimation, so having an animation by default is acceptable because users can turn it off.
We just need to think if the current animation is acceptable. If not, then we can remove or improve it. I'll take another look at animations to see what we can do here.
This pull request has conflicts, please resolve those before we can evaluate the pull request.