[charts] Use real world data for PieChart examples

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 (
     <PieChart
       series={[
         {
-          data,
+          data: desktopOS,
           highlightScope: { faded: 'global', highlighted: 'item' },
           faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
+          valueFormatter,
         },
       ]}
       height={200}

docs/data/charts/pie/PieActiveArc.tsx

@@ -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 (
     <PieChart
       series={[
         {
-          data,
+          data: desktopOS,
           highlightScope: { faded: 'global', highlighted: 'item' },
           faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
+          valueFormatter,
         },
       ]}
       height={200}

docs/data/charts/pie/PieActiveArc.tsx.preview

@@ -1,9 +1,10 @@
 <PieChart
   series={[
     {
-      data,
+      data: desktopOS,
       highlightScope: { faded: 'global', highlighted: 'item' },
       faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
+      valueFormatter,
     },
   ]}
   height={200}

docs/data/charts/pie/PieAnimation.js

@@ -5,27 +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);
@@ -50,11 +30,12 @@ export default function PieAnimation() {
       <PieChart
         height={300}
         series={[
-          { data: data1, outerRadius: radius },
           {
-            data: data2.slice(0, itemNb),
+            data: mobileAndDesktopOS.slice(0, itemNb),
             innerRadius: radius,
             arcLabel: (params) => 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"
       />
       <Typography id="input-radius" gutterBottom>

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() {
       <PieChart
         height={300}
         series={[
-          { data: data1, outerRadius: radius },
           {
-            data: data2.slice(0, itemNb),
+            data: mobileAndDesktopOS.slice(0, itemNb),
             innerRadius: radius,
             arcLabel: (params) => 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"
       />
       <Typography id="input-radius" gutterBottom>

docs/data/charts/pie/PieArcLabel.js

@@ -1,35 +1,34 @@
 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 (
     <PieChart
       series={[
         {
-          arcLabel: (item) => `${item.label} (${item.value})`,
-          arcLabelMinAngle: 45,
-          data,
+          arcLabel: (item) => `${item.value}%`,
+          arcLabelMinAngle: 35,
+          arcLabelRadius: '60%',
+          ...data,
         },
       ]}
       sx={{
         [`& .${pieArcLabelClasses.root}`]: {
-          fill: 'white',
           fontWeight: 'bold',
         },
       }}
       {...size}
     />
   );
 }
+
+const size = {
+  width: 400,
+  height: 200,
+};
+
+const data = {
+  data: desktopOS,
+  valueFormatter,
+};

docs/data/charts/pie/PieArcLabel.tsx

@@ -1,35 +1,34 @@
 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 (
     <PieChart
       series={[
         {
-          arcLabel: (item) => `${item.label} (${item.value})`,
-          arcLabelMinAngle: 45,
-          data,
+          arcLabel: (item) => `${item.value}%`,
+          arcLabelMinAngle: 35,
+          arcLabelRadius: '60%',
+          ...data,
         },
       ]}
       sx={{
         [`& .${pieArcLabelClasses.root}`]: {
-          fill: 'white',
           fontWeight: 'bold',
         },
       }}
       {...size}
     />
   );
 }
+
+const size = {
+  width: 400,
+  height: 200,
+};
+
+const data = {
+  data: desktopOS,
+  valueFormatter,
+};

docs/data/charts/pie/PieArcLabel.tsx.preview

@@ -1,14 +1,14 @@
 <PieChart
   series={[
     {
-      arcLabel: (item) => `${item.label} (${item.value})`,
-      arcLabelMinAngle: 45,
-      data,
+      arcLabel: (item) => `${item.value}%`,
+      arcLabelMinAngle: 35,
+      arcLabelRadius: '60%',
+      ...data,
     },
   ]}
   sx={{
     [`& .${pieArcLabelClasses.root}`]: {
-      fill: 'white',
       fontWeight: 'bold',
     },
   }}

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'}
     </Stack>
   );
 }
+
+const series = [
+  {
+    innerRadius: 0,
+    outerRadius: 80,
+    id: 'series-1',
+    data: platforms,
+    valueFormatter,
+  },
+  {
+    innerRadius: 100,
+    outerRadius: 120,
+    id: 'series-2',
+    data: mobileAndDesktopOS,
+    valueFormatter,
+  },
+];