[LineChart] initial LineChart

.circleci/config.yml

@@ -135,6 +135,11 @@ jobs:
  command: |
  pnpm prettier:all
  pnpm check-changes
+ - run:
+ name: '`pnpm proptypes` changes committed?'
+ command: |
+ pnpm proptypes
+ pnpm check-changes
  - run:
  name: '`pnpm jsonSchemas` changes committed?'
  command: |

.eslintignore

@@ -14,4 +14,5 @@ build
 /test/integration/*/fixture*/
 /test/visual/*/fixture*/
 
-.generated
+.generated
+.github

docs/data/toolpad/core/components/data-grid/data-grid.md

@@ -1,6 +1,6 @@
 ---
 productId: toolpad-core
-title: App Provider
+title: DataGrid
 components: DataGrid, DataProvider
 ---
 

docs/data/toolpad/core/components/line-chart/BasicLineChart.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { LineChart } from '@toolpad/core/LineChart';
+import Box from '@mui/material/Box';
+
+const myData = createDataProvider({
+ async getMany() {
+ return {
+ rows: [
+ { id: 1, value: 19 },
+ { id: 2, value: 34 },
+ { id: 3, value: 6 },
+ { id: 4, value: 14 },
+ { id: 5, value: 17 },
+ ],
+ };
+ },
+ fields: {
+ id: { label: 'ID' },
+ value: { label: 'Value', type: 'number' },
+ },
+});
+
+export default function BasicLineChart() {
+ return (
+ <Box sx={{ width: '100%' }}>
+ <LineChart height={250} dataProvider={myData} />
+ </Box>
+ );
+}

docs/data/toolpad/core/components/line-chart/BasicLineChart.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { LineChart } from '@toolpad/core/LineChart';
+import Box from '@mui/material/Box';
+
+const myData = createDataProvider({
+ async getMany() {
+ return {
+ rows: [
+ { id: 1, value: 19 },
+ { id: 2, value: 34 },
+ { id: 3, value: 6 },
+ { id: 4, value: 14 },
+ { id: 5, value: 17 },
+ ],
+ };
+ },
+ fields: {
+ id: { label: 'ID' },
+ value: { label: 'Value', type: 'number' },
+ },
+});
+
+export default function BasicLineChart() {
+ return (
+ <Box sx={{ width: '100%' }}>
+ <LineChart height={250} dataProvider={myData} />
+ </Box>
+ );
+}

docs/data/toolpad/core/components/line-chart/BasicLineChart.tsx.preview

@@ -0,0 +1 @@
+<LineChart height={250} dataProvider={myData} />

docs/data/toolpad/core/components/line-chart/CustomizedLineChart.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { LineChart } from '@toolpad/core/LineChart';
+import Box from '@mui/material/Box';
+
+const myData = createDataProvider({
+ async getMany() {
+ return {
+ rows: [
+ { id: 1, value: 19 },
+ { id: 2, value: 34 },
+ { id: 3, value: 6 },
+ { id: 4, value: 14 },
+ { id: 5, value: 17 },
+ ],
+ };
+ },
+ fields: {
+ id: { label: 'ID' },
+ value: { label: 'Value', type: 'number' },
+ },
+});
+
+export default function CustomizedLineChart() {
+ return (
+ <Box sx={{ width: '100%' }}>
+ <LineChart
+ height={250}
+ dataProvider={myData}
+ series={[
+ {
+ dataKey: 'value',
+ label: 'Custom Label',
+ color: 'red',
+ area: true,
+ showMark: false,
+ },
+ ]}
+ />
+ </Box>
+ );
+}

docs/data/toolpad/core/components/line-chart/CustomizedLineChart.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { LineChart } from '@toolpad/core/LineChart';
+import Box from '@mui/material/Box';
+
+const myData = createDataProvider({
+ async getMany() {
+ return {
+ rows: [
+ { id: 1, value: 19 },
+ { id: 2, value: 34 },
+ { id: 3, value: 6 },
+ { id: 4, value: 14 },
+ { id: 5, value: 17 },
+ ],
+ };
+ },
+ fields: {
+ id: { label: 'ID' },
+ value: { label: 'Value', type: 'number' },
+ },
+});
+
+export default function CustomizedLineChart() {
+ return (
+ <Box sx={{ width: '100%' }}>
+ <LineChart
+ height={250}
+ dataProvider={myData}
+ series={[
+ {
+ dataKey: 'value',
+ label: 'Custom Label',
+ color: 'red',
+ area: true,
+ showMark: false,
+ },
+ ]}
+ />
+ </Box>
+ );
+}

docs/data/toolpad/core/components/line-chart/CustomizedLineChart.tsx.preview

@@ -0,0 +1,13 @@
+<LineChart
+ height={250}
+ dataProvider={myData}
+ series={[
+ {
+ dataKey: 'value',
+ label: 'Custom Label',
+ color: 'red',
+ area: true,
+ showMark: false,
+ },
+ ]}
+/>

docs/data/toolpad/core/components/line-chart/ErrorLineChart.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { LineChart } from '@toolpad/core/LineChart';
+import Box from '@mui/material/Box';
+
+const myData = createDataProvider({
+ async getMany() {
+ throw new Error('Failed to fetch data');
+ },
+ fields: {
+ id: { label: 'ID' },
+ value: { label: 'Value', type: 'number' },
+ },
+});
+
+export default function ErrorLineChart() {
+ return (
+ <Box sx={{ width: '100%' }}>
+ <LineChart height={150} dataProvider={myData} />
+ </Box>
+ );
+}

