[charts] Use real world data for PieChart examples

[JCQuintas]

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 Platforms and Operating Systems (by platform) which provided a nice mix of very simple to slightly more complex data.

• Using data from https://gs.statcounter.com
• From December 2023
• Data was manipulated in regards to condensing values that were too small into Other and removing Tablet from platforms

Data points

• platforms: 2 data points
• desktopOS: 5
• mobileOS: 3 (only used in mobileAndDesktopOS)
• mobileAndDesktopOS: 8

Preview

https://deploy-preview-14297--material-ui-x.netlify.app/x/react-charts/pie/

Side by Side comparison

Old	New

[mui-bot]

Deploy preview: https://deploy-preview-14297--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 20486ad

[codspeed-hq]

CodSpeed Performance Report

Merging #14297 will not alter performance

_{Comparing JCQuintas:use-real-world-pie-data (20486ad) with master (0c30a6f)}

Summary

✅ 3 untouched benchmarks

[alexfauquette]

I like the OS dataset. That's for sure something user will understand :)

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[alexfauquette]

Looks super nice. I enjoyed reading back this docs page with the new demo 👍

[alexfauquette]

Recently found that formatting method which simplify the management of digits after comma

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#style

new Intl.NumberFormat('de-DE', { style: 'percent', maximumFractionDigits: 2  }).format(
    number,
  ),

[JCQuintas]

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

[alexfauquette]

What triggered me is the .toFixed(2) before parsing.

You have do

1. number computation (v * v2) / 100)
2. transformation to string .toFixed(2)
3. transformation to number Number.parseFloat()

Whereas you could

1. have the correct numbers by doing only the (v * v2) / 100) in the normalize
2. display value as expected with

const valueFormatter = new Intl.NumberFormat('de-DE', { style: 'percent', maximumFractionDigits: 2  }).format;

Intl.NumberFormat would 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, ...

[JCQuintas]

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. 😅