[tools] Migrate from recharts to MUI X Charts (#147)

Author: oliviertassinari

tools-public/package.json

@@ -11,14 +11,15 @@
   "dependencies": {
     "@googleapis/sheets": "^4.0.2",
     "@mui/toolpad": "^0.1.40",
+    "@mui/x-charts": "^6.19.3",
+    "@mui/system": "^5.0.0",
     "@octokit/core": "^4.2.1",
     "axios": "^1.3.6",
     "dayjs": "^1.11.8",
     "google-auth-library": "^8.8.0",
     "graphql": "^16.6.0",
     "graphql-request": "^6.0.0",
     "mysql": "^2.18.1",
-    "recharts": "^2.8.0",
     "ssh2-promise": "^1.0.3"
   },
   "devDependencies": {

tools-public/pnpm-lock.yaml

@@ -1,3 +1,3 @@
 apiVersion: v1
 kind: application
-spec: {}
+spec: { authentication: {}, authorization: {} }

tools-public/toolpad/application.yml

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import Box from '@mui/system/Box';
+import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';
 import { createComponent } from '@mui/toolpad/browser';
-import { PieChart, Pie, Cell, Tooltip } from 'recharts';
 
 // Copied from https://wpdatatables.com/data-visualization-color-palette/
 const COLORS = [
@@ -16,29 +17,46 @@ const COLORS = [
 ];
 
 export interface PieChartProps {
-  data: object[];
+  data: any[];
+  loading: boolean;
 }
 
-function PieChartExport({ data }: PieChartProps) {
+const height = 300;
+const width = 300;
+
+function PieChartExport({ data, loading }: PieChartProps) {
+  if (loading) {
+    return <Box sx={{ width, height, display: 'flex', alignItems: 'center', px: 2 }}>Loading…</Box>;
+  }
+
   return (
-    <PieChart width={300} height={300}>
-      <Pie
-        data={data}
-        cx={150}
-        cy={150}
-        innerRadius={0}
-        outerRadius={80}
-        fill="#8884d8"
-        dataKey="value"
-      >
-        {data.map((entry, index) => (
-          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-        ))}
-      </Pie>
-      <Tooltip
-        formatter={(value) => Intl.NumberFormat('en', { notation: 'compact' }).format(value)}
+    <div>
+      <PieChart
+        series={[
+          {
+            data: data.map((entry, index) => ({
+              id: index,
+              label: entry.name,
+              color: COLORS[index % COLORS.length],
+              value: entry.value,
+            })),
+            arcLabel: (item) => item.label!,
+            arcLabelMinAngle: 30,
+            valueFormatter: ({ value }) =>
+              Intl.NumberFormat('en', { notation: 'compact' }).format(value),
+          },
+        ]}
+        sx={{
+          [`& .${pieArcLabelClasses.root}`]: {
+            fill: 'white',
+            fontWeight: 'bold',
+          },
+        }}
+        width={width}
+        height={height}
+        slotProps={{ legend: { hidden: true } }}
       />
-    </PieChart>
+    </div>
   );
 }
 
@@ -54,4 +72,6 @@ export default createComponent(PieChartExport, {
       ],
     },
   },
+  loadingPropSource: ['data'],
+  loadingProp: 'loading',
 });

tools-public/toolpad/components/PieChart.tsx

@@ -30,8 +30,6 @@ spec:
             page.parameters.package
     - component: codeComponent.PieChart
       name: codeComponent_PieChart
-      layout:
-        columnSize: 1
       props:
         data:
           $$jsExpression: |
@@ -58,6 +56,8 @@ spec:
                   return acc
                 }, {})
             ).map((group) => ({ name: group[0], value: group[1] }))
+      layout:
+        columnSize: 1
   queries:
     - name: downloadsVersions
       query: