Migrate Chart component to X charts library

examples/npm-stats/package.json

@@ -8,7 +8,6 @@
     "start": "NODE_OPTIONS='--max-old-space-size=396' toolpad start"
   },
   "dependencies": {
-    "@mui/toolpad": "0.1.28",
-    "recharts": "2.8.0"
+    "@mui/toolpad": "0.1.28"
   }
 }

package.json

@@ -44,6 +44,7 @@
     "@argos-ci/core": "0.11.1",
     "@jest/globals": "29.7.0",
     "@mui/monorepo": "https://github.com/mui/material-ui.git",
+    "@mui/x-charts": "6.0.0-alpha.11",
     "@next/eslint-plugin-next": "13.4.19",
     "@playwright/test": "1.38.0",
     "@testing-library/jest-dom": "6.1.3",

packages/toolpad-app/jest.config.js

@@ -7,6 +7,18 @@ const transpiledModules = [
   'data-uri-to-buffer',
   'fetch-blob',
   'formdata-polyfill',
+  'd3-scale',
+  'd3-array',
+  'internmap',
+  'd3-interpolate',
+  'd3-color',
+  'd3-format',
+  'd3-time',
+  'd3-time-format',
+  'd3-shape',
+  'd3-path',
+  '@mui/x-charts/esm',
+  '@babel/runtime/helpers/esm',
 ];
 
 module.exports = /** @type {import('jest').Config} */ ({

packages/toolpad-app/package.json

@@ -56,6 +56,7 @@
     "@mui/toolpad-utils": "0.1.28",
     "@mui/types": "7.2.4",
     "@mui/utils": "5.14.10",
+    "@mui/x-charts": "6.0.0-alpha.11",
     "@mui/x-data-grid": "6.14.0",
     "@mui/x-data-grid-pro": "6.14.0",
     "@mui/x-date-pickers": "6.14.0",

packages/toolpad-app/src/server/toolpadAppBuilder.ts

@@ -233,6 +233,14 @@ export function createViteConfig({
           '@mui/material/useMediaQuery',
           '@mui/utils',
           '@mui/utils/useEventCallback',
+          '@mui/x-charts',
+          '@mui/x-charts/ResponsiveChartContainer',
+          '@mui/x-charts/ChartsXAxis',
+          '@mui/x-charts/ChartsYAxis',
+          '@mui/x-charts/ChartsLegend',
+          '@mui/x-charts/ChartsTooltip',
+          '@mui/x-charts/ChartsAxisHighlight',
+          '@mui/x-charts/colorPalettes',
           '@mui/x-data-grid-pro',
           '@mui/x-date-pickers/AdapterDayjs',
           '@mui/x-date-pickers/DesktopDatePicker',

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx

@@ -19,7 +19,6 @@ interface FutureComponentSpec {
 }
 
 const FUTURE_COMPONENTS = new Map<string, FutureComponentSpec>([
-  ['Chart', { url: 'https://github.com/mui/mui-toolpad/issues/789', displayName: 'Chart' }],
   ['Map', { url: 'https://github.com/mui/mui-toolpad/issues/864', displayName: 'Map' }],
   ['Drawer', { url: 'https://github.com/mui/mui-toolpad/issues/1540', displayName: 'Drawer' }],
   ['Html', { url: 'https://github.com/mui/mui-toolpad/issues/1311', displayName: 'Html' }],

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx

@@ -86,7 +86,7 @@ export default function NodeAttributeEditor<P extends object>({
       propType={argType}
       jsRuntime={jsBrowserRuntime}
       renderControl={(params) => (
-        <Box sx={{ flex: 1 }}>
+        <Box sx={{ flex: 1, maxWidth: '100%' }}>
           <Control nodeId={node.id} {...params} propType={argType} />
         </Box>
       )}

packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx

@@ -25,6 +25,7 @@ import BarChartIcon from '@mui/icons-material/BarChart';
 import ShowChartIcon from '@mui/icons-material/ShowChart';
 import LegendToggleIcon from '@mui/icons-material/LegendToggle';
 import { evaluateBindable } from '@mui/toolpad-core/jsRuntime';
+import { blueberryTwilightPalette } from '@mui/x-charts/colorPalettes';
 import * as appDom from '../../appDom';
 import type { EditorProps } from '../../types';
 import PropertyControl from '../../components/PropertyControl';
@@ -58,6 +59,8 @@ function ChartDataPropEditor({
 
   const appTheme = React.useMemo(() => createToolpadAppTheme(dom), [dom]);
 
+  const defaultPalette = blueberryTwilightPalette(appTheme.palette.mode);
+
   const [dataSeriesEditIndex, setDataSeriesEditIndex] = React.useState<number | null>(null);
   const [popoverAnchorElement, setPopoverAnchorElement] = React.useState<HTMLElement | null>(null);
 
@@ -72,13 +75,20 @@ function ChartDataPropEditor({
         label: newDataSeriesLabel,
         kind: 'line',
         data: [],
-        color:
-          newDataSeriesCount % 2 === 0
-            ? appTheme.palette.secondary.main
-            : appTheme.palette.primary.main,
+        color: defaultPalette[(newDataSeriesCount - 1) % defaultPalette.length],
       },
     ]);
-  }, [appTheme, onChange, value]);
+  }, [defaultPalette, onChange, value]);
+
+  const previousDataSeriesCountRef = React.useRef(value.length);
+  React.useEffect(() => {
+    if (previousDataSeriesCountRef.current === 0 && value.length === 1) {
+      setDataSeriesEditIndex(0);
+      setPopoverAnchorElement(document.getElementById('data-series-button-1'));
+    }
+
+    previousDataSeriesCountRef.current = value.length;
+  }, [value.length]);
 
   const handleDataSeriesClick = React.useCallback(
     (index: number) => (event: React.MouseEvent<HTMLElement>) => {
@@ -90,9 +100,13 @@ function ChartDataPropEditor({
 
   const handleDuplicateDataSeries = React.useCallback(
     (index: number) => () => {
-      onChange([...value.slice(0, index + 1), value[index], ...value.slice(index + 1)]);
+      onChange([
+        ...value.slice(0, index + 1),
+        { ...value[index], color: defaultPalette[(index + 1) % defaultPalette.length] },
+        ...value.slice(index + 1),
+      ]);
     },
-    [onChange, value],
+    [defaultPalette, onChange, value],
   );
 
   const handleRemoveDataSeries = React.useCallback(
@@ -213,9 +227,11 @@ function ChartDataPropEditor({
         const dataResult = (evaluateBindable(jsBrowserRuntime, dataSeries.data, pageState).value ||
           []) as NonNullable<ChartDataSeries['data']>;
 
-        return dataResult
-          .flatMap((dataSeriesPoint) => Object.keys(dataSeriesPoint))
-          .filter((key, index, array) => array.indexOf(key) === index);
+        return Array.isArray(dataResult)
+          ? dataResult
+              .flatMap((dataSeriesPoint) => Object.keys(dataSeriesPoint))
+              .filter((key, index, array) => array.indexOf(key) === index)
+          : [];
       }),
     [jsBrowserRuntime, pageState, value],
   );
@@ -233,10 +249,16 @@ function ChartDataPropEditor({
               return (
                 <ListItem key={index} disableGutters>
                   <ListItemButton
+                    id={`data-series-button-${index + 1}`}
                     onClick={handleDataSeriesClick(index)}
                     aria-describedby={popoverId}
                   >
-                    <ListItemText primary={label} />
+                    <ListItemText
+                      primary={label}
+                      primaryTypographyProps={{
+                        style: { overflow: 'hidden', textOverflow: 'ellipsis' },
+                      }}
+                    />
                   </ListItemButton>
                   <IconButton
                     aria-label="Duplicate data series"

packages/toolpad-components/package.json

@@ -43,14 +43,14 @@
     "@mui/material": "5.14.10",
     "@mui/toolpad-core": "0.1.28",
     "@mui/toolpad-utils": "0.1.28",
+    "@mui/x-charts": "6.0.0-alpha.11",
     "@mui/x-data-grid-pro": "6.14.0",
     "@mui/x-date-pickers": "6.14.0",
     "@mui/x-license-pro": "6.10.2",
     "dayjs": "1.11.9",
     "markdown-to-jsx": "7.3.2",
     "react-error-boundary": "4.0.11",
-    "react-hook-form": "7.46.1",
-    "recharts": "2.8.0"
+    "react-hook-form": "7.46.1"
   },
   "devDependencies": {
     "@types/react": "18.2.21",