From f65d9c633fd7ec745c5a0d089b01655667db3e44 Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Mon, 2 Sep 2024 15:46:06 +0200 Subject: [PATCH] [charts] Use real world data for `PieChart` examples (#14297) Signed-off-by: Jose C Quintas Jr Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- docs/data/charts/pie/PieActiveArc.js | 10 +-- docs/data/charts/pie/PieActiveArc.tsx | 10 +-- docs/data/charts/pie/PieActiveArc.tsx.preview | 3 +- docs/data/charts/pie/PieAnimation.js | 29 ++------ docs/data/charts/pie/PieAnimation.tsx | 28 ++------ docs/data/charts/pie/PieArcLabel.js | 31 ++++---- docs/data/charts/pie/PieArcLabel.tsx | 31 ++++---- docs/data/charts/pie/PieArcLabel.tsx.preview | 8 +-- docs/data/charts/pie/PieClickNoSnap.js | 55 +++++---------- docs/data/charts/pie/PieColor.js | 31 ++++++-- docs/data/charts/pie/PieColor.tsx | 31 ++++++-- docs/data/charts/pie/PieShapeNoSnap.js | 15 ++-- docs/data/charts/pie/webUsageStats.ts | 70 +++++++++++++++++++ 13 files changed, 198 insertions(+), 154 deletions(-) create mode 100644 docs/data/charts/pie/webUsageStats.ts diff --git a/docs/data/charts/pie/PieActiveArc.js b/docs/data/charts/pie/PieActiveArc.js index df49ae3bd67f..4e151e983c04 100644 --- a/docs/data/charts/pie/PieActiveArc.js +++ b/docs/data/charts/pie/PieActiveArc.js @@ -1,20 +1,16 @@ import * as React from 'react'; import { PieChart } from '@mui/x-charts/PieChart'; - -const data = [ - { id: 0, value: 10, label: 'series A' }, - { id: 1, value: 15, label: 'series B' }, - { id: 2, value: 20, label: 'series C' }, -]; +import { desktopOS, valueFormatter } from './webUsageStats'; export default function PieActiveArc() { return ( params.label ?? '', + arcLabelMinAngle: 20, + valueFormatter, }, ]} skipAnimation={skipAnimation} @@ -75,7 +56,7 @@ export default function PieAnimation() { onChange={handleItemNbChange} valueLabelDisplay="auto" min={1} - max={10} + max={8} aria-labelledby="input-item-number" /> diff --git a/docs/data/charts/pie/PieAnimation.tsx b/docs/data/charts/pie/PieAnimation.tsx index f25df849a2ad..15da4f8a4708 100644 --- a/docs/data/charts/pie/PieAnimation.tsx +++ b/docs/data/charts/pie/PieAnimation.tsx @@ -5,26 +5,7 @@ import Slider from '@mui/material/Slider'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; import { PieChart } from '@mui/x-charts/PieChart'; - -const data1 = [ - { label: 'Group A', value: 400 }, - { label: 'Group B', value: 300 }, - { label: 'Group C', value: 300 }, - { label: 'Group D', value: 200 }, -]; -const data2 = [ - { label: '1', value: 100 }, - { label: '2', value: 300 }, - { label: '3', value: 100 }, - { label: '4', value: 80 }, - { label: '5', value: 40 }, - { label: '6', value: 30 }, - { label: '7', value: 50 }, - { label: '8', value: 100 }, - { label: '9', value: 200 }, - { label: '10', value: 150 }, - { label: '11', value: 50 }, -]; +import { mobileAndDesktopOS, valueFormatter } from './webUsageStats'; export default function PieAnimation() { const [radius, setRadius] = React.useState(50); @@ -49,11 +30,12 @@ export default function PieAnimation() { params.label ?? '', + arcLabelMinAngle: 20, + valueFormatter, }, ]} skipAnimation={skipAnimation} @@ -74,7 +56,7 @@ export default function PieAnimation() { onChange={handleItemNbChange} valueLabelDisplay="auto" min={1} - max={10} + max={8} aria-labelledby="input-item-number" /> diff --git a/docs/data/charts/pie/PieArcLabel.js b/docs/data/charts/pie/PieArcLabel.js index b61a7e91d014..0555cc2d964e 100644 --- a/docs/data/charts/pie/PieArcLabel.js +++ b/docs/data/charts/pie/PieArcLabel.js @@ -1,31 +1,20 @@ import * as React from 'react'; import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart'; - -const data = [ - { value: 5, label: 'A' }, - { value: 10, label: 'B' }, - { value: 15, label: 'C' }, - { value: 20, label: 'D' }, -]; - -const size = { - width: 400, - height: 200, -}; +import { desktopOS, valueFormatter } from './webUsageStats'; export default function PieArcLabel() { return ( `${item.label} (${item.value})`, - arcLabelMinAngle: 45, - data, + arcLabel: (item) => `${item.value}%`, + arcLabelMinAngle: 35, + arcLabelRadius: '60%', + ...data, }, ]} sx={{ [`& .${pieArcLabelClasses.root}`]: { - fill: 'white', fontWeight: 'bold', }, }} @@ -33,3 +22,13 @@ export default function PieArcLabel() { /> ); } + +const size = { + width: 400, + height: 200, +}; + +const data = { + data: desktopOS, + valueFormatter, +}; diff --git a/docs/data/charts/pie/PieArcLabel.tsx b/docs/data/charts/pie/PieArcLabel.tsx index b61a7e91d014..0555cc2d964e 100644 --- a/docs/data/charts/pie/PieArcLabel.tsx +++ b/docs/data/charts/pie/PieArcLabel.tsx @@ -1,31 +1,20 @@ import * as React from 'react'; import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart'; - -const data = [ - { value: 5, label: 'A' }, - { value: 10, label: 'B' }, - { value: 15, label: 'C' }, - { value: 20, label: 'D' }, -]; - -const size = { - width: 400, - height: 200, -}; +import { desktopOS, valueFormatter } from './webUsageStats'; export default function PieArcLabel() { return ( `${item.label} (${item.value})`, - arcLabelMinAngle: 45, - data, + arcLabel: (item) => `${item.value}%`, + arcLabelMinAngle: 35, + arcLabelRadius: '60%', + ...data, }, ]} sx={{ [`& .${pieArcLabelClasses.root}`]: { - fill: 'white', fontWeight: 'bold', }, }} @@ -33,3 +22,13 @@ export default function PieArcLabel() { /> ); } + +const size = { + width: 400, + height: 200, +}; + +const data = { + data: desktopOS, + valueFormatter, +}; diff --git a/docs/data/charts/pie/PieArcLabel.tsx.preview b/docs/data/charts/pie/PieArcLabel.tsx.preview index dac686d77a44..0f617bfbd6f2 100644 --- a/docs/data/charts/pie/PieArcLabel.tsx.preview +++ b/docs/data/charts/pie/PieArcLabel.tsx.preview @@ -1,14 +1,14 @@ `${item.label} (${item.value})`, - arcLabelMinAngle: 45, - data, + arcLabel: (item) => `${item.value}%`, + arcLabelMinAngle: 35, + arcLabelRadius: '60%', + ...data, }, ]} sx={{ [`& .${pieArcLabelClasses.root}`]: { - fill: 'white', fontWeight: 'bold', }, }} diff --git a/docs/data/charts/pie/PieClickNoSnap.js b/docs/data/charts/pie/PieClickNoSnap.js index de00ca705a95..8b13dfb3d48b 100644 --- a/docs/data/charts/pie/PieClickNoSnap.js +++ b/docs/data/charts/pie/PieClickNoSnap.js @@ -4,45 +4,9 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import IconButton from '@mui/material/IconButton'; import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; - import { PieChart } from '@mui/x-charts/PieChart'; - import { HighlightedCode } from '@mui/docs/HighlightedCode'; - -const data1 = [ - { label: 'Group A', value: 400 }, - { label: 'Group B', value: 300 }, - { label: 'Group C', value: 300 }, - { label: 'Group D', value: 200 }, -]; - -const data2 = [ - { label: 'A1', value: 100 }, - { label: 'A2', value: 300 }, - { label: 'B1', value: 100 }, - { label: 'B2', value: 80 }, - { label: 'B3', value: 40 }, - { label: 'B4', value: 30 }, - { label: 'B5', value: 50 }, - { label: 'C1', value: 100 }, - { label: 'C2', value: 200 }, - { label: 'D1', value: 150 }, - { label: 'D2', value: 50 }, -]; -const series = [ - { - innerRadius: 0, - outerRadius: 80, - id: 'series-1', - data: data1, - }, - { - innerRadius: 100, - outerRadius: 120, - id: 'series-2', - data: data2, - }, -]; +import { mobileAndDesktopOS, platforms, valueFormatter } from './webUsageStats'; export default function PieClickNoSnap() { const [itemData, setItemData] = React.useState(); @@ -95,3 +59,20 @@ ${itemData ? JSON.stringify(itemData, null, 2) : '// The data will appear here'} ); } + +const series = [ + { + innerRadius: 0, + outerRadius: 80, + id: 'platform-series', + data: platforms, + valueFormatter, + }, + { + innerRadius: 100, + outerRadius: 120, + id: 'OS-series', + data: mobileAndDesktopOS, + valueFormatter, + }, +]; diff --git a/docs/data/charts/pie/PieColor.js b/docs/data/charts/pie/PieColor.js index d12e6dfab6d7..447224cbb194 100644 --- a/docs/data/charts/pie/PieColor.js +++ b/docs/data/charts/pie/PieColor.js @@ -3,9 +3,14 @@ import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import { PieChart } from '@mui/x-charts/PieChart'; +import { platforms } from './webUsageStats'; -const pieParams = { height: 200, margin: { right: 5 } }; -const palette = ['red', 'blue', 'green']; +const palette = ['lightcoral', 'slateblue']; + +const colorPerItem = [ + { ...platforms[0], color: 'orange' }, + { ...platforms[1], color: 'gray' }, +]; export default function PieColor() { return ( @@ -13,7 +18,11 @@ export default function PieColor() { Default @@ -21,7 +30,11 @@ export default function PieColor() { Palette @@ -29,7 +42,9 @@ export default function PieColor() { Item @@ -37,3 +52,9 @@ export default function PieColor() { ); } + +const pieParams = { + height: 200, + margin: { right: 5 }, + slotProps: { legend: { hidden: true } }, +}; diff --git a/docs/data/charts/pie/PieColor.tsx b/docs/data/charts/pie/PieColor.tsx index d12e6dfab6d7..447224cbb194 100644 --- a/docs/data/charts/pie/PieColor.tsx +++ b/docs/data/charts/pie/PieColor.tsx @@ -3,9 +3,14 @@ import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import { PieChart } from '@mui/x-charts/PieChart'; +import { platforms } from './webUsageStats'; -const pieParams = { height: 200, margin: { right: 5 } }; -const palette = ['red', 'blue', 'green']; +const palette = ['lightcoral', 'slateblue']; + +const colorPerItem = [ + { ...platforms[0], color: 'orange' }, + { ...platforms[1], color: 'gray' }, +]; export default function PieColor() { return ( @@ -13,7 +18,11 @@ export default function PieColor() { Default @@ -21,7 +30,11 @@ export default function PieColor() { Palette @@ -29,7 +42,9 @@ export default function PieColor() { Item @@ -37,3 +52,9 @@ export default function PieColor() { ); } + +const pieParams = { + height: 200, + margin: { right: 5 }, + slotProps: { legend: { hidden: true } }, +}; diff --git a/docs/data/charts/pie/PieShapeNoSnap.js b/docs/data/charts/pie/PieShapeNoSnap.js index 9952d0c2a3fe..b36ace970cfb 100644 --- a/docs/data/charts/pie/PieShapeNoSnap.js +++ b/docs/data/charts/pie/PieShapeNoSnap.js @@ -1,6 +1,7 @@ import * as React from 'react'; import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; import { PieChart } from '@mui/x-charts/PieChart'; +import { desktopOS, valueFormatter } from './webUsageStats'; export default function PieShapeNoSnap() { return ( @@ -11,8 +12,8 @@ export default function PieShapeNoSnap() { { propName: `outerRadius`, knob: 'number', defaultValue: 100 }, { propName: `paddingAngle`, knob: 'number', defaultValue: 5 }, { propName: `cornerRadius`, knob: 'number', defaultValue: 5 }, - { propName: `startAngle`, knob: 'number', defaultValue: -90 }, - { propName: `endAngle`, knob: 'number', defaultValue: 180 }, + { propName: `startAngle`, knob: 'number', defaultValue: -45 }, + { propName: `endAngle`, knob: 'number', defaultValue: 225 }, { propName: `cx`, knob: 'number', defaultValue: 150 }, { propName: `cy`, knob: 'number', defaultValue: 150 }, ]} @@ -21,18 +22,14 @@ export default function PieShapeNoSnap() { series={[ { ...props, - data: [ - { value: 5 }, - { value: 5 }, - { value: 10 }, - { value: 15 }, - { value: 30 }, - ], + data: desktopOS, + valueFormatter, }, ]} width={300} height={300} margin={{ right: 5 }} + slotProps={{ legend: { hidden: true } }} /> )} getCode={({ props }) => { diff --git a/docs/data/charts/pie/webUsageStats.ts b/docs/data/charts/pie/webUsageStats.ts new file mode 100644 index 000000000000..98d3642865cf --- /dev/null +++ b/docs/data/charts/pie/webUsageStats.ts @@ -0,0 +1,70 @@ +// Data derived from https://gs.statcounter.com/os-market-share/desktop/worldwide/2023 +// And https://gs.statcounter.com/os-market-share/mobile/worldwide/2023 +// And https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/2023 +// For the month of December 2023 + +export const desktopOS = [ + { + label: 'Windows', + value: 72.72, + }, + { + label: 'OS X', + value: 16.38, + }, + { + label: 'Linux', + value: 3.83, + }, + { + label: 'Chrome OS', + value: 2.42, + }, + { + label: 'Other', + value: 4.65, + }, +]; + +export const mobileOS = [ + { + label: 'Android', + value: 70.48, + }, + { + label: 'iOS', + value: 28.8, + }, + { + label: 'Other', + value: 0.71, + }, +]; + +export const platforms = [ + { + label: 'Mobile', + value: 59.12, + }, + { + label: 'Desktop', + value: 40.88, + }, +]; + +const normalize = (v: number, v2: number) => Number.parseFloat(((v * v2) / 100).toFixed(2)); + +export const mobileAndDesktopOS = [ + ...mobileOS.map((v) => ({ + ...v, + label: v.label === 'Other' ? 'Other (Mobile)' : v.label, + value: normalize(v.value, platforms[0].value), + })), + ...desktopOS.map((v) => ({ + ...v, + label: v.label === 'Other' ? 'Other (Desktop)' : v.label, + value: normalize(v.value, platforms[1].value), + })), +]; + +export const valueFormatter = (item: { value: number }) => `${item.value}%`;