docs/data/toolpad/core/components/line-chart/ErrorLineChart.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { LineChart } from '@toolpad/core/LineChart';
+import Box from '@mui/material/Box';
+
+const myData = createDataProvider({
+ async getMany() {
+ throw new Error('Failed to fetch data');
+ },
+ fields: {
+ id: { label: 'ID' },
+ value: { label: 'Value', type: 'number' },
+ },
+});
+
+export default function ErrorLineChart() {
+ return (
+ <Box sx={{ width: '100%' }}>
+ <LineChart height={150} dataProvider={myData} />
+ </Box>
+ );
+}

docs/data/toolpad/core/components/line-chart/ErrorLineChart.tsx.preview

@@ -0,0 +1 @@
+<LineChart height={150} dataProvider={myData} />

docs/data/toolpad/core/components/line-chart/line-chart.md

@@ -0,0 +1,27 @@
+---
+productId: toolpad-core
+title: Line Chart
+components: LineChart
+---
+
+# Line Chart
+
+<p class="description">Line Chart component for Toolpad Core applications.</p>
+
+Toolpad Core extends X Charts with data provider support. Toolpad Core charts automatically load data and adopt defaults for labels and formatting.
+
+## Basic example
+
+Add a data provider to a chart and its data is automatically loaded in the chart.
+
+{{"demo": "BasicLineChart.js"}}
+
+Error and loading states are automatically handled. Errors from the data provider are shown in an overlay:
+
+{{"demo": "ErrorLineChart.js", "hideToolbar": true}}
+
+## Customization
+
+The chart automatically adopts configuration from the data provider. When you pick a `dataKey` for an axis or a series, the chart automatically infers default values for series and axis options. The Toolpad Core components accept all properties that the X components offer. SO to customize the chart further, you can override these defaults and add extra options as you need.
+
+{{"demo": "CustomizedLineChart.js"}}

docs/data/toolpad/core/introduction/Tutorial1.js

@@ -7,7 +7,8 @@ const npmData = createDataProvider({
  async getMany() {
  const res = await fetch('https://api.npmjs.org/downloads/range/last-year/react');
  if (!res.ok) {
- throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+ const { error } = await res.json();
+ throw new Error(`HTTP ${res.status}: ${error}`);
  }
  const { downloads } = await res.json();
  return { rows: downloads };
@@ -21,8 +22,8 @@ const npmData = createDataProvider({
 
 export default function Tutorial1() {
  return (
- <Box sx={{ height: 300, width: '100%' }}>
- <DataGrid dataProvider={npmData} />
+ <Box sx={{ width: '100%' }}>
+ <DataGrid height={300} dataProvider={npmData} />
  </Box>
  );
 }

docs/data/toolpad/core/introduction/Tutorial1.tsx

@@ -7,7 +7,8 @@ const npmData = createDataProvider({
  async getMany() {
  const res = await fetch('https://api.npmjs.org/downloads/range/last-year/react');
  if (!res.ok) {
- throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+ const { error } = await res.json();
+ throw new Error(`HTTP ${res.status}: ${error}`);
  }
  const { downloads } = await res.json();
  return { rows: downloads };
@@ -21,8 +22,8 @@ const npmData = createDataProvider({
 
 export default function Tutorial1() {
  return (
- <Box sx={{ height: 300, width: '100%' }}>
- <DataGrid dataProvider={npmData} />
+ <Box sx={{ width: '100%' }}>
+ <DataGrid height={300} dataProvider={npmData} />
  </Box>
  );
 }

docs/data/toolpad/core/introduction/Tutorial1.tsx.preview

@@ -1 +1 @@
-<DataGrid dataProvider={npmData} />
+<DataGrid height={300} dataProvider={npmData} />

docs/data/toolpad/core/introduction/Tutorial2.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { DataGrid } from '@toolpad/core/DataGrid';
+import { LineChart } from '@toolpad/core/LineChart';
+import Box from '@mui/material/Box';
+
+const npmData = createDataProvider({
+ async getMany() {
+ const res = await fetch('https://api.npmjs.org/downloads/range/last-year/react');
+ if (!res.ok) {
+ const { error } = await res.json();
+ throw new Error(`HTTP ${res.status}: ${error}`);
+ }
+ const { downloads } = await res.json();
+ return { rows: downloads };
+ },
+ idField: 'day',
+ fields: {
+ day: { type: 'date' },
+ downloads: { type: 'number' },
+ },
+});
+
+export default function Tutorial2() {
+ return (
+ <Box sx={{ width: '100%' }}>
+ <DataGrid height={300} dataProvider={npmData} />
+ <LineChart
+ height={300}
+ dataProvider={npmData}
+ xAxis={[{ dataKey: 'day' }]}
+ series={[{ dataKey: 'downloads' }]}
+ />
+ </Box>
+ );
+}

docs/data/toolpad/core/introduction/Tutorial2.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { DataGrid } from '@toolpad/core/DataGrid';
+import { LineChart } from '@toolpad/core/LineChart';
+import Box from '@mui/material/Box';
+
+const npmData = createDataProvider({
+ async getMany() {
+ const res = await fetch('https://api.npmjs.org/downloads/range/last-year/react');
+ if (!res.ok) {
+ const { error } = await res.json();
+ throw new Error(`HTTP ${res.status}: ${error}`);
+ }
+ const { downloads } = await res.json();
+ return { rows: downloads };
+ },
+ idField: 'day',
+ fields: {
+ day: { type: 'date' },
+ downloads: { type: 'number' },
+ },
+});
+
+export default function Tutorial2() {
+ return (
+ <Box sx={{ width: '100%' }}>
+ <DataGrid height={300} dataProvider={npmData} />
+ <LineChart
+ height={300}
+ dataProvider={npmData}
+ xAxis={[{ dataKey: 'day' }]}
+ series={[{ dataKey: 'downloads' }]}
+ />
+ </Box>
+ );
+}