From a8938dc52bab68611d9708c3613f47bb6f75b1ef Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 16 Aug 2023 18:18:50 +0100 Subject: [PATCH 01/41] Initial setup --- examples/npm-stats/package.json | 3 +-- package.json | 1 + packages/toolpad-app/package.json | 1 + .../toolpad-app/src/server/toolpadAppBuilder.ts | 1 + packages/toolpad-components/package.json | 1 + packages/toolpad-components/src/Chart.tsx | 2 ++ yarn.lock | 16 ++++++++++++++-- 7 files changed, 21 insertions(+), 4 deletions(-) diff --git a/examples/npm-stats/package.json b/examples/npm-stats/package.json index 590811edf9a..5aca70e97e4 100644 --- a/examples/npm-stats/package.json +++ b/examples/npm-stats/package.json @@ -8,7 +8,6 @@ "start": "NODE_OPTIONS='--max-old-space-size=396' toolpad start" }, "dependencies": { - "@mui/toolpad": "0.1.23", - "recharts": "2.7.3" + "@mui/toolpad": "0.1.23" } } diff --git a/package.json b/package.json index 6674b4d9493..161a925c2f6 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@argos-ci/core": "^0.9.0", "@jest/globals": "29.6.2", "@mui/monorepo": "https://github.com/mui/material-ui.git", + "@mui/x-charts": "6.0.0-alpha.7", "@next/eslint-plugin-next": "13.4.13", "@playwright/test": "1.37.0", "@testing-library/jest-dom": "5.17.0", diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index eea4e7ec42b..72142c3b6fe 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -53,6 +53,7 @@ "@mui/toolpad-utils": "0.1.23", "@mui/types": "7.2.4", "@mui/utils": "5.14.5", + "@mui/x-charts": "6.0.0-alpha.7", "@mui/x-data-grid": "6.11.1", "@mui/x-data-grid-pro": "6.11.1", "@mui/x-date-pickers": "6.11.1", diff --git a/packages/toolpad-app/src/server/toolpadAppBuilder.ts b/packages/toolpad-app/src/server/toolpadAppBuilder.ts index 8bd2f1ff58d..00aad8700c3 100644 --- a/packages/toolpad-app/src/server/toolpadAppBuilder.ts +++ b/packages/toolpad-app/src/server/toolpadAppBuilder.ts @@ -259,6 +259,7 @@ export function createViteConfig({ '@mui/material/styles', '@mui/material/useMediaQuery', '@mui/utils', + '@mui/x-charts/ChartContainer', '@mui/x-data-grid-pro', '@mui/x-date-pickers/AdapterDayjs', '@mui/x-date-pickers/DesktopDatePicker', diff --git a/packages/toolpad-components/package.json b/packages/toolpad-components/package.json index 7bd54103115..1d413d07981 100644 --- a/packages/toolpad-components/package.json +++ b/packages/toolpad-components/package.json @@ -44,6 +44,7 @@ "@mui/material": "5.14.5", "@mui/toolpad-core": "0.1.23", "@mui/toolpad-utils": "0.1.23", + "@mui/x-charts": "6.0.0-alpha.7", "@mui/x-data-grid-pro": "6.11.1", "@mui/x-date-pickers": "6.11.1", "@mui/x-license-pro": "6.10.2", diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 0f02f72cbdb..423150124fe 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -14,6 +14,7 @@ import { Area, Scatter, } from 'recharts'; +import { ChartContainer } from '@mui/x-charts/ChartContainer'; import { errorFrom } from '@mui/toolpad-utils/errors'; import ErrorOverlay from './components/ErrorOverlay'; import { SX_PROP_HELPER_TEXT } from './constants'; @@ -194,6 +195,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { height={height} /> ) : null} + ); } diff --git a/yarn.lock b/yarn.lock index 5be7292541b..9428c025adf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2261,6 +2261,18 @@ prop-types "^15.8.1" react-is "^18.2.0" +"@mui/x-charts@6.0.0-alpha.7": + version "6.0.0-alpha.7" + resolved "https://registry.yarnpkg.com/@mui/x-charts/-/x-charts-6.0.0-alpha.7.tgz#ddd9fdc3b8765703ce6599431b02aa44f39cc4af" + integrity sha512-duZkx4ug+yWzZN4lmY31TngUhoGt8nFoKl8hFMNzIFZCB+u6Z5bbsa0xW5TXL+xNihXhE5lPIJu9SeW1Uv2jqQ== + dependencies: + "@babel/runtime" "^7.22.6" + clsx "^2.0.0" + d3-color "^3.1.0" + d3-scale "^4.0.2" + d3-shape "^3.2.0" + prop-types "^15.8.1" + "@mui/x-data-grid-pro@6.11.1": version "6.11.1" resolved "https://registry.yarnpkg.com/@mui/x-data-grid-pro/-/x-data-grid-pro-6.11.1.tgz#21808197c58597847c02fdead01dbd177c84044b" @@ -5578,7 +5590,7 @@ csstype@3.1.2, csstype@^3.0.2, csstype@^3.1.2: dependencies: internmap "1 - 2" -"d3-color@1 - 3": +"d3-color@1 - 3", d3-color@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2" integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA== @@ -5616,7 +5628,7 @@ d3-scale@^4.0.2: d3-time "2.1.1 - 3" d3-time-format "2 - 4" -d3-shape@^3.1.0: +d3-shape@^3.1.0, d3-shape@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5" integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA== From e520b3403c02688d32153b482b7816941c10153d Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 22 Aug 2023 17:38:33 +0100 Subject: [PATCH 02/41] Migrate to X-charts --- packages/toolpad-components/src/Chart.tsx | 247 ++++++++++------------ 1 file changed, 115 insertions(+), 132 deletions(-) diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 423150124fe..2f08da48e25 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -2,27 +2,26 @@ import * as React from 'react'; import { createComponent } from '@mui/toolpad-core'; import { Container, ContainerProps, Skeleton } from '@mui/material'; import { - XAxis, - YAxis, - Tooltip, - Legend, - Line, - ResponsiveContainer, - CartesianGrid, - ComposedChart, - Bar, - Area, - Scatter, -} from 'recharts'; -import { ChartContainer } from '@mui/x-charts/ChartContainer'; + ChartContainer, + BarPlot, + LinePlot, + ScatterPlot, + ChartsXAxis, + ChartsYAxis, + BarSeriesType, + LineSeriesType, + ScatterSeriesType, +} from '@mui/x-charts'; import { errorFrom } from '@mui/toolpad-utils/errors'; import ErrorOverlay from './components/ErrorOverlay'; import { SX_PROP_HELPER_TEXT } from './constants'; -export const CHART_DATA_SERIES_KINDS = ['line', 'bar', 'area', 'scatter']; +type ChartDataSeriesKind = 'line' | 'bar' | 'area' | 'scatter'; + +export const CHART_DATA_SERIES_KINDS: ChartDataSeriesKind[] = ['line', 'bar', 'area', 'scatter']; export interface ChartDataSeries> { - kind: (typeof CHART_DATA_SERIES_KINDS)[number]; + kind: ChartDataSeriesKind; label: string; data?: D[]; xKey?: keyof D; @@ -32,15 +31,22 @@ export interface ChartDataSeries> { export type ChartData = ChartDataSeries[]; -function getBarChartDataSeriesNormalizedYKey(dataSeries: ChartDataSeries, index: number): string { - return `${dataSeries.label}-${dataSeries.yKey}-${index}`; +function getChartType(kind: ChartDataSeriesKind): 'line' | 'bar' | 'scatter' { + switch (kind) { + case 'bar': + return 'bar'; + case 'scatter': + return 'scatter'; + default: + return 'line'; + } } interface ChartProps extends ContainerProps { data?: ChartData; loading?: boolean; error?: Error | string; - height?: number; + height: number; } function Chart({ data = [], loading, error, height, sx }: ChartProps) { @@ -60,132 +66,64 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { [data], ); - const barChartData = React.useMemo(() => { - return xValues.map((xValue) => { - const yValues = data.reduce((acc, dataSeries, index) => { - if (dataSeries.kind !== 'bar' || !dataSeries.xKey || !dataSeries.yKey) { - return acc; + const chartSeries: (BarSeriesType | LineSeriesType | ScatterSeriesType)[] = React.useMemo( + () => + data.map((dataSeries) => { + let yValues: (number | string)[] = []; + if (dataSeries.data && dataSeries.xKey && dataSeries.yKey) { + yValues = xValues.map((xValue) => { + const point = (dataSeries.data || []).find( + (dataSeriesPoint) => dataSeriesPoint[dataSeries.xKey!] === xValue, + ); + + return point ? point[dataSeries.yKey!] : 0; + }); } - const point = (dataSeries.data || []).find( - (dataSeriesPoint) => dataSeriesPoint[dataSeries.xKey!] === xValue, - ); + const chartType = getChartType(dataSeries.kind); - return { - ...acc, - [getBarChartDataSeriesNormalizedYKey(dataSeries, index)]: point - ? point[dataSeries.yKey] - : 0, + const baseProps = { + type: chartType, + xAxisKey: dataSeries.xKey, + yAxisKey: dataSeries.yKey, + label: dataSeries.label, + color: dataSeries.color, }; - }, {}); - return { - x: xValue, - ...yValues, - }; - }); - }, [data, xValues]); + if (chartType === 'scatter') { + return { + ...baseProps, + data: yValues.map((y, index) => ({ + x: xValues[index], + y, + id: `${dataSeries.yKey}-${index}`, + })), + } as ScatterSeriesType; + } + if (chartType === 'line') { + return { + ...baseProps, + data: yValues, + area: dataSeries.kind === 'area', + } as LineSeriesType; + } + + return { + ...baseProps, + data: yValues, + } as BarSeriesType; + }), + [data, xValues], + ); const hasNonNumberXValues = xValues.some((xValue) => typeof xValue !== 'number'); const displayError = error ? errorFrom(error) : null; - const isDataVisible = !loading && !displayError; + const isDataVisible = !loading && !displayError && chartSeries.length > 0; return ( - - - {isDataVisible ? ( - - - - - - - {data.map((dataSeries, index) => { - if ( - !dataSeries.data || - dataSeries.data.length === 0 || - !dataSeries.xKey || - !dataSeries.yKey - ) { - return null; - } - - const key = `${dataSeries.label}-${index}`; - - const normalizedData = dataSeries.data - .map((dataSeriesPoint) => ({ - x: dataSeriesPoint[dataSeries.xKey!], - [dataSeries.yKey!]: dataSeriesPoint[dataSeries.yKey!], - })) - .sort((a, b) => - typeof a[dataSeries.xKey!] === 'number' && - typeof b[dataSeries.xKey!] === 'number' - ? (a[dataSeries.xKey!] as number) - (b[dataSeries.xKey!] as number) - : 0, - ); - - switch (dataSeries.kind) { - case 'bar': - return ( - - ); - case 'area': - return ( - - ); - case 'scatter': - return ( - - ); - default: - return ( - - ); - } - })} - - ) : null} - - {loading && !error ? ( ) : null} - + ({ + id: dataSeries.yAxisKey, + scaleType: 'linear', + }))} + > + {isDataVisible ? ( + + {chartSeries.some((dataSeries) => dataSeries.type === 'line') ? : null} + {chartSeries.some((dataSeries) => dataSeries.type === 'bar') ? : null} + {chartSeries.some((dataSeries) => dataSeries.type === 'scatter') ? ( + + ) : null} + + {chartSeries + // Filter by unique yAxisKey + .filter( + (dataSeries, index, array) => + dataSeries.yAxisKey && + array.findIndex( + (otherDataSeries) => otherDataSeries.yAxisKey === dataSeries.yAxisKey, + ) === index, + ) + .map(({ yAxisKey }) => ( + + ))} + + ) : null} + ); } From bafb0a3f4bd4b80d4357a1c316d46e07d181b9bc Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 22 Aug 2023 20:21:49 +0100 Subject: [PATCH 03/41] Fix empty chart, add legend and tooltip and some other improvements --- package.json | 2 +- packages/toolpad-app/package.json | 3 +- .../src/server/toolpadAppBuilder.ts | 1 - packages/toolpad-components/package.json | 5 +- packages/toolpad-components/src/Chart.tsx | 105 +++++++++++------- .../fixture/toolpad/components/MyBarChart.tsx | 1 - yarn.lock | 5 +- 7 files changed, 69 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index 161a925c2f6..0cc3374d63e 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "@argos-ci/core": "^0.9.0", "@jest/globals": "29.6.2", "@mui/monorepo": "https://github.com/mui/material-ui.git", - "@mui/x-charts": "6.0.0-alpha.7", + "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/290ecadb/@mui/x-charts", "@next/eslint-plugin-next": "13.4.13", "@playwright/test": "1.37.0", "@testing-library/jest-dom": "5.17.0", diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index 72142c3b6fe..454a3359d71 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -53,7 +53,7 @@ "@mui/toolpad-utils": "0.1.23", "@mui/types": "7.2.4", "@mui/utils": "5.14.5", - "@mui/x-charts": "6.0.0-alpha.7", + "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/290ecadb/@mui/x-charts", "@mui/x-data-grid": "6.11.1", "@mui/x-data-grid-pro": "6.11.1", "@mui/x-date-pickers": "6.11.1", @@ -112,7 +112,6 @@ "react-is": "18.2.0", "react-router-dom": "6.15.0", "react-split-pane": "0.1.92", - "recharts": "2.7.3", "semver": "7.5.4", "serialize-javascript": "6.0.1", "superjson": "1.13.1", diff --git a/packages/toolpad-app/src/server/toolpadAppBuilder.ts b/packages/toolpad-app/src/server/toolpadAppBuilder.ts index 00aad8700c3..891ee392c46 100644 --- a/packages/toolpad-app/src/server/toolpadAppBuilder.ts +++ b/packages/toolpad-app/src/server/toolpadAppBuilder.ts @@ -284,7 +284,6 @@ export function createViteConfig({ 'react-router-dom', 'react/jsx-dev-runtime', 'react/jsx-runtime', - 'recharts', 'superjson', 'zod', ], diff --git a/packages/toolpad-components/package.json b/packages/toolpad-components/package.json index 1d413d07981..1a3658e12cd 100644 --- a/packages/toolpad-components/package.json +++ b/packages/toolpad-components/package.json @@ -44,7 +44,7 @@ "@mui/material": "5.14.5", "@mui/toolpad-core": "0.1.23", "@mui/toolpad-utils": "0.1.23", - "@mui/x-charts": "6.0.0-alpha.7", + "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/290ecadb/@mui/x-charts", "@mui/x-data-grid-pro": "6.11.1", "@mui/x-date-pickers": "6.11.1", "@mui/x-license-pro": "6.10.2", @@ -52,8 +52,7 @@ "lodash-es": "4.17.21", "markdown-to-jsx": "7.3.2", "react-error-boundary": "4.0.11", - "react-hook-form": "7.45.4", - "recharts": "2.7.3" + "react-hook-form": "7.45.4" }, "devDependencies": { "react": "18.2.0" diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 2f08da48e25..6008592a0f5 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -1,17 +1,20 @@ import * as React from 'react'; import { createComponent } from '@mui/toolpad-core'; -import { Container, ContainerProps, Skeleton } from '@mui/material'; +import { ContainerProps, Paper, Skeleton, Typography } from '@mui/material'; import { - ChartContainer, BarPlot, LinePlot, ScatterPlot, - ChartsXAxis, - ChartsYAxis, BarSeriesType, LineSeriesType, ScatterSeriesType, } from '@mui/x-charts'; +import { ChartContainer } from '@mui/x-charts/ChartContainer'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; +import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; +import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; +import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; import { errorFrom } from '@mui/toolpad-utils/errors'; import ErrorOverlay from './components/ErrorOverlay'; import { SX_PROP_HELPER_TEXT } from './constants'; @@ -68,51 +71,50 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { const chartSeries: (BarSeriesType | LineSeriesType | ScatterSeriesType)[] = React.useMemo( () => - data.map((dataSeries) => { - let yValues: (number | string)[] = []; - if (dataSeries.data && dataSeries.xKey && dataSeries.yKey) { - yValues = xValues.map((xValue) => { + data + .filter((dataSeries) => dataSeries.xKey && dataSeries.yKey) + .map((dataSeries) => { + const yValues = xValues.map((xValue) => { const point = (dataSeries.data || []).find( (dataSeriesPoint) => dataSeriesPoint[dataSeries.xKey!] === xValue, ); return point ? point[dataSeries.yKey!] : 0; }); - } - const chartType = getChartType(dataSeries.kind); + const chartType = getChartType(dataSeries.kind); - const baseProps = { - type: chartType, - xAxisKey: dataSeries.xKey, - yAxisKey: dataSeries.yKey, - label: dataSeries.label, - color: dataSeries.color, - }; + const baseProps = { + type: chartType, + xAxisKey: dataSeries.xKey, + yAxisKey: dataSeries.yKey, + label: dataSeries.label, + color: dataSeries.color, + }; + + if (chartType === 'scatter') { + return { + ...baseProps, + data: yValues.map((y, index) => ({ + x: xValues[index], + y, + id: `${dataSeries.yKey}-${index}`, + })), + } as ScatterSeriesType; + } + if (chartType === 'line') { + return { + ...baseProps, + data: yValues, + area: dataSeries.kind === 'area', + } as LineSeriesType; + } - if (chartType === 'scatter') { - return { - ...baseProps, - data: yValues.map((y, index) => ({ - x: xValues[index], - y, - id: `${dataSeries.yKey}-${index}`, - })), - } as ScatterSeriesType; - } - if (chartType === 'line') { return { ...baseProps, data: yValues, - area: dataSeries.kind === 'area', - } as LineSeriesType; - } - - return { - ...baseProps, - data: yValues, - } as BarSeriesType; - }), + } as BarSeriesType; + }), [data, xValues], ); @@ -121,9 +123,12 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { const displayError = error ? errorFrom(error) : null; const isDataVisible = !loading && !displayError && chartSeries.length > 0; + const isEmpty = + (!loading && !displayError && chartSeries.length <= 0) || + !chartSeries.find((dataSeries) => (dataSeries.data ?? []).length > 0); return ( - + {loading && !error ? ( ) : null} + {isEmpty ? ( + + No data to show. + + ) : null} ({ - id: dataSeries.yAxisKey, + id: dataSeries?.yAxisKey, scaleType: 'linear', }))} > @@ -176,10 +194,13 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { axisId={yAxisKey as string} /> ))} + + + ) : null} - + ); } diff --git a/test/integration/codeComponents/fixture/toolpad/components/MyBarChart.tsx b/test/integration/codeComponents/fixture/toolpad/components/MyBarChart.tsx index 63ece32514d..fdce83906e2 100644 --- a/test/integration/codeComponents/fixture/toolpad/components/MyBarChart.tsx +++ b/test/integration/codeComponents/fixture/toolpad/components/MyBarChart.tsx @@ -3,7 +3,6 @@ import { createComponent } from '@mui/toolpad/browser'; import { BarChart, Bar, - Cell, XAxis, YAxis, CartesianGrid, diff --git a/yarn.lock b/yarn.lock index 9428c025adf..4ff78071edb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2261,10 +2261,9 @@ prop-types "^15.8.1" react-is "^18.2.0" -"@mui/x-charts@6.0.0-alpha.7": +"@mui/x-charts@https://pkg.csb.dev/mui/mui-x/commit/290ecadb/@mui/x-charts": version "6.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/@mui/x-charts/-/x-charts-6.0.0-alpha.7.tgz#ddd9fdc3b8765703ce6599431b02aa44f39cc4af" - integrity sha512-duZkx4ug+yWzZN4lmY31TngUhoGt8nFoKl8hFMNzIFZCB+u6Z5bbsa0xW5TXL+xNihXhE5lPIJu9SeW1Uv2jqQ== + resolved "https://pkg.csb.dev/mui/mui-x/commit/290ecadb/@mui/x-charts#a8d8839725318dddf12b471fb300b7a7c42e1ee0" dependencies: "@babel/runtime" "^7.22.6" clsx "^2.0.0" From e956563453f153c2e733f98d1e0609320f7aefd4 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 23 Aug 2023 22:20:44 +0100 Subject: [PATCH 04/41] Improve empty chart state, fix chart controls overflow, some more refinements --- .../PageEditor/NodeAttributeEditor.tsx | 2 +- .../toolpad/propertyControls/ChartData.tsx | 7 +- packages/toolpad-components/src/Chart.tsx | 109 ++++++++++-------- 3 files changed, 68 insertions(+), 50 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx index 74859404a6e..50881d9ca53 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx @@ -86,7 +86,7 @@ export default function NodeAttributeEditor

