mui
[charts] Refine overview page
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Deploy preview: https://deploy-preview-17447--material-ui-x.netlify.app/
Updated pages:
Bundle size report
Total Size Change: 0B(0.00%) - Total Gzip Change: 🔺+61B(0.00%) Files: 122 total (0 added, 0 removed, 27 changed)
Show details for 100 more bundles (22 more not shown)
@mui/x-charts parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts-pro parsed: 0B(0.00%) gzip: 🔺+2B(0.00%) @mui/x-charts-pro/BarChartPro parsed: 0B(0.00%) gzip: 🔺+2B(0.00%) @mui/x-charts-pro/ChartContainerPro parsed: 0B(0.00%) gzip: 🔺+4B(+0.01%) @mui/x-charts-pro/ChartDataProviderPro parsed: 0B(0.00%) gzip: 🔺+3B(+0.01%) @mui/x-charts-pro/ChartsToolbarPro parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts-pro/ChartZoomSlider parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts-pro/FunnelChart parsed: 0B(0.00%) gzip: 🔺+1B(0.00%) @mui/x-charts-pro/Heatmap parsed: 0B(0.00%) gzip: 🔺+2B(0.00%) @mui/x-charts-pro/LineChartPro parsed: 0B(0.00%) gzip: 🔺+3B(0.00%) @mui/x-charts-pro/PieChartPro parsed: 0B(0.00%) gzip: 🔺+2B(0.00%) @mui/x-charts-pro/RadarChartPro parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts-pro/ScatterChartPro parsed: 0B(0.00%) gzip: 🔺+1B(0.00%) @mui/x-charts/BarChart parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartContainer parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartDataProvider parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsAxis parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsAxisHighlight parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsClipPath parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsGrid parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsLabel parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsLegend parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsLocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsOverlay parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsReferenceLine parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsSurface parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsText parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsTooltip parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsXAxis parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ChartsYAxis parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/Gauge parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/LineChart parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/PieChart parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/RadarChart parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/ScatterChart parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/SparkLineChart parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-charts/Toolbar parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-data-grid parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-data-grid-premium parsed: 0B(0.00%) gzip: 🔺+2B(0.00%) @mui/x-data-grid-premium/DataGridPremium parsed: 0B(0.00%) gzip: 🔺+2B(0.00%) @mui/x-data-grid-pro parsed: 0B(0.00%) gzip: 🔺+2B(0.00%) @mui/x-data-grid-pro/DataGridPro parsed: 0B(0.00%) gzip: 🔺+3B(0.00%) @mui/x-data-grid/DataGrid parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro parsed: 0B(0.00%) gzip: 🔺+4B(0.00%) @mui/x-date-pickers-pro/AdapterDateFns parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/AdapterDateFnsJalali parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/AdapterDayjs parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/AdapterLuxon parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/AdapterMoment parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/AdapterMomentHijri parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/AdapterMomentJalaali parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/DateRangeCalendar parsed: 0B(0.00%) gzip: 🔺+2B(+0.01%) @mui/x-date-pickers-pro/DateRangePicker parsed: 0B(0.00%) gzip: 🔺+4B(+0.01%) @mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/DateRangePickerDay2 parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/DateTimeRangePicker parsed: 0B(0.00%) gzip: 🔺+3B(0.00%) @mui/x-date-pickers-pro/DesktopDateRangePicker parsed: 0B(0.00%) gzip: 🔺+2B(0.00%) @mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B(0.00%) gzip: 🔺+3B(+0.01%) @mui/x-date-pickers-pro/DesktopTimeRangePicker parsed: 0B(0.00%) gzip: 🔺+2B(0.00%) @mui/x-date-pickers-pro/LocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/MobileDateRangePicker parsed: 0B(0.00%) gzip: 🔺+3B(+0.01%) @mui/x-date-pickers-pro/MobileDateTimeRangePicker parsed: 0B(0.00%) gzip: 🔺+3B(+0.01%) @mui/x-date-pickers-pro/MobileTimeRangePicker parsed: 0B(0.00%) gzip: 🔺+1B(0.00%) @mui/x-date-pickers-pro/MultiInputDateRangeField parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/MultiInputDateTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/MultiInputTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/PickersRangeCalendarHeader parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/SingleInputDateRangeField parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/SingleInputDateTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/SingleInputTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers-pro/StaticDateRangePicker parsed: 0B(0.00%) gzip: 🔺+2B(+0.01%) @mui/x-date-pickers-pro/TimeRangePicker parsed: 0B(0.00%) gzip: 🔺+1B(0.00%) @mui/x-date-pickers/AdapterDateFns parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/AdapterDateFnsBase parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/AdapterDateFnsJalali parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/AdapterDayjs parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/AdapterLuxon parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/AdapterMoment parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/AdapterMomentHijri parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/AdapterMomentJalaali parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/DateCalendar parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/DateField parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/DatePicker parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/DateTimeField parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/DateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/DayCalendarSkeleton parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/DesktopDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/DesktopDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/DesktopTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/DigitalClock parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/LocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/MobileDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/MobileDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/MobileTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/MonthCalendar parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/MultiSectionDigitalClock parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/PickerDay2 parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/PickersActionBar parsed: 0B(0.00%) gzip: 0B(0.00%) @mui/x-date-pickers/PickersCalendarHeader parsed: 0B(0.00%) gzip: 0B(0.00%)
Generated by :no_entry_sign: dangerJS against c47a51ecf196fba44b0c9a7ad0311ddf57c5e249
CodSpeed Performance Report
Merging #17447 will not alter performance
Comparing noraleonte:refine-charts-overview-page (c47a51e) with master (c4abca2)
Summary
✅ 9 untouched benchmarks
![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.
It feels a bit weird that we have these layout shifts as we define different charts. Can we make it so that there aren't any shifts?
https://github.com/user-attachments/assets/4ff800d5-5f18-4598-851a-35ace64c2072
This pull request has conflicts, please resolve those before we can evaluate the pull request.
@prakhargupta1 I did my best on wording for the different description, but I'm neither a salesman, or a native speaker, so feel free to improve or completely replace them
Color transition feels odd here:
https://github.com/user-attachments/assets/47ee6097-6cfa-400d-a713-b6793782e602
Same here, it might be easier to showcase the features if we don't change the colors at all (use gray scale) or simply use an "on brand" mutter palette (eg, light blue to blue)
https://github.com/user-attachments/assets/18980325-014b-4bbf-8e8a-c851fae3165c
Is there a way we can get rid of the scrollbar here?
We need a slightly larger Y axis in this example:
Or we can skip the unit in the axis as it's there in the tooltip.
We need a slightly larger Y axis in this example:
Or we can skip the unit in the axis as it's there in the tooltip.
Processor density is the chart title. The axis label should be just "transistors/mm2"
Some charts have a title, some other don't. Should we add titles to all of them? They feel more complete. That way we can also remove some axis titles.
Sorry, just noticed this, but shouldn't we align the left sections with the titles to the top?
I removed the code example since they bring less value than they create visual disturbance
@alexfauquette should we merge this? No idea why the perf decreased though 😆
@alexfauquette I pushed some small styling adjustments and leaving some more generic feedback here:
- Did we intentionally remove the effect that highlights and saturates the hovered section in this grid?
- I think all the labels in all the charts could be adjusted to a=have a
fontWeight: 400. They feel a bit too bolded right now - What do you think about displaying the individual chart demos in a layout like this:
It would give each chart more space and it's more flexible if we want to add more demos later. I woul even split some chart components and showcase them separately: i.e 1 demo for funnel chart, 1 for pyramid. Same for line and area charts Maybe making the scatter chart first in this demo (or selected by default) might look nice. It's a pretty impressive demo
- This is a nitpick, but we could try adjusting the colors used in this chart to match the pokemons
#7DAB53 , #FF8D16 , #4CB0EE - I am not 100% happy with this main chart but I also can't figure out what to improve. I might circle back to it in a follow-up 😓
Did we intentionally remove the effect that highlights and saturates the hovered section in this grid?
Yes, the main issue was the highlight demo that then get two hovers effect. A first one when entering the cell, and a second one when moving on items. Was not clear what is part of the library vs what is fancy UI
I think all the labels in all the charts could be adjusted to a=have a fontWeight: 400. They feel a bit too bolded right now
Ok, I will fix that :)
What do you think about displaying the individual chart demos in a layout like this:
I'm more inclined of having a selected number of feature that are visible out of the box. For en exhaustive showcase of the available charts, e will create a dedicated page like this one https://echarts.apache.org/examples/en/index.html#chart-type-line
The issue with the other display is you need to click on small buttons to see the demo. I want us to identify the most important feature and show them.
For example, a company was concerned we do not support mixing libe, bars, and others. Now it should be obvious thanks to the "Advanced Features: Multi axes and series" demo. And new commer just need to scroll to see it.
Maybe making the scatter chart first in this demo (or selected by default) might look nice. It's a pretty impressive demo
Good point. I will do it
This is a nitpick, but we could try adjusting the colors used in this chart to match the pokemons
I thought one day I will find something more interesting to display 🙃 But yeah lets go full on pockemon starter pack :rocket:
I am not 100% happy with this main chart but I also can't figure out what to improve. I might circle back to it in a follow-up 😓
I could subsample the data points to avoid those massive pick which correspond to monthly download (probably dependabot)
For some devices (Surface Pro 7) the pie and radar charts look off. While these devices are rare, should we still fix it?
The heatmap hover seems a bit weird because it's losing the border radius. Should we keep it when hovering?
https://github.com/user-attachments/assets/ddad9646-3a5b-40a7-b915-eb7e243f3f72
I didn't realize these were clickable. Should we make it clearer? E.g., color change on hover, and maybe show the active state with a different color?
https://github.com/user-attachments/assets/cc21e025-fc92-4a61-b6b4-5b1ea3774de4
The space between the zoom buttons and the export button seems too big. We used to have a divider, but if we don't want it should we apply display: none to it so that the spacing is uniformo?
This section seems a bit weird to me:
The stacking section already has highlighting. Also, the toggle group makes me feel like highlighting is the opposite of stacking, which it isn't. Should we remove the toggle group altogether since the stacking section already has highlighting?
The border radius of the button should be 4px smaller than the toggle group because the padding is 4px.
Currently:
Button with 8px border-radius:
The scatter chart example (and the others in this section) are missing the translucent tooltip of the other examples:
The pie chart example is actually a donut chart. While it's clear to us that a donut chart is a specific case of the more general pie chart, I'm not sure if it's so clear to other people. Not a big deal, just wanted to make sure we're aware that it might be confusing.