[charts] Use real world data for PieChart examples#14297
[charts] Use real world data for PieChart examples#14297JCQuintas merged 7 commits intomui:masterfrom
PieChart examples#14297Conversation
|
Deploy preview: https://deploy-preview-14297--material-ui-x.netlify.app/ |
CodSpeed Performance ReportMerging #14297 will not alter performanceComparing Summary
|
alexfauquette
left a comment
There was a problem hiding this comment.
I like the OS dataset. That's for sure something user will understand :)
Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
alexfauquette
left a comment
There was a problem hiding this comment.
Looks super nice. I enjoyed reading back this docs page with the new demo 👍
| }, | ||
| ]; | ||
|
|
||
| const normalize = (v: number, v2: number) => Number.parseFloat(((v * v2) / 100).toFixed(2)); |
There was a problem hiding this comment.
Recently found that formatting method which simplify the management of digits after comma
new Intl.NumberFormat('de-DE', { style: 'percent', maximumFractionDigits: 2 }).format(
number,
),
There was a problem hiding this comment.
I don't think using the number format would be better in this case, we are clipping the number number so they are easier to read, yes, but they also need to be a numeric value, while Intl.NumberFormat would format it to a user to see, like adding . in the hundreds, eg: 1000 -> 1.000
There was a problem hiding this comment.
What triggered me is the .toFixed(2) before parsing.
You have do
- number computation
(v * v2) / 100) - transformation to string
.toFixed(2) - transformation to number
Number.parseFloat()
Whereas you could
- have the correct numbers by doing only the
(v * v2) / 100)in thenormalize - display value as expected with
const valueFormatter = new Intl.NumberFormat('de-DE', { style: 'percent', maximumFractionDigits: 2 }).format;
Intl.NumberFormatwould format it to a user to see, like adding . in the hundreds, eg: 1000 -> 1.000
Yes, and with style: 'percent' it will add the percentage sygn, plus some space according to the locale, an manage rounding the values to get the correct number of digits, ...
There was a problem hiding this comment.
Ah, that could be an options yes.
I don't think it matters much though, since we also have the data as 11.11 in the other dataset, this ensures all datasets have the same precision. 😅
Pie charts are quite simple charts that can't contain a lot of data, and our examples were geared towards that optimistic view.
Real world usage however, is more complicated.
I've tried using world population datasets (by continent and sub-regions, eg: Europe (continent), Balkans (sub-continent). But that created charts with too many small slices, due to what I guess is population concentration 🙃
My second try was internet browser usage, and landed on
PlatformsandOperating Systems (by platform)which provided a nice mix of very simple to slightly more complex data.December 2023Otherand removingTabletfromplatformsData points
platforms: 2 data pointsdesktopOS: 5mobileOS: 3 (only used inmobileAndDesktopOS)mobileAndDesktopOS: 8Preview
https://deploy-preview-14297--material-ui-x.netlify.app/x/react-charts/pie/
Side by Side comparison