({ propType={argType} jsRuntime={jsBrowserRuntime} renderControl={(params) => ( - + )} diff --git a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx index bee06f76a3b..92fde0321ae 100644 --- a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx +++ b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx @@ -236,7 +236,12 @@ function ChartDataPropEditor({ onClick={handleDataSeriesClick(index)} aria-describedby={popoverId} > - + 0; + const isDataVisible = !loading && !displayError; + const isEmpty = (!loading && !displayError && chartSeries.length <= 0) || !chartSeries.find((dataSeries) => (dataSeries.data ?? []).length > 0); + const hasBarCharts = chartSeries.some((dataSeries) => dataSeries.type === 'bar'); + + const hasXOnlyIntegers = xValues.every((x) => Number.isInteger(x)); + + let xScaleType: ScaleName = 'linear'; + if (hasXOnlyIntegers) { + xScaleType = 'point'; + } + if (hasBarCharts) { + xScaleType = 'band'; + } + return ( - + {loading && !error ? ( ) : null} - {isEmpty ? ( - ({ + id: dataSeries?.yAxisKey || 'y', + scaleType: 'linear', + })) + } sx={{ - flex: 1, - position: 'absolute', - top: '50%', - left: '50%', - transform: 'translateX(-50%) translateY(-50%)', + '--ChartsLegend-rootSpacing': '25px', }} > - No data to show. - - ) : null} - ({ - id: dataSeries?.yAxisKey, - scaleType: 'linear', - }))} - > - {isDataVisible ? ( - - {chartSeries.some((dataSeries) => dataSeries.type === 'line') ? : null} - {chartSeries.some((dataSeries) => dataSeries.type === 'bar') ? : null} - {chartSeries.some((dataSeries) => dataSeries.type === 'scatter') ? ( - - ) : null} - - {chartSeries + + {isEmpty ? ( + + ) : ( + chartSeries // Filter by unique yAxisKey .filter( (dataSeries, index, array) => @@ -193,14 +203,17 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { position="left" axisId={yAxisKey as string} /> - ))} - - - - - ) : null} - - + )) + )} + {chartSeries.some((dataSeries) => dataSeries.type === 'line') ? : null} + {hasBarCharts ? : null} + {chartSeries.some((dataSeries) => dataSeries.type === 'scatter') ? : null} + + + + + ) : null} + ); } From a2030db913863a2b971d2f6bf70a0c444d2a46fa Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 24 Aug 2023 19:37:43 +0100 Subject: [PATCH 05/41] Open series editor on first series creation, use color palette from X charts, many fixes and adjustments --- .../toolpad/propertyControls/ChartData.tsx | 19 ++++- packages/toolpad-components/src/Chart.tsx | 82 ++++++++----------- 2 files changed, 51 insertions(+), 50 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx index 92fde0321ae..a3a4c752f35 100644 --- a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx +++ b/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'; @@ -66,20 +67,29 @@ function ChartDataPropEditor({ const newDataSeriesLabel = `dataSeries${newDataSeriesCount}`; + const palette = blueberryTwilightPalette(appTheme.palette.mode); + onChange([ ...value, { label: newDataSeriesLabel, kind: 'line', data: [], - color: - newDataSeriesCount % 2 === 0 - ? appTheme.palette.secondary.main - : appTheme.palette.primary.main, + color: palette[(newDataSeriesCount - 1) % palette.length], }, ]); }, [appTheme, 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) => { setDataSeriesEditIndex(index); @@ -233,6 +243,7 @@ function ChartDataPropEditor({ return ( diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 6f7cc0bfdb2..49876604920 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -4,6 +4,7 @@ import { ContainerProps, Container, Skeleton } from '@mui/material'; import { BarPlot, LinePlot, + AreaPlot, ScatterPlot, BarSeriesType, LineSeriesType, @@ -64,9 +65,12 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { return dataSeries.data.map((dataSeriesPoint) => dataSeriesPoint[dataSeries.xKey!]); }) .filter((value, index, array) => array.indexOf(value) === index) - .sort((a: number | string, b: number | string) => - typeof a === 'number' && typeof b === 'number' ? a - b : 0, - ), + .sort((a: number | string, b: number | string) => { + if (typeof a === 'number' && typeof b === 'number') { + return (a as number) - (b as number); + } + return 0; + }), [data], ); @@ -87,7 +91,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { const baseProps = { type: chartType, - xAxisKey: dataSeries.xKey, + xAxisKey: 'x', yAxisKey: dataSeries.yKey, label: dataSeries.label, color: dataSeries.color, @@ -119,18 +123,13 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { [data, xValues], ); - const hasNonNumberXValues = xValues.some((xValue) => typeof xValue !== 'number'); - const displayError = error ? errorFrom(error) : null; const isDataVisible = !loading && !displayError; - const isEmpty = - (!loading && !displayError && chartSeries.length <= 0) || - !chartSeries.find((dataSeries) => (dataSeries.data ?? []).length > 0); - - const hasBarCharts = chartSeries.some((dataSeries) => dataSeries.type === 'bar'); + const hasBarCharts = data.some((dataSeries) => dataSeries.kind === 'bar'); + const hasNonCategoryXValues = xValues.some((xValue) => typeof xValue === 'number'); const hasXOnlyIntegers = xValues.every((x) => Number.isInteger(x)); let xScaleType: ScaleName = 'linear'; @@ -141,8 +140,14 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { xScaleType = 'band'; } + const firstDataSeries = chartSeries[0]; + return ( - + {loading && !error ? ( ({ + id: dataSeries?.yAxisKey || 'y', + scaleType: 'linear', + })) + : [ { id: 'y', scaleType: 'linear', }, ] - : chartSeries.map((dataSeries) => ({ - id: dataSeries?.yAxisKey || 'y', - scaleType: 'linear', - })) } sx={{ '--ChartsLegend-rootSpacing': '25px', }} > - - {isEmpty ? ( - - ) : ( - chartSeries - // Filter by unique yAxisKey - .filter( - (dataSeries, index, array) => - dataSeries.yAxisKey && - array.findIndex( - (otherDataSeries) => otherDataSeries.yAxisKey === dataSeries.yAxisKey, - ) === index, - ) - .map(({ yAxisKey }) => ( - - )) - )} - {chartSeries.some((dataSeries) => dataSeries.type === 'line') ? : null} + + + {data.some((dataSeries) => dataSeries.kind === 'area') ? : null} {hasBarCharts ? : null} - {chartSeries.some((dataSeries) => dataSeries.type === 'scatter') ? : null} + {data.some((dataSeries) => dataSeries.kind === 'line') ? : null} + {data.some((dataSeries) => dataSeries.kind === 'scatter') ? : null} From 78e2573751bb79e83397836833e60daf08af2b21 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 25 Aug 2023 19:42:23 +0100 Subject: [PATCH 06/41] More fixes --- .../toolpad/propertyControls/ChartData.tsx | 16 ++++--- packages/toolpad-components/src/Chart.tsx | 43 +++++++++++++------ 2 files changed, 39 insertions(+), 20 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx index a3a4c752f35..c514b3e1c17 100644 --- a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx +++ b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx @@ -59,6 +59,8 @@ function ChartDataPropEditor({ const appTheme = React.useMemo(() => createToolpadAppTheme(dom), [dom]); + const defaultPalette = blueberryTwilightPalette(appTheme.palette.mode); + const [dataSeriesEditIndex, setDataSeriesEditIndex] = React.useState(null); const [popoverAnchorElement, setPopoverAnchorElement] = React.useState(null); @@ -67,18 +69,16 @@ function ChartDataPropEditor({ const newDataSeriesLabel = `dataSeries${newDataSeriesCount}`; - const palette = blueberryTwilightPalette(appTheme.palette.mode); - onChange([ ...value, { label: newDataSeriesLabel, kind: 'line', data: [], - color: palette[(newDataSeriesCount - 1) % palette.length], + color: defaultPalette[(newDataSeriesCount - 1) % defaultPalette.length], }, ]); - }, [appTheme, onChange, value]); + }, [defaultPalette, onChange, value]); const previousDataSeriesCountRef = React.useRef(value.length); React.useEffect(() => { @@ -100,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( diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 49876604920..fa246872d74 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -6,16 +6,17 @@ import { LinePlot, AreaPlot, ScatterPlot, + MarkPlot, BarSeriesType, LineSeriesType, ScatterSeriesType, ScaleName, } from '@mui/x-charts'; -import { ChartContainer } from '@mui/x-charts/ChartContainer'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; -import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; +// import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; import { errorFrom } from '@mui/toolpad-utils/errors'; import ErrorOverlay from './components/ErrorOverlay'; @@ -47,6 +48,10 @@ function getChartType(kind: ChartDataSeriesKind): 'line' | 'bar' | 'scatter' { } } +function hasOnlyIntegers(array: unknown[]): boolean { + return array.every((item) => Number.isInteger(item)); +} + interface ChartProps extends ContainerProps { data?: ChartData; loading?: boolean; @@ -64,7 +69,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { } return dataSeries.data.map((dataSeriesPoint) => dataSeriesPoint[dataSeries.xKey!]); }) - .filter((value, index, array) => array.indexOf(value) === index) + .filter((value, index, array) => value && array.indexOf(value) === index) .sort((a: number | string, b: number | string) => { if (typeof a === 'number' && typeof b === 'number') { return (a as number) - (b as number); @@ -119,7 +124,8 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { ...baseProps, data: yValues, } as BarSeriesType; - }), + }) + .filter((dataSeries) => dataSeries.data && dataSeries.data.length > 0), [data, xValues], ); @@ -130,7 +136,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { const hasBarCharts = data.some((dataSeries) => dataSeries.kind === 'bar'); const hasNonCategoryXValues = xValues.some((xValue) => typeof xValue === 'number'); - const hasXOnlyIntegers = xValues.every((x) => Number.isInteger(x)); + const hasXOnlyIntegers = hasOnlyIntegers(xValues); let xScaleType: ScaleName = 'linear'; if (hasXOnlyIntegers) { @@ -158,10 +164,9 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { /> ) : null} {isDataVisible ? ( - - {data.some((dataSeries) => dataSeries.kind === 'area') ? : null} + {hasXOnlyIntegers && + data.some((dataSeries) => dataSeries.data && hasOnlyIntegers(dataSeries.data)) ? ( + + {data.some((dataSeries) => dataSeries.kind === 'area') ? : null} + {data.some((dataSeries) => dataSeries.kind === 'line') ? : null} + {data.some((dataSeries) => dataSeries.kind === 'scatter') ? : null} + {data.some( + (dataSeries) => dataSeries.kind === 'line' || dataSeries.kind === 'area', + ) ? ( + + ) : null} + + ) : null} {hasBarCharts ? : null} - {data.some((dataSeries) => dataSeries.kind === 'line') ? : null} - {data.some((dataSeries) => dataSeries.kind === 'scatter') ? : null} - + {/* */} - + ) : null} ); From a6169afe9d48503ff1cceeee57f844488d6512df Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 25 Aug 2023 19:53:23 +0100 Subject: [PATCH 07/41] Another fix --- packages/toolpad-components/src/Chart.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 1a0a7ede8bf..a52150b62f6 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -91,7 +91,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { (dataSeriesPoint) => dataSeriesPoint[dataSeries.xKey!] === xValue, ); - return point ? point[dataSeries.yKey!] : 0; + return (point && point[dataSeries.yKey!]) || 0; }); const chartType = getChartType(dataSeries.kind); @@ -131,6 +131,8 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { [data, xValues], ); + console.log(chartSeries); + const displayError = error ? errorFrom(error) : null; const isDataVisible = !loading && !displayError; From 60bf2138b7666c6d14b7d656d00ad1602c4d8169 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 25 Aug 2023 20:00:16 +0100 Subject: [PATCH 08/41] And more --- packages/toolpad-components/src/Chart.tsx | 42 ++++++++++++++++------- 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index a52150b62f6..2b24c38929d 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -50,8 +50,8 @@ function getChartType(kind: ChartDataSeriesKind): 'line' | 'bar' | 'scatter' { } } -function hasOnlyIntegers(array: unknown[]): boolean { - return array.every((item) => Number.isInteger(item)); +function hasOnlyNumbers(array: unknown[]): boolean { + return array.every((item) => typeof item === 'number'); } interface ChartProps extends ContainerProps { @@ -131,8 +131,6 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { [data, xValues], ); - console.log(chartSeries); - const displayError = error ? errorFrom(error) : null; const isDataVisible = !loading && !displayError; @@ -140,7 +138,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { const hasBarCharts = data.some((dataSeries) => dataSeries.kind === 'bar'); const hasNonCategoryXValues = xValues.some((xValue) => typeof xValue === 'number'); - const hasXOnlyIntegers = hasOnlyIntegers(xValues); + const hasXOnlyIntegers = hasOnlyNumbers(xValues); let xScaleType: ScaleName = 'linear'; if (hasXOnlyIntegers) { @@ -203,14 +201,34 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { position="left" axisId={firstDataSeries?.yAxisKey || 'y'} /> - {hasXOnlyIntegers && - data.some((dataSeries) => dataSeries.data && hasOnlyIntegers(dataSeries.data)) ? ( + {hasXOnlyIntegers ? ( - {data.some((dataSeries) => dataSeries.kind === 'area') ? : null} - {data.some((dataSeries) => dataSeries.kind === 'line') ? : null} - {data.some((dataSeries) => dataSeries.kind === 'scatter') ? : null} - {data.some( - (dataSeries) => dataSeries.kind === 'line' || dataSeries.kind === 'area', + {chartSeries.some( + (dataSeries) => + dataSeries.data && + hasOnlyNumbers(dataSeries.data) && + dataSeries.type === 'line' && + dataSeries.area, + ) ? ( + + ) : null} + {chartSeries.some( + (dataSeries) => + dataSeries.data && hasOnlyNumbers(dataSeries.data) && dataSeries.type === 'line', + ) ? ( + + ) : null} + {chartSeries.some( + (dataSeries) => + dataSeries.data && + hasOnlyNumbers(dataSeries.data) && + dataSeries.type === 'scatter', + ) ? ( + + ) : null} + {chartSeries.some( + (dataSeries) => + dataSeries.data && hasOnlyNumbers(dataSeries.data) && dataSeries.type === 'line', ) ? ( ) : null} From d055cf2819e0ae52920f895be1258ce58ed0acb9 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 25 Aug 2023 20:07:16 +0100 Subject: [PATCH 09/41] Fix scatter charts --- packages/toolpad-components/src/Chart.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 2b24c38929d..eea51863f9b 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -205,30 +205,31 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { {chartSeries.some( (dataSeries) => + dataSeries.type === 'line' && dataSeries.data && hasOnlyNumbers(dataSeries.data) && - dataSeries.type === 'line' && dataSeries.area, ) ? ( ) : null} {chartSeries.some( (dataSeries) => - dataSeries.data && hasOnlyNumbers(dataSeries.data) && dataSeries.type === 'line', + dataSeries.type === 'line' && dataSeries.data && hasOnlyNumbers(dataSeries.data), ) ? ( ) : null} {chartSeries.some( (dataSeries) => + dataSeries.type === 'scatter' && dataSeries.data && - hasOnlyNumbers(dataSeries.data) && - dataSeries.type === 'scatter', + hasOnlyNumbers(dataSeries.data.map((point) => point.x)) && + hasOnlyNumbers(dataSeries.data.map((point) => point.y)), ) ? ( ) : null} {chartSeries.some( (dataSeries) => - dataSeries.data && hasOnlyNumbers(dataSeries.data) && dataSeries.type === 'line', + dataSeries.type === 'line' && dataSeries.data && hasOnlyNumbers(dataSeries.data), ) ? ( ) : null} From 8c46fd816acd5ca4aa8b67094b3ed28329a23c60 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 25 Aug 2023 20:13:21 +0100 Subject: [PATCH 10/41] Fix lint --- examples/npm-stats/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/npm-stats/package.json b/examples/npm-stats/package.json index beed6289efa..c97b092a3da 100644 --- a/examples/npm-stats/package.json +++ b/examples/npm-stats/package.json @@ -8,6 +8,6 @@ "start": "NODE_OPTIONS='--max-old-space-size=396' toolpad start" }, "dependencies": { - "@mui/toolpad": "0.1.24", + "@mui/toolpad": "0.1.24" } } From 0f0b1fe18ca6bc0cfe4f4b4c44c86bba80922f39 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Mon, 28 Aug 2023 20:06:29 +0100 Subject: [PATCH 11/41] Remove chart from future components --- .../AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx index 7b21866a160..eb88a9a954d 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx @@ -18,7 +18,6 @@ interface FutureComponentSpec { } const FUTURE_COMPONENTS = new Map([ - ['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' }], From e9b0fb8da64280a5de3f0d2056f1f01ee2a0ecf7 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 30 Aug 2023 19:07:56 +0100 Subject: [PATCH 12/41] Try latest charts version --- package.json | 2 +- packages/toolpad-app/package.json | 2 +- packages/toolpad-components/package.json | 2 +- yarn.lock | 9 +++++---- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 2c8028e5b20..8a11da9b4c5 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "@argos-ci/core": "^0.9.0", "@jest/globals": "29.6.2", "@mui/monorepo": "https://github.com/mui/material-ui.git", - "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/290ecadb/@mui/x-charts", + "@mui/x-charts": "6.0.0-alpha.8", "@next/eslint-plugin-next": "13.4.19", "@playwright/test": "1.37.1", "@testing-library/jest-dom": "6.1.1", diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index a0e5a158c4b..8e76f727888 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -56,7 +56,7 @@ "@mui/toolpad-utils": "0.1.25", "@mui/types": "7.2.4", "@mui/utils": "5.14.6", - "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/290ecadb/@mui/x-charts", + "@mui/x-charts": "6.0.0-alpha.8", "@mui/x-data-grid": "6.12.0", "@mui/x-data-grid-pro": "6.12.0", "@mui/x-date-pickers": "6.12.0", diff --git a/packages/toolpad-components/package.json b/packages/toolpad-components/package.json index 79bcb5dcc42..7cad8c0ae8c 100644 --- a/packages/toolpad-components/package.json +++ b/packages/toolpad-components/package.json @@ -43,7 +43,7 @@ "@mui/material": "5.14.6", "@mui/toolpad-core": "0.1.25", "@mui/toolpad-utils": "0.1.25", - "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/290ecadb/@mui/x-charts", + "@mui/x-charts": "6.0.0-alpha.8", "@mui/x-data-grid-pro": "6.12.0", "@mui/x-date-pickers": "6.12.0", "@mui/x-license-pro": "6.10.2", diff --git a/yarn.lock b/yarn.lock index abffee98a93..06b75550c49 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2399,11 +2399,12 @@ prop-types "^15.8.1" react-is "^18.2.0" -"@mui/x-charts@https://pkg.csb.dev/mui/mui-x/commit/290ecadb/@mui/x-charts": - version "6.0.0-alpha.7" - resolved "https://pkg.csb.dev/mui/mui-x/commit/290ecadb/@mui/x-charts#a8d8839725318dddf12b471fb300b7a7c42e1ee0" +"@mui/x-charts@6.0.0-alpha.8": + version "6.0.0-alpha.8" + resolved "https://registry.yarnpkg.com/@mui/x-charts/-/x-charts-6.0.0-alpha.8.tgz#94c414aaf242d34d56ca9fd290b1734214df1b11" + integrity sha512-9CKo0sdSaLvi/DBCD3IAX9C9P2ntN0evTghyTGcdWVm0VdT68CzpN8cm/f9J1c4z0fstOMjwJq8CfRPUyL9F8A== dependencies: - "@babel/runtime" "^7.22.6" + "@babel/runtime" "^7.22.11" clsx "^2.0.0" d3-color "^3.1.0" d3-scale "^4.0.2" From 391c4a2ecd2c11f25d97fa7f7253268133b86445 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 30 Aug 2023 20:04:36 +0100 Subject: [PATCH 13/41] Try to make tests work with ESM modules --- packages/toolpad-app/package.json | 2 +- packages/toolpad-app/src/server/toolpadAppBuilder.ts | 9 ++++++++- packages/toolpad-components/src/Chart.tsx | 4 ++-- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index 8e76f727888..6c7c88c3f36 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -18,7 +18,7 @@ "dev:typings": "yarn build:typings", "waitForApp": "tsx ./scripts/waitForApp.mts", "check-types": "tsup && tsc --noEmit", - "test": "jest" + "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest" }, "files": [ "public", diff --git a/packages/toolpad-app/src/server/toolpadAppBuilder.ts b/packages/toolpad-app/src/server/toolpadAppBuilder.ts index 891ee392c46..b5e5374b3e8 100644 --- a/packages/toolpad-app/src/server/toolpadAppBuilder.ts +++ b/packages/toolpad-app/src/server/toolpadAppBuilder.ts @@ -259,7 +259,14 @@ export function createViteConfig({ '@mui/material/styles', '@mui/material/useMediaQuery', '@mui/utils', - '@mui/x-charts/ChartContainer', + '@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', diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index eea51863f9b..18d99878f15 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -17,7 +17,7 @@ import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; -// import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; +import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; import { errorFrom } from '@mui/toolpad-utils/errors'; import createBuiltin from './createBuiltin'; @@ -237,7 +237,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { ) : null} {hasBarCharts ? : null} - {/* */} + ) : null} From 9163c99e222be8ca692a01027526c26a3345de47 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 30 Aug 2023 22:20:08 +0100 Subject: [PATCH 14/41] Try something else --- packages/toolpad-app/jest.config.js | 1 + packages/toolpad-components/src/Chart.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/toolpad-app/jest.config.js b/packages/toolpad-app/jest.config.js index bbc99b35c5b..f266297a995 100644 --- a/packages/toolpad-app/jest.config.js +++ b/packages/toolpad-app/jest.config.js @@ -1,4 +1,5 @@ module.exports = /** @type {import('jest').Config} */ ({ + preset: 'ts-jest/presets/default-esm', transform: { '^.+\\.(t|j)sx?$': '@swc/jest', }, diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 18d99878f15..eea51863f9b 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -17,7 +17,7 @@ import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; -import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; +// import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; import { errorFrom } from '@mui/toolpad-utils/errors'; import createBuiltin from './createBuiltin'; @@ -237,7 +237,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { ) : null} {hasBarCharts ? : null} - + {/* */} ) : null} From a50adde61000ff2d5b7d722d21403a481ffa40e6 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 30 Aug 2023 22:43:50 +0100 Subject: [PATCH 15/41] Use transformIgnorePatterns --- packages/toolpad-app/jest.config.js | 20 ++++++++++++++++++-- packages/toolpad-app/package.json | 2 +- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/toolpad-app/jest.config.js b/packages/toolpad-app/jest.config.js index f266297a995..b0ff473b84c 100644 --- a/packages/toolpad-app/jest.config.js +++ b/packages/toolpad-app/jest.config.js @@ -1,8 +1,24 @@ +const esModules = [ + 'get-port', + 'lodash-es', + 'nanoid', + 'fractional-indexing', + 'd3-scale', + 'd3-array', + 'internmap', + 'd3-interpolate', + 'd3-color', + 'd3-format', + 'd3-time', + 'd3-time-format', + 'd3-shape', + 'd3-path', +].join('|'); + module.exports = /** @type {import('jest').Config} */ ({ - preset: 'ts-jest/presets/default-esm', transform: { '^.+\\.(t|j)sx?$': '@swc/jest', }, setupFilesAfterEnv: ['/../../test/setupJest.ts'], - transformIgnorePatterns: ['node_modules/(?!(get-port|lodash-es|nanoid|fractional-indexing)/)'], + transformIgnorePatterns: [`node_modules/(?!(${esModules})/)`], }); diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index 6c7c88c3f36..8e76f727888 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -18,7 +18,7 @@ "dev:typings": "yarn build:typings", "waitForApp": "tsx ./scripts/waitForApp.mts", "check-types": "tsup && tsc --noEmit", - "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest" + "test": "jest" }, "files": [ "public", From 7636924eb7e249a8c8eec9477e710058955be936 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 30 Aug 2023 23:35:01 +0100 Subject: [PATCH 16/41] Adjust integration tests --- packages/toolpad-components/src/Chart.tsx | 14 +++--- test/integration/components/chart.spec.ts | 10 ++-- .../toolpad/pages/chart/page.yml | 46 +++++++++++-------- .../toolpad/pages/loadingAndError/page.yml | 4 +- .../toolpad/resources/barChartData.ts | 1 - 5 files changed, 41 insertions(+), 34 deletions(-) diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index eea51863f9b..458b8b4e302 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -203,6 +203,13 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { /> {hasXOnlyIntegers ? ( + {hasBarCharts ? : null} + {chartSeries.some( + (dataSeries) => + dataSeries.type === 'line' && dataSeries.data && hasOnlyNumbers(dataSeries.data), + ) ? ( + + ) : null} {chartSeries.some( (dataSeries) => dataSeries.type === 'line' && @@ -212,12 +219,6 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { ) ? ( ) : null} - {chartSeries.some( - (dataSeries) => - dataSeries.type === 'line' && dataSeries.data && hasOnlyNumbers(dataSeries.data), - ) ? ( - - ) : null} {chartSeries.some( (dataSeries) => dataSeries.type === 'scatter' && @@ -235,7 +236,6 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { ) : null} ) : null} - {hasBarCharts ? : null} {/* */} diff --git a/test/integration/components/chart.spec.ts b/test/integration/components/chart.spec.ts index 4b6cbdd98b1..cc723c84ca7 100644 --- a/test/integration/components/chart.spec.ts +++ b/test/integration/components/chart.spec.ts @@ -20,13 +20,13 @@ test('shows chart data', async ({ page }) => { const runtimeModel = new ToolpadRuntime(page); await runtimeModel.gotoPage('chart'); - const barChartColumn = page.locator('path[name="barChart"]'); - await expect(barChartColumn).toHaveCount(6); - await expect(barChartColumn.first()).toHaveAttribute('fill', '#9c27b0'); + const barChartColumn = page.locator('.MuiBarElement-root'); + await expect(barChartColumn).toHaveCount(5); + await expect(barChartColumn.first()).toHaveCSS('fill', 'rgb(156, 39, 176)'); - const lineChartLine = page.locator('path[name="lineChart"]'); + const lineChartLine = page.locator('.MuiLineElement-root'); await expect(lineChartLine).toHaveCount(1); - await expect(lineChartLine).toHaveAttribute('stroke', '#4caf50'); + await expect(lineChartLine).toHaveCSS('stroke', 'rgb(76, 175, 80)'); }); test('shows chart loading and errors', async ({ page }) => { diff --git a/test/integration/components/fixture-chart/toolpad/pages/chart/page.yml b/test/integration/components/fixture-chart/toolpad/pages/chart/page.yml index 89e73241f42..ec0ba2afe13 100644 --- a/test/integration/components/fixture-chart/toolpad/pages/chart/page.yml +++ b/test/integration/components/fixture-chart/toolpad/pages/chart/page.yml @@ -5,27 +5,33 @@ spec: title: chart display: shell content: - - component: PageRow - name: pageRow - children: - - component: Chart - name: chart - props: + - component: Chart + name: chart + children: [] + layout: + columnSize: 1 + props: + data: + - kind: line + label: lineChart data: - - kind: bar - label: barChart - data: - $$jsExpression: | - barChartDataQuery.data - xKey: key - yKey: count - color: "#9c27b0" - - kind: line - label: lineChart - data: [ { x: 1, y: 2 }, { x: 3, y: 4 }, { x: 5, y: 1 } ] - xKey: x - yKey: y - color: '#4caf50' + - x: 1 + y: 2 + - x: 3 + y: 4 + - x: 5 + y: 1 + xKey: x + yKey: y + color: '#4caf50' + - kind: bar + label: barChart + data: + $$jsExpression: | + barChartDataQuery.data + xKey: key + yKey: count + color: '#9c27b0' queries: - name: barChartDataQuery query: diff --git a/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml b/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml index e696c310255..0d8f8662e6a 100644 --- a/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml +++ b/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml @@ -9,7 +9,7 @@ spec: name: pageRow children: - component: Chart - name: chart + name: chart1 props: data: - label: dataSeries1 @@ -20,6 +20,7 @@ spec: color: "#1976d2" xKey: "" yKey: "" + children: [] - component: Chart name: chart1 props: @@ -32,6 +33,7 @@ spec: color: "#1976d2" xKey: "" yKey: "" + children: [] queries: - name: alwaysLoading query: diff --git a/test/integration/components/fixture-chart/toolpad/resources/barChartData.ts b/test/integration/components/fixture-chart/toolpad/resources/barChartData.ts index 07f2c6bd031..e9d09e5ba24 100644 --- a/test/integration/components/fixture-chart/toolpad/resources/barChartData.ts +++ b/test/integration/components/fixture-chart/toolpad/resources/barChartData.ts @@ -4,7 +4,6 @@ export default async function handler() { return [ - { key: 0, count: 4 }, { key: 1, count: 2 }, { key: 2, count: 5 }, { key: 3, count: 3 }, From 2d68f8ebd09bfb38b5c2e87bcc367e695406a07d Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 30 Aug 2023 23:36:45 +0100 Subject: [PATCH 17/41] ugh --- .../toolpad/pages/loadingAndError/page.yml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml b/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml index 0d8f8662e6a..46d43f2b487 100644 --- a/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml +++ b/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml @@ -9,7 +9,7 @@ spec: name: pageRow children: - component: Chart - name: chart1 + name: chart props: data: - label: dataSeries1 @@ -17,9 +17,9 @@ spec: data: $$jsExpression: | alwaysLoading.data - color: "#1976d2" - xKey: "" - yKey: "" + color: '#1976d2' + xKey: '' + yKey: '' children: [] - component: Chart name: chart1 @@ -30,9 +30,9 @@ spec: data: $$jsExpression: | error.data - color: "#1976d2" - xKey: "" - yKey: "" + color: '#1976d2' + xKey: '' + yKey: '' children: [] queries: - name: alwaysLoading From ed6685d933fa8365846ce4a532f318465f6f9fc9 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 31 Aug 2023 00:12:18 +0100 Subject: [PATCH 18/41] Try to fix viteimports issue + fix CI tests --- packages/toolpad-app/package.json | 2 + .../src/server/toolpadAppBuilder.ts | 8 +- .../toolpad-app/src/toolpad/vite.config.ts | 3 +- yarn.lock | 154 ++++++++++++++++++ 4 files changed, 165 insertions(+), 2 deletions(-) diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index 8e76f727888..93d6d7ff019 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -61,6 +61,7 @@ "@mui/x-data-grid-pro": "6.12.0", "@mui/x-date-pickers": "6.12.0", "@mui/x-date-pickers-pro": "6.12.0", + "@originjs/vite-plugin-commonjs": "1.0.3", "@tanstack/react-query": "4.33.0", "@tanstack/react-query-devtools": "4.33.0", "@types/cors": "2.8.13", @@ -115,6 +116,7 @@ "react-is": "18.2.0", "react-resizable-panels": "0.0.53", "react-router-dom": "6.15.0", + "recharts": "2.8.0", "semver": "7.5.4", "serialize-javascript": "6.0.1", "superjson": "1.13.1", diff --git a/packages/toolpad-app/src/server/toolpadAppBuilder.ts b/packages/toolpad-app/src/server/toolpadAppBuilder.ts index b5e5374b3e8..649a632d17d 100644 --- a/packages/toolpad-app/src/server/toolpadAppBuilder.ts +++ b/packages/toolpad-app/src/server/toolpadAppBuilder.ts @@ -1,6 +1,7 @@ import * as path from 'path'; import { InlineConfig, Plugin, build } from 'vite'; import react from '@vitejs/plugin-react'; +import { viteCommonjs } from '@originjs/vite-plugin-commonjs'; import serializeJavascript from 'serialize-javascript'; import { indent } from '@mui/toolpad-utils/strings'; import { RUNTIME_CONFIG_WINDOW_PROPERTY } from '../constants'; @@ -304,7 +305,12 @@ export function createViteConfig({ appType: 'custom', logLevel: 'info', root, - plugins: [react(), toolpadVitePlugin({ root, base, getComponents }), ...plugins], + plugins: [ + react(), + viteCommonjs(), + toolpadVitePlugin({ root, base, getComponents }), + ...plugins, + ], base, define: { 'process.env.NODE_ENV': `'${mode}'`, diff --git a/packages/toolpad-app/src/toolpad/vite.config.ts b/packages/toolpad-app/src/toolpad/vite.config.ts index e595ebe7897..8100d53f7c7 100644 --- a/packages/toolpad-app/src/toolpad/vite.config.ts +++ b/packages/toolpad-app/src/toolpad/vite.config.ts @@ -2,6 +2,7 @@ import * as path from 'path'; import * as fs from 'fs'; import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import { viteCommonjs } from '@originjs/vite-plugin-commonjs'; const pkgJsonContent = fs.readFileSync(path.resolve(__dirname, '../../package.json'), { encoding: 'utf-8', @@ -12,7 +13,7 @@ const TOOLPAD_BUILD = process.env.GIT_SHA1?.slice(0, 7) || 'dev'; // https://vitejs.dev/config/ export default defineConfig({ base: '/_toolpad/', - plugins: [react()], + plugins: [react(), viteCommonjs()], build: { outDir: path.resolve(__dirname, '../../dist/editor'), emptyOutDir: true, diff --git a/yarn.lock b/yarn.lock index 06b75550c49..63292777d90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1602,6 +1602,11 @@ resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.2.tgz#3fc4f0fa026057fe885e4a180b3956e704f1ceaa" integrity sha512-mLfp0ziRPOLSTek0Gd9T5B8AtzKAkoZE70fneiiyPlSnUKKI4lp+mGEnQXcQEHLJAcIYDPSyBvsUbKUG2ri/XQ== +"@esbuild/linux-loong64@0.14.54": + version "0.14.54" + resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028" + integrity sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw== + "@esbuild/linux-loong64@0.17.19": version "0.17.19" resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz#0f887b8bb3f90658d1a0117283e55dbd4c9dcf72" @@ -2814,6 +2819,13 @@ dependencies: "@octokit/openapi-types" "^18.0.0" +"@originjs/vite-plugin-commonjs@1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@originjs/vite-plugin-commonjs/-/vite-plugin-commonjs-1.0.3.tgz#2e3fb11ec78847da9422b79c103953f94d667f09" + integrity sha512-KuEXeGPptM2lyxdIEJ4R11+5ztipHoE7hy8ClZt3PYaOVQ/pyngd2alaSrPnwyFeOW1UagRBaQ752aA1dTMdOQ== + dependencies: + esbuild "^0.14.14" + "@parcel/watcher@2.0.4": version "2.0.4" resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.0.4.tgz#f300fef4cc38008ff4b8c29d92588eced3ce014b" @@ -6444,6 +6456,106 @@ es7-shim@^6.0.0: string.prototype.trimleft "^2.0.0" string.prototype.trimright "^2.0.0" +esbuild-android-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz#505f41832884313bbaffb27704b8bcaa2d8616be" + integrity sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ== + +esbuild-android-arm64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz#8ce69d7caba49646e009968fe5754a21a9871771" + integrity sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg== + +esbuild-darwin-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz#24ba67b9a8cb890a3c08d9018f887cc221cdda25" + integrity sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug== + +esbuild-darwin-arm64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz#3f7cdb78888ee05e488d250a2bdaab1fa671bf73" + integrity sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw== + +esbuild-freebsd-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz#09250f997a56ed4650f3e1979c905ffc40bbe94d" + integrity sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg== + +esbuild-freebsd-arm64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz#bafb46ed04fc5f97cbdb016d86947a79579f8e48" + integrity sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q== + +esbuild-linux-32@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz#e2a8c4a8efdc355405325033fcebeb941f781fe5" + integrity sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw== + +esbuild-linux-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz#de5fdba1c95666cf72369f52b40b03be71226652" + integrity sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg== + +esbuild-linux-arm64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz#dae4cd42ae9787468b6a5c158da4c84e83b0ce8b" + integrity sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig== + +esbuild-linux-arm@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz#a2c1dff6d0f21dbe8fc6998a122675533ddfcd59" + integrity sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw== + +esbuild-linux-mips64le@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz#d9918e9e4cb972f8d6dae8e8655bf9ee131eda34" + integrity sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw== + +esbuild-linux-ppc64le@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz#3f9a0f6d41073fb1a640680845c7de52995f137e" + integrity sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ== + +esbuild-linux-riscv64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz#618853c028178a61837bc799d2013d4695e451c8" + integrity sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg== + +esbuild-linux-s390x@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz#d1885c4c5a76bbb5a0fe182e2c8c60eb9e29f2a6" + integrity sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA== + +esbuild-netbsd-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz#69ae917a2ff241b7df1dbf22baf04bd330349e81" + integrity sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w== + +esbuild-openbsd-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz#db4c8495287a350a6790de22edea247a57c5d47b" + integrity sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw== + +esbuild-sunos-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz#54287ee3da73d3844b721c21bc80c1dc7e1bf7da" + integrity sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw== + +esbuild-windows-32@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz#f8aaf9a5667630b40f0fb3aa37bf01bbd340ce31" + integrity sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w== + +esbuild-windows-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz#bf54b51bd3e9b0f1886ffdb224a4176031ea0af4" + integrity sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ== + +esbuild-windows-arm64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz#937d15675a15e4b0e4fafdbaa3a01a776a2be982" + integrity sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg== + esbuild@0.19.2: version "0.19.2" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.2.tgz#b1541828a89dfb6f840d38538767c6130dca2aac" @@ -6472,6 +6584,33 @@ esbuild@0.19.2: "@esbuild/win32-ia32" "0.19.2" "@esbuild/win32-x64" "0.19.2" +esbuild@^0.14.14: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.54.tgz#8b44dcf2b0f1a66fc22459943dccf477535e9aa2" + integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA== + optionalDependencies: + "@esbuild/linux-loong64" "0.14.54" + esbuild-android-64 "0.14.54" + esbuild-android-arm64 "0.14.54" + esbuild-darwin-64 "0.14.54" + esbuild-darwin-arm64 "0.14.54" + esbuild-freebsd-64 "0.14.54" + esbuild-freebsd-arm64 "0.14.54" + esbuild-linux-32 "0.14.54" + esbuild-linux-64 "0.14.54" + esbuild-linux-arm "0.14.54" + esbuild-linux-arm64 "0.14.54" + esbuild-linux-mips64le "0.14.54" + esbuild-linux-ppc64le "0.14.54" + esbuild-linux-riscv64 "0.14.54" + esbuild-linux-s390x "0.14.54" + esbuild-netbsd-64 "0.14.54" + esbuild-openbsd-64 "0.14.54" + esbuild-sunos-64 "0.14.54" + esbuild-windows-32 "0.14.54" + esbuild-windows-64 "0.14.54" + esbuild-windows-arm64 "0.14.54" + esbuild@^0.18.10, esbuild@^0.18.2: version "0.18.18" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.18.tgz#196838a905c7068d1c1653b04f2c5dfdb68ef927" @@ -12221,6 +12360,21 @@ recharts@2.7.3: reduce-css-calc "^2.1.8" victory-vendor "^36.6.8" +recharts@2.8.0: + version "2.8.0" + resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.8.0.tgz#90c95136e2cb6930224c94a51adce607701284fc" + integrity sha512-nciXqQDh3aW8abhwUlA4EBOBusRHLNiKHfpRZiG/yjups1x+auHb2zWPuEcTn/IMiN47vVMMuF8Sr+vcQJtsmw== + dependencies: + classnames "^2.2.5" + eventemitter3 "^4.0.1" + lodash "^4.17.19" + react-is "^16.10.2" + react-resize-detector "^8.0.4" + react-smooth "^2.0.2" + recharts-scale "^0.4.4" + reduce-css-calc "^2.1.8" + victory-vendor "^36.6.8" + recursive-readdir@^2.2.2: version "2.2.3" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.3.tgz#e726f328c0d69153bcabd5c322d3195252379372" From 875b645ada29d4b6576a2435f627924fd93970b2 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 31 Aug 2023 15:48:45 +0100 Subject: [PATCH 19/41] No need for recharts here after all --- packages/toolpad-app/package.json | 1 - yarn.lock | 15 --------------- 2 files changed, 16 deletions(-) diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index 93d6d7ff019..f5d24065a68 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -116,7 +116,6 @@ "react-is": "18.2.0", "react-resizable-panels": "0.0.53", "react-router-dom": "6.15.0", - "recharts": "2.8.0", "semver": "7.5.4", "serialize-javascript": "6.0.1", "superjson": "1.13.1", diff --git a/yarn.lock b/yarn.lock index 63292777d90..8e712910255 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12360,21 +12360,6 @@ recharts@2.7.3: reduce-css-calc "^2.1.8" victory-vendor "^36.6.8" -recharts@2.8.0: - version "2.8.0" - resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.8.0.tgz#90c95136e2cb6930224c94a51adce607701284fc" - integrity sha512-nciXqQDh3aW8abhwUlA4EBOBusRHLNiKHfpRZiG/yjups1x+auHb2zWPuEcTn/IMiN47vVMMuF8Sr+vcQJtsmw== - dependencies: - classnames "^2.2.5" - eventemitter3 "^4.0.1" - lodash "^4.17.19" - react-is "^16.10.2" - react-resize-detector "^8.0.4" - react-smooth "^2.0.2" - recharts-scale "^0.4.4" - reduce-css-calc "^2.1.8" - victory-vendor "^36.6.8" - recursive-readdir@^2.2.2: version "2.2.3" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.3.tgz#e726f328c0d69153bcabd5c322d3195252379372" From 77a3abb7b13e8d3d8bacce39de7263304cefee1e Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 31 Aug 2023 15:52:44 +0100 Subject: [PATCH 20/41] Update yarn.lock --- yarn.lock | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/yarn.lock b/yarn.lock index c1d62b2d0a3..68b66e97a67 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12373,21 +12373,6 @@ recharts-scale@^0.4.4: dependencies: decimal.js-light "^2.4.1" -recharts@2.7.3: - version "2.7.3" - resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.7.3.tgz#ca15789f94495d56a484ff6c0d9c7f665af0472d" - integrity sha512-cKoO9jUZRQavn06H6Ih2EcG82zUNdQH3OEGWVCmluSDyp3d7fIpDAsbMTd8hE8+T+MD8P76iicv/J4pJspDP7A== - dependencies: - classnames "^2.2.5" - eventemitter3 "^4.0.1" - lodash "^4.17.19" - react-is "^16.10.2" - react-resize-detector "^8.0.4" - react-smooth "^2.0.2" - recharts-scale "^0.4.4" - reduce-css-calc "^2.1.8" - victory-vendor "^36.6.8" - recharts@2.8.0: version "2.8.0" resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.8.0.tgz#90c95136e2cb6930224c94a51adce607701284fc" From b2eded4a18dc19c8f1b1ae912a4ac8db8db08825 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 31 Aug 2023 16:41:56 +0100 Subject: [PATCH 21/41] Fix crashes when data is invalid --- .../src/toolpad/propertyControls/ChartData.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx index 79156d0189b..0c3f712f069 100644 --- a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx +++ b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx @@ -227,9 +227,11 @@ function ChartDataPropEditor({ const dataResult = (evaluateBindable(jsBrowserRuntime, dataSeries.data, pageState).value || []) as NonNullable; - 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], ); From 2fd816c7d4ac769c586948e72bdd07506e082303 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 31 Aug 2023 16:48:48 +0100 Subject: [PATCH 22/41] Try recharts in dependencies instead of devDependencies --- packages/toolpad-app/package.json | 1 + yarn.lock | 49 ++++++++++++++++++------------- 2 files changed, 29 insertions(+), 21 deletions(-) diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index c95fd6451f9..1953e553c69 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -117,6 +117,7 @@ "react-is": "18.2.0", "react-resizable-panels": "0.0.53", "react-router-dom": "6.15.0", + "recharts": "2.8.0", "semver": "7.5.4", "serialize-javascript": "6.0.1", "superjson": "1.13.1", diff --git a/yarn.lock b/yarn.lock index 68b66e97a67..357b063f381 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3218,9 +3218,9 @@ integrity sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA== "@types/d3-array@^3.0.3": - version "3.0.4" - resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.4.tgz#44eebe40be57476cad6a0cd6a85b0f57d54185a2" - integrity sha512-nwvEkG9vYOc0Ic7G7kwgviY4AQlTfYGIZ0fqB7CQHXGyYM6nO7kJh5EguSNA3jfh4rq7Sb7eMVq8isuvg2/miQ== + version "3.0.7" + resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.7.tgz#b128a0c0b0d9481d3281df47de0955730db384a1" + integrity sha512-4/Q0FckQ8TBjsB0VdGFemJOG8BLXUB2KKlL0VmZ+eOYeOnTb/wDRQqYWpBmQ6IlvWkXwkYiot+n9Px2aTJ7zGQ== "@types/d3-color@*": version "3.1.0" @@ -3245,16 +3245,16 @@ integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg== "@types/d3-scale@^4.0.2": - version "4.0.3" - resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.3.tgz#7a5780e934e52b6f63ad9c24b105e33dd58102b5" - integrity sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ== + version "4.0.4" + resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.4.tgz#3c5e2263eea5a3670cd91043b9f4d150a94c43f1" + integrity sha512-eq1ZeTj0yr72L8MQk6N6heP603ubnywSDRfNpi5enouR112HzGLS6RIvExCzZTraFF4HdzNpJMwA/zGiMoHUUw== dependencies: "@types/d3-time" "*" "@types/d3-shape@^3.1.0": - version "3.1.1" - resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.1.tgz#15cc497751dac31192d7aef4e67a8d2c62354b95" - integrity sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A== + version "3.1.2" + resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.2.tgz#a3d421d8b0bc0c6c67cb3f4b4471ddc133cb0117" + integrity sha512-NN4CXr3qeOUNyK5WasVUV8NCSAx/CRVcwcb0BuuS1PiTqwIm6ABi1SyasLZ/vsVCFDArF+W4QiGzSry1eKYQ7w== dependencies: "@types/d3-path" "*" @@ -5791,13 +5791,20 @@ csstype@3.1.2, csstype@^3.0.2, csstype@^3.1.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== -"d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6: +"d3-array@2 - 3", "d3-array@2.10.0 - 3": version "3.2.3" resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.3.tgz#39f1f4954e4a09ff69ac597c2d61906b04e84740" integrity sha512-JRHwbQQ84XuAESWhvIPaUV4/1UYTBOLiOPGWqgFDHZS1D5QN9c57FbH3QpEnQMYiOXNzKUQyGTZf+EVO7RT5TQ== dependencies: internmap "1 - 2" +d3-array@^3.1.6: + version "3.2.4" + resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5" + integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg== + dependencies: + internmap "1 - 2" + "d3-color@1 - 3", d3-color@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2" @@ -7227,10 +7234,10 @@ fast-diff@^1.1.2: resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03" integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== -fast-equals@^4.0.3: - version "4.0.3" - resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-4.0.3.tgz#72884cc805ec3c6679b99875f6b7654f39f0e8c7" - integrity sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg== +fast-equals@^5.0.0: + version "5.0.1" + resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-5.0.1.tgz#a4eefe3c5d1c0d021aeed0bc10ba5e0c12ee405d" + integrity sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ== fast-glob@3.2.7: version "3.2.7" @@ -12190,11 +12197,11 @@ react-simple-code-editor@0.13.1: integrity sha512-XYeVwRZwgyKtjNIYcAEgg2FaQcCZwhbarnkJIV20U2wkCU9q/CPFBo8nRXrK4GXUz3AvbqZFsZRrpUTkqqEYyQ== react-smooth@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.2.tgz#0ef24213628cb13bf4305194a050e1db4302a3a1" - integrity sha512-pgqSp1q8rAGtF1bXQE0m3CHGLNfZZh5oA5o1tsPLXRHnKtkujMIJ8Ws5nO1mTySZf1c4vgwlEk+pHi3Ln6eYLw== + version "2.0.3" + resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.3.tgz#2845fa8f22914f2e4445856d5688fb8a7d72f3ae" + integrity sha512-yl4y3XiMorss7ayF5QnBiSprig0+qFHui8uh7Hgg46QX5O+aRMRKlfGGNGLHno35JkQSvSYY8eCWkBfHfrSHfg== dependencies: - fast-equals "^4.0.3" + fast-equals "^5.0.0" react-transition-group "2.9.0" react-transition-group@2.9.0: @@ -14146,9 +14153,9 @@ vary@^1, vary@~1.1.2: integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg== victory-vendor@^36.6.8: - version "36.6.8" - resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.6.8.tgz#5a1c555ca99a39fdb66a6c959c8426eb834893a2" - integrity sha512-H3kyQ+2zgjMPvbPqAl7Vwm2FD5dU7/4bCTQakFQnpIsfDljeOMDojRsrmJfwh4oAlNnWhpAf+mbAoLh8u7dwyQ== + version "36.6.11" + resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.6.11.tgz#acae770717c2dae541a54929c304ecab5ab6ac2a" + integrity sha512-nT8kCiJp8dQh8g991J/R5w5eE2KnO8EAIP0xocWlh9l2okngMWglOPoMZzJvek8Q1KUc4XE/mJxTZnvOB1sTYg== dependencies: "@types/d3-array" "^3.0.3" "@types/d3-ease" "^3.0.0" From fc326a0aa6342eadb53d01783eaf1c7d99861b40 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 31 Aug 2023 19:31:09 +0100 Subject: [PATCH 23/41] Fix from mui public --- packages/toolpad-components/src/Chart.tsx | 91 +++++++++++------------ 1 file changed, 42 insertions(+), 49 deletions(-) diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 458b8b4e302..18fbf024424 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -17,7 +17,7 @@ import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; -// import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; +import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; import { errorFrom } from '@mui/toolpad-utils/errors'; import createBuiltin from './createBuiltin'; @@ -39,6 +39,10 @@ export interface ChartDataSeries> { export type ChartData = ChartDataSeries[]; +function hasOnlyNumbers(array: unknown[]): boolean { + return array.every((item) => typeof item === 'number'); +} + function getChartType(kind: ChartDataSeriesKind): 'line' | 'bar' | 'scatter' { switch (kind) { case 'bar': @@ -50,10 +54,6 @@ function getChartType(kind: ChartDataSeriesKind): 'line' | 'bar' | 'scatter' { } } -function hasOnlyNumbers(array: unknown[]): boolean { - return array.every((item) => typeof item === 'number'); -} - interface ChartProps extends ContainerProps { data?: ChartData; loading?: boolean; @@ -71,7 +71,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { } return dataSeries.data.map((dataSeriesPoint) => dataSeriesPoint[dataSeries.xKey!]); }) - .filter((value, index, array) => value && array.indexOf(value) === index) + .filter((value, index, array) => array.indexOf(value) === index) .sort((a: number | string, b: number | string) => { if (typeof a === 'number' && typeof b === 'number') { return (a as number) - (b as number); @@ -135,15 +135,31 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { const isDataVisible = !loading && !displayError; - const hasBarCharts = data.some((dataSeries) => dataSeries.kind === 'bar'); + const hasBarCharts = chartSeries.some( + (dataSeries) => dataSeries.type === 'bar' && dataSeries.data && hasOnlyNumbers(dataSeries.data), + ); + const hasLineCharts = chartSeries.some( + (dataSeries) => + dataSeries.type === 'line' && dataSeries.data && hasOnlyNumbers(dataSeries.data), + ); + const hasAreaCharts = chartSeries.some( + (dataSeries) => + dataSeries.type === 'line' && + dataSeries.data && + hasOnlyNumbers(dataSeries.data) && + dataSeries.area, + ); + const hasScatterCharts = chartSeries.some( + (dataSeries) => + dataSeries.type === 'scatter' && + dataSeries.data && + hasOnlyNumbers(dataSeries.data.map((point) => point.x)) && + hasOnlyNumbers(dataSeries.data.map((point) => point.y)), + ); - const hasNonCategoryXValues = xValues.some((xValue) => typeof xValue === 'number'); - const hasXOnlyIntegers = hasOnlyNumbers(xValues); + const hasOnlyNumberXValues = hasOnlyNumbers(xValues); - let xScaleType: ScaleName = 'linear'; - if (hasXOnlyIntegers) { - xScaleType = 'point'; - } + let xScaleType: ScaleName = 'point'; if (hasBarCharts) { xScaleType = 'band'; } @@ -174,8 +190,8 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { id: 'x', data: xValues, scaleType: xScaleType, - min: hasNonCategoryXValues ? Math.min(...(xValues as number[])) : undefined, - max: hasNonCategoryXValues ? Math.max(...(xValues as number[])) : undefined, + min: hasOnlyNumberXValues ? Math.min(...(xValues as number[])) : undefined, + max: hasOnlyNumberXValues ? Math.max(...(xValues as number[])) : undefined, }, ]} yAxis={ @@ -191,8 +207,11 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { }, ] } + margin={{ left: 80 }} sx={{ - '--ChartsLegend-rootSpacing': '25px', + '.MuiMarkElement-root': { + scale: '0.8', + }, }} > @@ -201,43 +220,17 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { position="left" axisId={firstDataSeries?.yAxisKey || 'y'} /> - {hasXOnlyIntegers ? ( + {hasBarCharts ? : null} + {hasLineCharts ? ( - {hasBarCharts ? : null} - {chartSeries.some( - (dataSeries) => - dataSeries.type === 'line' && dataSeries.data && hasOnlyNumbers(dataSeries.data), - ) ? ( - - ) : null} - {chartSeries.some( - (dataSeries) => - dataSeries.type === 'line' && - dataSeries.data && - hasOnlyNumbers(dataSeries.data) && - dataSeries.area, - ) ? ( - - ) : null} - {chartSeries.some( - (dataSeries) => - dataSeries.type === 'scatter' && - dataSeries.data && - hasOnlyNumbers(dataSeries.data.map((point) => point.x)) && - hasOnlyNumbers(dataSeries.data.map((point) => point.y)), - ) ? ( - - ) : null} - {chartSeries.some( - (dataSeries) => - dataSeries.type === 'line' && dataSeries.data && hasOnlyNumbers(dataSeries.data), - ) ? ( - - ) : null} + + ) : null} + {hasAreaCharts ? : null} + {hasScatterCharts ? : null} - {/* */} + ) : null} From 054d4b54344fc1f12a9341bd4811e0e6bacddbce Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 31 Aug 2023 19:51:31 +0100 Subject: [PATCH 24/41] Add recharts to optimizeDeps again --- packages/toolpad-app/src/server/toolpadAppBuilder.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/toolpad-app/src/server/toolpadAppBuilder.ts b/packages/toolpad-app/src/server/toolpadAppBuilder.ts index 649a632d17d..0173c9ca46d 100644 --- a/packages/toolpad-app/src/server/toolpadAppBuilder.ts +++ b/packages/toolpad-app/src/server/toolpadAppBuilder.ts @@ -292,6 +292,7 @@ export function createViteConfig({ 'react-router-dom', 'react/jsx-dev-runtime', 'react/jsx-runtime', + 'recharts', 'superjson', 'zod', ], From cc929d06bbde7502f5dd9b90ce95e51211d86b18 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 31 Aug 2023 20:30:31 +0100 Subject: [PATCH 25/41] Fix z-index and something else I don't remember --- packages/toolpad-components/src/Chart.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 18fbf024424..6bbec23cf23 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -207,7 +207,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { }, ] } - margin={{ left: 80 }} + margin={{ left: 80, top: 60 }} sx={{ '.MuiMarkElement-root': { scale: '0.8', @@ -221,13 +221,13 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { axisId={firstDataSeries?.yAxisKey || 'y'} /> {hasBarCharts ? : null} + {hasAreaCharts ? : null} {hasLineCharts ? ( ) : null} - {hasAreaCharts ? : null} {hasScatterCharts ? : null} From 5a0087586afa0e42b48b92b2df6f0ab4c1f1050a Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 1 Sep 2023 16:33:26 +0100 Subject: [PATCH 26/41] Update packages/toolpad-app/src/server/toolpadAppBuilder.ts Co-authored-by: Olivier Tassinari Signed-off-by: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> --- packages/toolpad-app/src/server/toolpadAppBuilder.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/toolpad-app/src/server/toolpadAppBuilder.ts b/packages/toolpad-app/src/server/toolpadAppBuilder.ts index 0173c9ca46d..b6d985bc0c7 100644 --- a/packages/toolpad-app/src/server/toolpadAppBuilder.ts +++ b/packages/toolpad-app/src/server/toolpadAppBuilder.ts @@ -308,6 +308,7 @@ export function createViteConfig({ root, plugins: [ react(), + // TODO, remove once https://github.com/mui/mui-x/pull/9826 is fixed viteCommonjs(), toolpadVitePlugin({ root, base, getComponents }), ...plugins, From 209ecd289420e4d59f7e063df034fe9faf1b2450 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 1 Sep 2023 18:29:01 +0100 Subject: [PATCH 27/41] Revert back to circular progress spinner --- .../src/server/toolpadAppBuilder.ts | 2 +- .../toolpad-app/src/toolpad/vite.config.ts | 1 + packages/toolpad-components/src/Chart.tsx | 19 ++++++++++++------- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/toolpad-app/src/server/toolpadAppBuilder.ts b/packages/toolpad-app/src/server/toolpadAppBuilder.ts index b6d985bc0c7..3016dee0983 100644 --- a/packages/toolpad-app/src/server/toolpadAppBuilder.ts +++ b/packages/toolpad-app/src/server/toolpadAppBuilder.ts @@ -308,7 +308,7 @@ export function createViteConfig({ root, plugins: [ react(), - // TODO, remove once https://github.com/mui/mui-x/pull/9826 is fixed + // @TODO: remove viteCommonjs plugin once https://github.com/mui/mui-x/pull/9826 is fixed viteCommonjs(), toolpadVitePlugin({ root, base, getComponents }), ...plugins, diff --git a/packages/toolpad-app/src/toolpad/vite.config.ts b/packages/toolpad-app/src/toolpad/vite.config.ts index 8100d53f7c7..25de45ed77d 100644 --- a/packages/toolpad-app/src/toolpad/vite.config.ts +++ b/packages/toolpad-app/src/toolpad/vite.config.ts @@ -13,6 +13,7 @@ const TOOLPAD_BUILD = process.env.GIT_SHA1?.slice(0, 7) || 'dev'; // https://vitejs.dev/config/ export default defineConfig({ base: '/_toolpad/', + // @TODO: remove viteCommonjs plugin once https://github.com/mui/mui-x/pull/9826 is fixed plugins: [react(), viteCommonjs()], build: { outDir: path.resolve(__dirname, '../../dist/editor'), diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 6bbec23cf23..cb261f90cc2 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Container, ContainerProps, Skeleton } from '@mui/material'; +import { Container, ContainerProps, CircularProgress } from '@mui/material'; import { BarPlot, @@ -174,12 +174,17 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { > {loading && !error ? ( - +

+ +
) : null} {isDataVisible ? ( Date: Fri, 1 Sep 2023 18:33:45 +0100 Subject: [PATCH 28/41] Handle null data --- packages/toolpad-components/src/Chart.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index cb261f90cc2..39bbeb01982 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -55,7 +55,7 @@ function getChartType(kind: ChartDataSeriesKind): 'line' | 'bar' | 'scatter' { } interface ChartProps extends ContainerProps { - data?: ChartData; + data?: ChartData | null; loading?: boolean; error?: Error | string; height: number; @@ -64,7 +64,7 @@ interface ChartProps extends ContainerProps { function Chart({ data = [], loading, error, height, sx }: ChartProps) { const xValues = React.useMemo( () => - data + (data ?? []) .flatMap((dataSeries) => { if (!dataSeries.xKey || !dataSeries.data) { return []; @@ -83,7 +83,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { const chartSeries: (BarSeriesType | LineSeriesType | ScatterSeriesType)[] = React.useMemo( () => - data + (data ?? []) .filter((dataSeries) => dataSeries.xKey && dataSeries.yKey) .map((dataSeries) => { const yValues = xValues.map((xValue) => { From a6edeab25fc48d96ee3be9d554d024ef64caaab0 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 1 Sep 2023 18:57:20 +0100 Subject: [PATCH 29/41] This does nothing after all --- packages/toolpad-components/src/Chart.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 39bbeb01982..cb261f90cc2 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -55,7 +55,7 @@ function getChartType(kind: ChartDataSeriesKind): 'line' | 'bar' | 'scatter' { } interface ChartProps extends ContainerProps { - data?: ChartData | null; + data?: ChartData; loading?: boolean; error?: Error | string; height: number; @@ -64,7 +64,7 @@ interface ChartProps extends ContainerProps { function Chart({ data = [], loading, error, height, sx }: ChartProps) { const xValues = React.useMemo( () => - (data ?? []) + data .flatMap((dataSeries) => { if (!dataSeries.xKey || !dataSeries.data) { return []; @@ -83,7 +83,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { const chartSeries: (BarSeriesType | LineSeriesType | ScatterSeriesType)[] = React.useMemo( () => - (data ?? []) + data .filter((dataSeries) => dataSeries.xKey && dataSeries.yKey) .map((dataSeries) => { const yValues = xValues.map((xValue) => { From 71feabd9f4ef9e50d22e523d5412d10aca49654d Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Mon, 4 Sep 2023 20:21:07 +0100 Subject: [PATCH 30/41] Update yarn.lock --- yarn.lock | 158 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 154 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index fa437d28838..c5ad7203e1d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1536,6 +1536,11 @@ resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.2.tgz#3fc4f0fa026057fe885e4a180b3956e704f1ceaa" integrity sha512-mLfp0ziRPOLSTek0Gd9T5B8AtzKAkoZE70fneiiyPlSnUKKI4lp+mGEnQXcQEHLJAcIYDPSyBvsUbKUG2ri/XQ== +"@esbuild/linux-loong64@0.14.54": + version "0.14.54" + resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028" + integrity sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw== + "@esbuild/linux-loong64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d" @@ -2202,7 +2207,6 @@ "@mui/monorepo@https://github.com/mui/material-ui.git": version "5.14.7" - uid a71e6a07b80a230c302e687f6034b29eac3347f0 resolved "https://github.com/mui/material-ui.git#a71e6a07b80a230c302e687f6034b29eac3347f0" "@mui/private-theming@^5.14.7": @@ -2277,6 +2281,18 @@ prop-types "^15.8.1" react-is "^18.2.0" +"@mui/x-charts@6.0.0-alpha.8": + version "6.0.0-alpha.8" + resolved "https://registry.yarnpkg.com/@mui/x-charts/-/x-charts-6.0.0-alpha.8.tgz#94c414aaf242d34d56ca9fd290b1734214df1b11" + integrity sha512-9CKo0sdSaLvi/DBCD3IAX9C9P2ntN0evTghyTGcdWVm0VdT68CzpN8cm/f9J1c4z0fstOMjwJq8CfRPUyL9F8A== + dependencies: + "@babel/runtime" "^7.22.11" + clsx "^2.0.0" + d3-color "^3.1.0" + d3-scale "^4.0.2" + d3-shape "^3.2.0" + prop-types "^15.8.1" + "@mui/x-data-grid-pro@6.12.1": version "6.12.1" resolved "https://registry.yarnpkg.com/@mui/x-data-grid-pro/-/x-data-grid-pro-6.12.1.tgz#5059786f0567bdf58c4ed89a1a1a860dd70efe0f" @@ -2664,6 +2680,13 @@ dependencies: "@octokit/openapi-types" "^18.0.0" +"@originjs/vite-plugin-commonjs@1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@originjs/vite-plugin-commonjs/-/vite-plugin-commonjs-1.0.3.tgz#2e3fb11ec78847da9422b79c103953f94d667f09" + integrity sha512-KuEXeGPptM2lyxdIEJ4R11+5ztipHoE7hy8ClZt3PYaOVQ/pyngd2alaSrPnwyFeOW1UagRBaQ752aA1dTMdOQ== + dependencies: + esbuild "^0.14.14" + "@parcel/watcher@2.0.4": version "2.0.4" resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.0.4.tgz#f300fef4cc38008ff4b8c29d92588eced3ce014b" @@ -5639,7 +5662,7 @@ csstype@3.1.2, csstype@^3.0.2, csstype@^3.1.2: dependencies: internmap "1 - 2" -"d3-color@1 - 3": +"d3-color@1 - 3", d3-color@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2" integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA== @@ -5677,7 +5700,7 @@ d3-scale@^4.0.2: d3-time "2.1.1 - 3" d3-time-format "2 - 4" -d3-shape@^3.1.0: +d3-shape@^3.1.0, d3-shape@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5" integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA== @@ -6328,6 +6351,106 @@ es7-shim@^6.0.0: string.prototype.trimleft "^2.0.0" string.prototype.trimright "^2.0.0" +esbuild-android-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz#505f41832884313bbaffb27704b8bcaa2d8616be" + integrity sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ== + +esbuild-android-arm64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz#8ce69d7caba49646e009968fe5754a21a9871771" + integrity sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg== + +esbuild-darwin-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz#24ba67b9a8cb890a3c08d9018f887cc221cdda25" + integrity sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug== + +esbuild-darwin-arm64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz#3f7cdb78888ee05e488d250a2bdaab1fa671bf73" + integrity sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw== + +esbuild-freebsd-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz#09250f997a56ed4650f3e1979c905ffc40bbe94d" + integrity sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg== + +esbuild-freebsd-arm64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz#bafb46ed04fc5f97cbdb016d86947a79579f8e48" + integrity sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q== + +esbuild-linux-32@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz#e2a8c4a8efdc355405325033fcebeb941f781fe5" + integrity sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw== + +esbuild-linux-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz#de5fdba1c95666cf72369f52b40b03be71226652" + integrity sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg== + +esbuild-linux-arm64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz#dae4cd42ae9787468b6a5c158da4c84e83b0ce8b" + integrity sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig== + +esbuild-linux-arm@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz#a2c1dff6d0f21dbe8fc6998a122675533ddfcd59" + integrity sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw== + +esbuild-linux-mips64le@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz#d9918e9e4cb972f8d6dae8e8655bf9ee131eda34" + integrity sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw== + +esbuild-linux-ppc64le@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz#3f9a0f6d41073fb1a640680845c7de52995f137e" + integrity sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ== + +esbuild-linux-riscv64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz#618853c028178a61837bc799d2013d4695e451c8" + integrity sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg== + +esbuild-linux-s390x@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz#d1885c4c5a76bbb5a0fe182e2c8c60eb9e29f2a6" + integrity sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA== + +esbuild-netbsd-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz#69ae917a2ff241b7df1dbf22baf04bd330349e81" + integrity sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w== + +esbuild-openbsd-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz#db4c8495287a350a6790de22edea247a57c5d47b" + integrity sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw== + +esbuild-sunos-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz#54287ee3da73d3844b721c21bc80c1dc7e1bf7da" + integrity sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw== + +esbuild-windows-32@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz#f8aaf9a5667630b40f0fb3aa37bf01bbd340ce31" + integrity sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w== + +esbuild-windows-64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz#bf54b51bd3e9b0f1886ffdb224a4176031ea0af4" + integrity sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ== + +esbuild-windows-arm64@0.14.54: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz#937d15675a15e4b0e4fafdbaa3a01a776a2be982" + integrity sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg== + esbuild@0.19.2: version "0.19.2" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.2.tgz#b1541828a89dfb6f840d38538767c6130dca2aac" @@ -6356,6 +6479,33 @@ esbuild@0.19.2: "@esbuild/win32-ia32" "0.19.2" "@esbuild/win32-x64" "0.19.2" +esbuild@^0.14.14: + version "0.14.54" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.54.tgz#8b44dcf2b0f1a66fc22459943dccf477535e9aa2" + integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA== + optionalDependencies: + "@esbuild/linux-loong64" "0.14.54" + esbuild-android-64 "0.14.54" + esbuild-android-arm64 "0.14.54" + esbuild-darwin-64 "0.14.54" + esbuild-darwin-arm64 "0.14.54" + esbuild-freebsd-64 "0.14.54" + esbuild-freebsd-arm64 "0.14.54" + esbuild-linux-32 "0.14.54" + esbuild-linux-64 "0.14.54" + esbuild-linux-arm "0.14.54" + esbuild-linux-arm64 "0.14.54" + esbuild-linux-mips64le "0.14.54" + esbuild-linux-ppc64le "0.14.54" + esbuild-linux-riscv64 "0.14.54" + esbuild-linux-s390x "0.14.54" + esbuild-netbsd-64 "0.14.54" + esbuild-openbsd-64 "0.14.54" + esbuild-sunos-64 "0.14.54" + esbuild-windows-32 "0.14.54" + esbuild-windows-64 "0.14.54" + esbuild-windows-arm64 "0.14.54" + esbuild@^0.18.10, esbuild@^0.18.2, esbuild@~0.18.20: version "0.18.20" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6" @@ -14239,4 +14389,4 @@ zod@3.21.4: zod@3.22.2: version "3.22.2" resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.2.tgz#3add8c682b7077c05ac6f979fea6998b573e157b" - integrity sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg== \ No newline at end of file + integrity sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg== From f708acb7f197366ed43e32c46399c36801aae3c0 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 19 Sep 2023 17:31:14 +0100 Subject: [PATCH 31/41] Remove vite commonjs plugin, update x charts library --- package.json | 2 +- packages/toolpad-app/package.json | 3 +- .../src/server/toolpadAppBuilder.ts | 9 +- .../toolpad-app/src/toolpad/vite.config.ts | 4 +- packages/toolpad-components/package.json | 2 +- yarn.lock | 152 +----------------- 6 files changed, 12 insertions(+), 160 deletions(-) diff --git a/package.json b/package.json index 0029873b4b5..4853d03ecbe 100644 --- a/package.json +++ b/package.json @@ -44,7 +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.8", + "@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", diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index c40a22a214f..e739fdd6741 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -56,13 +56,12 @@ "@mui/toolpad-utils": "0.1.28", "@mui/types": "7.2.4", "@mui/utils": "5.14.10", - "@mui/x-charts": "6.0.0-alpha.8", + "@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", "@mui/x-date-pickers-pro": "6.14.0", "@mui/x-tree-view": "6.0.0-alpha.3", - "@originjs/vite-plugin-commonjs": "1.0.3", "@tanstack/react-query": "4.35.3", "@tanstack/react-query-devtools": "4.35.3", "@types/cors": "2.8.14", diff --git a/packages/toolpad-app/src/server/toolpadAppBuilder.ts b/packages/toolpad-app/src/server/toolpadAppBuilder.ts index 87ce44715f6..8ec71428bb7 100644 --- a/packages/toolpad-app/src/server/toolpadAppBuilder.ts +++ b/packages/toolpad-app/src/server/toolpadAppBuilder.ts @@ -2,7 +2,6 @@ import * as path from 'path'; import { InlineConfig, Plugin, build } from 'vite'; import react from '@vitejs/plugin-react'; import { indent } from '@mui/toolpad-utils/strings'; -import { viteCommonjs } from '@originjs/vite-plugin-commonjs'; import type { ComponentEntry } from './localMode'; import { INITIAL_STATE_WINDOW_PROPERTY } from './toolpadAppServer'; @@ -280,13 +279,7 @@ export function createViteConfig({ appType: 'custom', logLevel: 'info', root, - plugins: [ - react(), - // @TODO: remove viteCommonjs plugin once https://github.com/mui/mui-x/pull/9826 is fixed - viteCommonjs(), - toolpadVitePlugin({ root, base, getComponents }), - ...plugins, - ], + plugins: [react(), toolpadVitePlugin({ root, base, getComponents }), ...plugins], base, define: { 'process.env.NODE_ENV': `'${mode}'`, diff --git a/packages/toolpad-app/src/toolpad/vite.config.ts b/packages/toolpad-app/src/toolpad/vite.config.ts index 6983c68f114..10a246623e5 100644 --- a/packages/toolpad-app/src/toolpad/vite.config.ts +++ b/packages/toolpad-app/src/toolpad/vite.config.ts @@ -2,7 +2,6 @@ import * as path from 'path'; import * as fs from 'fs'; import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import { viteCommonjs } from '@originjs/vite-plugin-commonjs'; const pkgJsonContent = fs.readFileSync(path.resolve(__dirname, '../../package.json'), { encoding: 'utf-8', @@ -13,8 +12,7 @@ const TOOLPAD_BUILD = process.env.GIT_SHA1?.slice(0, 7) || 'dev'; // https://vitejs.dev/config/ export default defineConfig({ base: '/_toolpad/', - // @TODO: remove viteCommonjs plugin once https://github.com/mui/mui-x/pull/9826 is fixed - plugins: [react(), viteCommonjs()], + plugins: [react()], build: { outDir: path.resolve(__dirname, '../../dist/editor'), emptyOutDir: true, diff --git a/packages/toolpad-components/package.json b/packages/toolpad-components/package.json index ec6272e64aa..a65a835fdc0 100644 --- a/packages/toolpad-components/package.json +++ b/packages/toolpad-components/package.json @@ -43,7 +43,7 @@ "@mui/material": "5.14.10", "@mui/toolpad-core": "0.1.28", "@mui/toolpad-utils": "0.1.28", - "@mui/x-charts": "6.0.0-alpha.8", + "@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", diff --git a/yarn.lock b/yarn.lock index f2b06f241aa..4828f33335b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1217,7 +1217,7 @@ core-js "^2.6.12" regenerator-runtime "^0.14.0" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.11", "@babel/runtime@^7.22.15", "@babel/runtime@^7.22.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.15", "@babel/runtime@^7.22.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8" integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA== @@ -1536,11 +1536,6 @@ resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.3.tgz#5813baf70e406304e8931b200e39d0293b488073" integrity sha512-7XlCKCA0nWcbvYpusARWkFjRQNWNGlt45S+Q18UeS///K6Aw8bB2FKYe9mhVWy/XLShvCweOLZPrnMswIaDXQA== -"@esbuild/linux-loong64@0.14.54": - version "0.14.54" - resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028" - integrity sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw== - "@esbuild/linux-loong64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d" @@ -2278,12 +2273,13 @@ prop-types "^15.8.1" react-is "^18.2.0" -"@mui/x-charts@6.0.0-alpha.8": - version "6.0.0-alpha.8" - resolved "https://registry.yarnpkg.com/@mui/x-charts/-/x-charts-6.0.0-alpha.8.tgz#94c414aaf242d34d56ca9fd290b1734214df1b11" - integrity sha512-9CKo0sdSaLvi/DBCD3IAX9C9P2ntN0evTghyTGcdWVm0VdT68CzpN8cm/f9J1c4z0fstOMjwJq8CfRPUyL9F8A== +"@mui/x-charts@6.0.0-alpha.11": + version "6.0.0-alpha.11" + resolved "https://registry.yarnpkg.com/@mui/x-charts/-/x-charts-6.0.0-alpha.11.tgz#9187efb51fe810dca62e7fee78e1d4dba6cb5d10" + integrity sha512-0Jlo65j42fr1kXfZzcYiJfY4tboJWITS3SyeUgkG8maFJN/hL67Inwl2gCje0L1rq+QsYaCsrPkLlSJirEn01g== dependencies: - "@babel/runtime" "^7.22.11" + "@babel/runtime" "^7.22.15" + "@mui/base" "^5.0.0-beta.14" clsx "^2.0.0" d3-color "^3.1.0" d3-scale "^4.0.2" @@ -2704,13 +2700,6 @@ dependencies: "@octokit/openapi-types" "^18.0.0" -"@originjs/vite-plugin-commonjs@1.0.3": - version "1.0.3" - resolved "https://registry.yarnpkg.com/@originjs/vite-plugin-commonjs/-/vite-plugin-commonjs-1.0.3.tgz#2e3fb11ec78847da9422b79c103953f94d667f09" - integrity sha512-KuEXeGPptM2lyxdIEJ4R11+5ztipHoE7hy8ClZt3PYaOVQ/pyngd2alaSrPnwyFeOW1UagRBaQ752aA1dTMdOQ== - dependencies: - esbuild "^0.14.14" - "@parcel/watcher@2.0.4": version "2.0.4" resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.0.4.tgz#f300fef4cc38008ff4b8c29d92588eced3ce014b" @@ -6337,106 +6326,6 @@ es7-shim@^6.0.0: string.prototype.trimleft "^2.0.0" string.prototype.trimright "^2.0.0" -esbuild-android-64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz#505f41832884313bbaffb27704b8bcaa2d8616be" - integrity sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ== - -esbuild-android-arm64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz#8ce69d7caba49646e009968fe5754a21a9871771" - integrity sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg== - -esbuild-darwin-64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz#24ba67b9a8cb890a3c08d9018f887cc221cdda25" - integrity sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug== - -esbuild-darwin-arm64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz#3f7cdb78888ee05e488d250a2bdaab1fa671bf73" - integrity sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw== - -esbuild-freebsd-64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz#09250f997a56ed4650f3e1979c905ffc40bbe94d" - integrity sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg== - -esbuild-freebsd-arm64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz#bafb46ed04fc5f97cbdb016d86947a79579f8e48" - integrity sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q== - -esbuild-linux-32@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz#e2a8c4a8efdc355405325033fcebeb941f781fe5" - integrity sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw== - -esbuild-linux-64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz#de5fdba1c95666cf72369f52b40b03be71226652" - integrity sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg== - -esbuild-linux-arm64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz#dae4cd42ae9787468b6a5c158da4c84e83b0ce8b" - integrity sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig== - -esbuild-linux-arm@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz#a2c1dff6d0f21dbe8fc6998a122675533ddfcd59" - integrity sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw== - -esbuild-linux-mips64le@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz#d9918e9e4cb972f8d6dae8e8655bf9ee131eda34" - integrity sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw== - -esbuild-linux-ppc64le@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz#3f9a0f6d41073fb1a640680845c7de52995f137e" - integrity sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ== - -esbuild-linux-riscv64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz#618853c028178a61837bc799d2013d4695e451c8" - integrity sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg== - -esbuild-linux-s390x@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz#d1885c4c5a76bbb5a0fe182e2c8c60eb9e29f2a6" - integrity sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA== - -esbuild-netbsd-64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz#69ae917a2ff241b7df1dbf22baf04bd330349e81" - integrity sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w== - -esbuild-openbsd-64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz#db4c8495287a350a6790de22edea247a57c5d47b" - integrity sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw== - -esbuild-sunos-64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz#54287ee3da73d3844b721c21bc80c1dc7e1bf7da" - integrity sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw== - -esbuild-windows-32@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz#f8aaf9a5667630b40f0fb3aa37bf01bbd340ce31" - integrity sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w== - -esbuild-windows-64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz#bf54b51bd3e9b0f1886ffdb224a4176031ea0af4" - integrity sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ== - -esbuild-windows-arm64@0.14.54: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz#937d15675a15e4b0e4fafdbaa3a01a776a2be982" - integrity sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg== - esbuild@0.19.3: version "0.19.3" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.3.tgz#d9268cd23358eef9d76146f184e0c55ff8da7bb6" @@ -6465,33 +6354,6 @@ esbuild@0.19.3: "@esbuild/win32-ia32" "0.19.3" "@esbuild/win32-x64" "0.19.3" -esbuild@^0.14.14: - version "0.14.54" - resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.54.tgz#8b44dcf2b0f1a66fc22459943dccf477535e9aa2" - integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA== - optionalDependencies: - "@esbuild/linux-loong64" "0.14.54" - esbuild-android-64 "0.14.54" - esbuild-android-arm64 "0.14.54" - esbuild-darwin-64 "0.14.54" - esbuild-darwin-arm64 "0.14.54" - esbuild-freebsd-64 "0.14.54" - esbuild-freebsd-arm64 "0.14.54" - esbuild-linux-32 "0.14.54" - esbuild-linux-64 "0.14.54" - esbuild-linux-arm "0.14.54" - esbuild-linux-arm64 "0.14.54" - esbuild-linux-mips64le "0.14.54" - esbuild-linux-ppc64le "0.14.54" - esbuild-linux-riscv64 "0.14.54" - esbuild-linux-s390x "0.14.54" - esbuild-netbsd-64 "0.14.54" - esbuild-openbsd-64 "0.14.54" - esbuild-sunos-64 "0.14.54" - esbuild-windows-32 "0.14.54" - esbuild-windows-64 "0.14.54" - esbuild-windows-arm64 "0.14.54" - esbuild@^0.18.10, esbuild@^0.18.2, esbuild@~0.18.20: version "0.18.20" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6" From 8dc92d98d8449bec5024f29b3e9121a9b789927a Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 19 Sep 2023 18:57:08 +0100 Subject: [PATCH 32/41] Fix tests and remove all children: [] --- packages/toolpad-app/jest.config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/toolpad-app/jest.config.js b/packages/toolpad-app/jest.config.js index dbce472cef5..62ebe8d3fe2 100644 --- a/packages/toolpad-app/jest.config.js +++ b/packages/toolpad-app/jest.config.js @@ -17,6 +17,8 @@ const transpiledModules = [ 'd3-time-format', 'd3-shape', 'd3-path', + '@mui/x-charts/esm', + '@babel/runtime/helpers/esm', ]; module.exports = /** @type {import('jest').Config} */ ({ From 7d7a22ddfa25a4f44b910aa76d2ff418c3866cdb Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 19 Sep 2023 18:59:10 +0100 Subject: [PATCH 33/41] Remove children: [] --- .../fixture/toolpad/pages/basic/page.yml | 27 +++++-------------- .../toolpad/pages/extractedTypes/page.yml | 2 -- .../toolpad/pages/serialization/page.yml | 3 --- .../toolpad/pages/chart/page.yml | 1 - .../toolpad/pages/loadingAndError/page.yml | 4 +-- 5 files changed, 8 insertions(+), 29 deletions(-) diff --git a/test/integration/backend-basic/fixture/toolpad/pages/basic/page.yml b/test/integration/backend-basic/fixture/toolpad/pages/basic/page.yml index 412e572986e..fa35f60b18f 100644 --- a/test/integration/backend-basic/fixture/toolpad/pages/basic/page.yml +++ b/test/integration/backend-basic/fixture/toolpad/pages/basic/page.yml @@ -6,7 +6,6 @@ spec: content: - component: Text name: typography - children: [] layout: columnSize: 1 props: @@ -15,7 +14,6 @@ spec: `hello, message: ${hello.data.message}` - component: Text name: typography1 - children: [] layout: columnSize: 1 props: @@ -24,7 +22,6 @@ spec: `throws, error.message: ${throws.error}` - component: Text name: typography2 - children: [] layout: columnSize: 1 props: @@ -33,7 +30,7 @@ spec: `throws, data ${throws.error ? "had an error" : throws.data}` - component: Text name: text4 - children: [] + layout: columnSize: 1 props: @@ -42,7 +39,6 @@ spec: `throws, data ${throwsError1.data}` - component: DataGrid name: dataGrid - children: [] layout: columnSize: 1 props: @@ -51,7 +47,6 @@ spec: throws.data - component: Text name: typography3 - children: [] layout: columnSize: 1 props: @@ -67,17 +62,16 @@ spec: value: $$jsExpression: | `echo, secret: ${echo.data.secrets.bar}` - children: [] + - component: Text name: typography5 props: value: $$jsExpression: | `echo, secret not in .env: ${echo.data.secrets.baz}` - children: [] + - component: Text name: text5 - children: [] layout: columnSize: 1 props: @@ -85,8 +79,7 @@ spec: $$jsExpression: | edited.data - component: Button - name: button - children: [] + name: button layout: columnSize: 1 props: @@ -96,8 +89,7 @@ spec: onClick: $$jsExpressionAction: manualQuery.call() - component: Text - name: text1 - children: [] + name: text1 layout: columnSize: 1 props: @@ -115,17 +107,16 @@ spec: $$jsExpressionAction: |- await increment.call() getGlobal.refetch() - children: [] + - component: Text name: text props: value: $$jsExpression: | `global value: ${getGlobal.data}` - children: [] + - component: Text name: text3 - children: [] layout: columnSize: 1 props: @@ -134,7 +125,6 @@ spec: `Propagated error: ${errorInput.error}` - component: Text name: text2 - children: [] layout: columnSize: 1 props: @@ -144,7 +134,6 @@ spec: ${propagatedLoading.isLoading}` - component: Text name: text6 - children: [] layout: columnSize: 1 props: @@ -153,7 +142,6 @@ spec: `Raw text: ${getRawText.data}` - component: Text name: text7 - children: [] layout: columnSize: 1 props: @@ -162,7 +150,6 @@ spec: `my custom cookie: ${context.data.cookies.MY_TOOLPAD_COOKIE}` - component: Button name: button2 - children: [] props: content: set cookie onClick: diff --git a/test/integration/backend-basic/fixture/toolpad/pages/extractedTypes/page.yml b/test/integration/backend-basic/fixture/toolpad/pages/extractedTypes/page.yml index 0fe93d9ed05..694a0dcc04d 100644 --- a/test/integration/backend-basic/fixture/toolpad/pages/extractedTypes/page.yml +++ b/test/integration/backend-basic/fixture/toolpad/pages/extractedTypes/page.yml @@ -7,7 +7,6 @@ spec: content: - component: Text name: text - children: [] layout: columnSize: 1 props: @@ -16,7 +15,6 @@ spec: `bare function with parameters: ${bareWithParams.data?.message}` - component: Text name: text1 - children: [] layout: columnSize: 1 props: diff --git a/test/integration/backend-basic/fixture/toolpad/pages/serialization/page.yml b/test/integration/backend-basic/fixture/toolpad/pages/serialization/page.yml index f535c7625df..0a6605fc3e5 100644 --- a/test/integration/backend-basic/fixture/toolpad/pages/serialization/page.yml +++ b/test/integration/backend-basic/fixture/toolpad/pages/serialization/page.yml @@ -20,7 +20,6 @@ spec: content: - component: Text name: text - children: [] layout: columnSize: 1 props: @@ -29,7 +28,6 @@ spec: `Circlular property: ${circularData.data.a}` - component: Text name: text1 - children: [] layout: columnSize: 1 props: @@ -39,7 +37,6 @@ spec: ${nonCircularData.data.a1.b}:${nonCircularData.data.a2.b}` - component: Text name: text2 - children: [] layout: columnSize: 1 props: diff --git a/test/integration/components/fixture-chart/toolpad/pages/chart/page.yml b/test/integration/components/fixture-chart/toolpad/pages/chart/page.yml index ec0ba2afe13..321efe9ec82 100644 --- a/test/integration/components/fixture-chart/toolpad/pages/chart/page.yml +++ b/test/integration/components/fixture-chart/toolpad/pages/chart/page.yml @@ -7,7 +7,6 @@ spec: content: - component: Chart name: chart - children: [] layout: columnSize: 1 props: diff --git a/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml b/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml index 46d43f2b487..73e6803cb48 100644 --- a/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml +++ b/test/integration/components/fixture-chart/toolpad/pages/loadingAndError/page.yml @@ -20,7 +20,6 @@ spec: color: '#1976d2' xKey: '' yKey: '' - children: [] - component: Chart name: chart1 props: @@ -32,8 +31,7 @@ spec: error.data color: '#1976d2' xKey: '' - yKey: '' - children: [] + yKey: '' queries: - name: alwaysLoading query: From c8fe7780e1d54dc9657310b231f63fee881a9f33 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 27 Sep 2023 19:35:46 +0100 Subject: [PATCH 34/41] Update library --- package.json | 2 +- packages/toolpad-app/package.json | 2 +- packages/toolpad-components/package.json | 2 +- yarn.lock | 8 ++++---- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index b10822530f0..00d07339ffc 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "devDependencies": { "@argos-ci/core": "0.12.0", "@mui/monorepo": "https://github.com/mui/material-ui.git", - "@mui/x-charts": "6.0.0-alpha.11", + "@mui/x-charts": "6.0.0-alpha.12", "@next/eslint-plugin-next": "13.5.2", "@playwright/test": "1.38.1", "@testing-library/react": "14.0.0", diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index 748374f0b8d..b22eda3f1f6 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -56,7 +56,7 @@ "@mui/toolpad-utils": "0.1.29", "@mui/types": "7.2.4", "@mui/utils": "5.14.11", - "@mui/x-charts": "6.0.0-alpha.11", + "@mui/x-charts": "6.0.0-alpha.12", "@mui/x-data-grid": "6.14.0", "@mui/x-data-grid-pro": "6.14.0", "@mui/x-date-pickers": "6.14.0", diff --git a/packages/toolpad-components/package.json b/packages/toolpad-components/package.json index 7119b013bde..a95ff359ebe 100644 --- a/packages/toolpad-components/package.json +++ b/packages/toolpad-components/package.json @@ -43,7 +43,7 @@ "@mui/material": "5.14.11", "@mui/toolpad-core": "0.1.29", "@mui/toolpad-utils": "0.1.29", - "@mui/x-charts": "6.0.0-alpha.11", + "@mui/x-charts": "6.0.0-alpha.12", "@mui/x-data-grid-pro": "6.14.0", "@mui/x-date-pickers": "6.14.0", "@mui/x-license-pro": "6.10.2", diff --git a/yarn.lock b/yarn.lock index 0a1946c7ea2..a29162f7468 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2037,10 +2037,10 @@ prop-types "^15.8.1" react-is "^18.2.0" -"@mui/x-charts@6.0.0-alpha.11": - version "6.0.0-alpha.11" - resolved "https://registry.yarnpkg.com/@mui/x-charts/-/x-charts-6.0.0-alpha.11.tgz#9187efb51fe810dca62e7fee78e1d4dba6cb5d10" - integrity sha512-0Jlo65j42fr1kXfZzcYiJfY4tboJWITS3SyeUgkG8maFJN/hL67Inwl2gCje0L1rq+QsYaCsrPkLlSJirEn01g== +"@mui/x-charts@6.0.0-alpha.12": + version "6.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/@mui/x-charts/-/x-charts-6.0.0-alpha.12.tgz#4d9dbbc8ae684f5a5f04134867dd61d6223f890c" + integrity sha512-zA7xhOzGt/xgIdnA2PwZM+tKUzCIwUBf6ltK0o8NA3VHAgxbG0yvvLPID+xKqLpl2gaNQ2E0YmysDH1yKDxKCA== dependencies: "@babel/runtime" "^7.22.15" "@mui/base" "^5.0.0-beta.14" From e196afabb374d2e28a8ce252b7ddd3e9563295a8 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 27 Sep 2023 19:40:19 +0100 Subject: [PATCH 35/41] Remove jest config --- packages/toolpad-app/jest.config.js | 30 ------------------- .../src/server/toolpadAppBuilder.ts | 8 ----- 2 files changed, 38 deletions(-) delete mode 100644 packages/toolpad-app/jest.config.js diff --git a/packages/toolpad-app/jest.config.js b/packages/toolpad-app/jest.config.js deleted file mode 100644 index 62ebe8d3fe2..00000000000 --- a/packages/toolpad-app/jest.config.js +++ /dev/null @@ -1,30 +0,0 @@ -const transpiledModules = [ - 'get-port', - 'lodash-es', - 'nanoid', - 'fractional-indexing', - 'node-fetch', - '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} */ ({ - transform: { - '^.+\\.(t|j)sx?$': '@swc/jest', - }, - setupFilesAfterEnv: ['/../../test/setupJest.ts'], - transformIgnorePatterns: [`node_modules/(?!(${transpiledModules.join('|')})/)`], -}); diff --git a/packages/toolpad-app/src/server/toolpadAppBuilder.ts b/packages/toolpad-app/src/server/toolpadAppBuilder.ts index 8ec71428bb7..8fe7cf7c1e7 100644 --- a/packages/toolpad-app/src/server/toolpadAppBuilder.ts +++ b/packages/toolpad-app/src/server/toolpadAppBuilder.ts @@ -233,14 +233,6 @@ 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', From 29d9eafff11cc0ac034f2a7244e2ccd8021ae067 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 18 Oct 2023 19:49:57 +0100 Subject: [PATCH 36/41] Update x-charts, show better xKey and yKey errors --- package.json | 2 +- packages/toolpad-app/package.json | 2 +- .../toolpad/propertyControls/ChartData.tsx | 30 +++++++++++++++++-- packages/toolpad-components/package.json | 2 +- yarn.lock | 11 ++++--- 5 files changed, 36 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 9f2a9fa8acc..2f0e2f255c5 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "devDependencies": { "@argos-ci/core": "0.12.0", "@mui/monorepo": "https://github.com/mui/material-ui.git", - "@mui/x-charts": "6.0.0-alpha.12", + "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/349587dd/@mui/x-charts", "@next/eslint-plugin-next": "13.5.5", "@playwright/test": "1.39.0", "@testing-library/react": "14.0.0", diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index d77daeceabb..2530f38d9b1 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -61,7 +61,7 @@ "@mui/toolpad-utils": "0.1.32", "@mui/types": "7.2.6", "@mui/utils": "5.14.14", - "@mui/x-charts": "6.0.0-alpha.12", + "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/349587dd/@mui/x-charts", "@mui/x-data-grid": "6.16.2", "@mui/x-data-grid-pro": "6.16.2", "@mui/x-date-pickers": "6.16.2", diff --git a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx index 37da668ed98..ce836d73064 100644 --- a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx +++ b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx @@ -337,14 +337,40 @@ function ChartDataPropEditor({ options={dataSeriesKeySuggestions[dataSeriesEditIndex]} value={editDataSeries?.xKey || ''} onInputChange={handleDataSeriesAutocompletePropChange(dataSeriesEditIndex, 'xKey')} - renderInput={(params) => } + renderInput={(params) => { + const keyExists = + !!editDataSeries?.xKey && + dataSeriesKeySuggestions[dataSeriesEditIndex].includes(editDataSeries.xKey); + + return ( + + ); + }} /> } + renderInput={(params) => { + const keyExists = + !!editDataSeries?.yKey && + dataSeriesKeySuggestions[dataSeriesEditIndex].includes(editDataSeries.yKey); + + return ( + + ); + }} /> Date: Wed, 18 Oct 2023 19:59:26 +0100 Subject: [PATCH 37/41] Fix showing of undefined values --- packages/toolpad-components/src/Chart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index cb261f90cc2..90fa98ed05a 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -71,7 +71,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { } return dataSeries.data.map((dataSeriesPoint) => dataSeriesPoint[dataSeries.xKey!]); }) - .filter((value, index, array) => array.indexOf(value) === index) + .filter((value, index, array) => value !== undefined && array.indexOf(value) === index) .sort((a: number | string, b: number | string) => { if (typeof a === 'number' && typeof b === 'number') { return (a as number) - (b as number); From fd6b67dd62b70bf2e8525ac17fafe43a5cd2a30c Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 18 Oct 2023 20:07:56 +0100 Subject: [PATCH 38/41] Fix automatic chart colors on duplicate --- .../toolpad-app/src/toolpad/propertyControls/ChartData.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx index ce836d73064..8314fecf560 100644 --- a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx +++ b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx @@ -100,9 +100,14 @@ function ChartDataPropEditor({ const handleDuplicateDataSeries = React.useCallback( (index: number) => () => { + const newDataSeriesCount = value.length + 1; + onChange([ ...value.slice(0, index + 1), - { ...value[index], color: defaultPalette[(index + 1) % defaultPalette.length] }, + { + ...value[index], + color: defaultPalette[(newDataSeriesCount - 1) % defaultPalette.length], + }, ...value.slice(index + 1), ]); }, From 1bfd9f04e0c5a1ecfcd92d3ac936014e8981bc90 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 19 Oct 2023 22:49:08 +0100 Subject: [PATCH 39/41] Fix width issues with long labels --- packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx index 8314fecf560..ade102eeee2 100644 --- a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx +++ b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx @@ -261,7 +261,7 @@ function ChartDataPropEditor({ From bc7e5fb63053977be339489fe1e3fc6e0b681a93 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 31 Oct 2023 18:57:56 +0000 Subject: [PATCH 40/41] Update x-charts --- package.json | 2 +- packages/toolpad-app/package.json | 2 +- .../toolpad/propertyControls/ChartData.tsx | 4 +- packages/toolpad-components/package.json | 2 +- packages/toolpad-components/src/Chart.tsx | 2 +- yarn.lock | 59 +++++++++++++++++-- 6 files changed, 59 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 1b13f8bdf86..709ffe76501 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "devDependencies": { "@argos-ci/core": "1.0.0", "@mui/monorepo": "https://github.com/mui/material-ui.git", - "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/349587dd/@mui/x-charts", + "@mui/x-charts": "6.0.0-alpha.17", "@next/eslint-plugin-next": "14.0.0", "@playwright/test": "1.39.0", "@testing-library/react": "14.0.0", diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index 9a960c65b3c..f7d4bfb8305 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -61,7 +61,7 @@ "@mui/toolpad-utils": "0.1.34", "@mui/types": "7.2.8", "@mui/utils": "5.14.16", - "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/349587dd/@mui/x-charts", + "@mui/x-charts": "6.0.0-alpha.17", "@mui/x-data-grid": "6.17.0", "@mui/x-data-grid-pro": "6.17.0", "@mui/x-date-pickers": "6.17.0", diff --git a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx index ade102eeee2..25ec689bcd6 100644 --- a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx +++ b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx @@ -344,7 +344,7 @@ function ChartDataPropEditor({ onInputChange={handleDataSeriesAutocompletePropChange(dataSeriesEditIndex, 'xKey')} renderInput={(params) => { const keyExists = - !!editDataSeries?.xKey && + !editDataSeries?.xKey || dataSeriesKeySuggestions[dataSeriesEditIndex].includes(editDataSeries.xKey); return ( @@ -364,7 +364,7 @@ function ChartDataPropEditor({ onInputChange={handleDataSeriesAutocompletePropChange(dataSeriesEditIndex, 'yKey')} renderInput={(params) => { const keyExists = - !!editDataSeries?.yKey && + !editDataSeries?.yKey || dataSeriesKeySuggestions[dataSeriesEditIndex].includes(editDataSeries.yKey); return ( diff --git a/packages/toolpad-components/package.json b/packages/toolpad-components/package.json index 11729649cfb..fcf9db5c3f7 100644 --- a/packages/toolpad-components/package.json +++ b/packages/toolpad-components/package.json @@ -43,7 +43,7 @@ "@mui/material": "5.14.16", "@mui/toolpad-core": "0.1.34", "@mui/toolpad-utils": "0.1.34", - "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/349587dd/@mui/x-charts", + "@mui/x-charts": "6.0.0-alpha.17", "@mui/x-data-grid-pro": "6.17.0", "@mui/x-date-pickers": "6.17.0", "@mui/x-license-pro": "6.10.2", diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 7f08145994e..6988ebf4e70 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -167,7 +167,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { const firstDataSeries = chartSeries[0]; return ( - + {loading && !error ? (
Date: Tue, 31 Oct 2023 19:52:02 +0000 Subject: [PATCH 41/41] Fix error and loading states --- packages/toolpad-components/src/Chart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx index 6988ebf4e70..a6defbd1d33 100644 --- a/packages/toolpad-components/src/Chart.tsx +++ b/packages/toolpad-components/src/Chart.tsx @@ -167,7 +167,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) { const firstDataSeries = chartSeries[0]; return ( - + {loading && !error ? (