mui
[docs] Add Sankey overview demo
Deploy preview: https://deploy-preview-20482--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 | 0B(0.00%) | 0B(0.00%) |
| @mui/x-charts-pro | 0B(0.00%) | 0B(0.00%) |
| @mui/x-charts-premium | 0B(0.00%) | 0B(0.00%) |
| @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 3fe440a44462304be6b2de8714d49606d4ab739d
CodSpeed Performance Report
Merging #20482 will not alter performance
Comparing prakhargupta1:sankey (3fe440a) with master (a5d7eb7)[^unexpected-base]
[^unexpected-base]: No successful run was found on master (9571691) during the generation of this report, so a5d7eb7 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}
There is a label overlap on the first link. @JCQuintas Is there a way to fix it? Also some nodes are hiding the labels, already reported in https://github.com/mui/mui-x/issues/20076
Maybe a labelPosition prop (inside|outside) for the nodes label could help with this situation. Example: https://www.sankeyart.com/sankeys/137406/
There is a label overlap on the first link. @JCQuintas Is there a way to fix it? Also some nodes are hiding the labels, already reported in #20076
Maybe a labelPosition prop (
inside|outside) for the nodes label could help with this situation. Example: https://www.sankeyart.com/sankeys/137406/
We can't fix that right now. An option to allow customizing where to put it would be nice, but also not currently possible without calculating the available area
Doesn't look great on mobile 😅
The nodes seem to be rendered above the labels as well, which makes it look even worse.
Could we try to shorten or hide labels by default and only show their full names in the tooltip?
Doesn't look great on mobile 😅
Forgot to check it on mobile and yeah it looks quite bad. I'll see if something can be done.
Should I merge this? It looks good on desktop now but on mobile there are a few label-label overlaps.
Could we try making some labels multi-line? Maybe that would help.
In mobile, it's hard to see that "Windows & Devices" actually refers to the leftmost node, instead of the center one, for example.
Another option would be to add some horizontal scroll to the chart. E.g., we could say it occupies at least 400 pixels and create a scrollable container so we can properly see the chart.
Otherwise, I think it isn't a very good impression that our overview looks bad on mobile 😅
I think you can let this demo as it is, and we will merge it once we improve the label placement
