From 5434e0ed2ac903d747ece4ee526528896a38b4c1 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Mon, 3 Jun 2024 18:08:44 +0200
Subject: [PATCH 1/4] Add dashboard tutorial to introduction
---
.../toolpad/core/introduction/Tutorial2.tsx | 2 +-
.../core/introduction/dashboard-tutorial.md | 78 ----------------
.../toolpad/core/introduction/tutorial.md | 92 +++++++++++++++++++
.../core/introduction/dashboard-tutorial.js | 7 --
4 files changed, 93 insertions(+), 86 deletions(-)
delete mode 100644 docs/data/toolpad/core/introduction/dashboard-tutorial.md
delete mode 100644 docs/pages/toolpad/core/introduction/dashboard-tutorial.js
diff --git a/docs/data/toolpad/core/introduction/Tutorial2.tsx b/docs/data/toolpad/core/introduction/Tutorial2.tsx
index 2b4fc65f0e0..d32a8f86628 100644
--- a/docs/data/toolpad/core/introduction/Tutorial2.tsx
+++ b/docs/data/toolpad/core/introduction/Tutorial2.tsx
@@ -17,7 +17,7 @@ const npmData = createDataProvider({
idField: 'day',
fields: {
day: { type: 'date' },
- downloads: { type: 'number' },
+ downloads: { type: 'number', label: 'Npm Downloads' },
},
});
diff --git a/docs/data/toolpad/core/introduction/dashboard-tutorial.md b/docs/data/toolpad/core/introduction/dashboard-tutorial.md
deleted file mode 100644
index d95c63d1be4..00000000000
--- a/docs/data/toolpad/core/introduction/dashboard-tutorial.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# Dashboard tutorial
-
-Tutorial
-
-## Connecting data
-
-Toolpad Core comes with the concept of data providers. At its core, a data provider abstracts a remote collection. A data provider implements a `getMany` method and defines some fields:
-
-```js
-import { createDataProvider } from '@toolpad/core/DataProvider';
-
-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' },
- },
-});
-```
-
-You can then visualize this data by connecting it to a grid:
-
-```js
-import { DataGrid } from '@toolpad/core';
-import { Box } from '@mui/material';
-
-// ...
-
-export default function App() {
- return (
-
-
-
- );
-}
-```
-
-This results in the following output
-
-{{"demo": "Tutorial1.js", "hideToolbar": true}}
-
-## Sharing data providers
-
-Interesting things happen when you share data providers between different components. For instance, you can add a chart that uses the same data.
-
-```js
-// ...
-import { DataGrid, LineChart } from '@toolpad/core';
-
-// ...
-
-export default function App() {
- return (
-
-
-
-
- );
-}
-```
-
-The Toolpad Core components automatically adopt default values
-
-{{"demo": "Tutorial2.js", "hideToolbar": true}}
diff --git a/docs/data/toolpad/core/introduction/tutorial.md b/docs/data/toolpad/core/introduction/tutorial.md
index 5dc9b4d0f46..89ac98e25b5 100644
--- a/docs/data/toolpad/core/introduction/tutorial.md
+++ b/docs/data/toolpad/core/introduction/tutorial.md
@@ -103,3 +103,95 @@ const NAVIGATION: Navigation = [
The newly created page can now be navigated to from the sidebar, like the following:
{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/tutorial-2.gif", "alt": "Toolpad Core new page", "caption": "Adding pages to navigation", "zoom": true, "indent": 1 }}
+
+## Dashboard content
+
+Now that your project is set up, it's time to build your first dashboard. This part of the tutorial takes you through building a small dashboard that allows monitoring npm downloads.
+
+### Connecting to a data source
+
+Toolpad Core comes with the concept of data providers. At its core, you could look at a data provider as an abstracts over a remote collection. At the very least, a data provider implements the `getMany` method and defines the fields it returns. The `getMany` method must return an object with a `rows` property:
+
+```js
+import { createDataProvider } from '@toolpad/core/DataProvider';
+
+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' },
+ },
+});
+```
+
+This data provider calls the npm API and returns the downloads collection. It defines the two fields available in this collection, `day`, which we mark as the unique id field with the `idField` property and `downloads`. You can then visualize this data by connecting it to a grid:
+
+```js
+import { DataGrid } from '@toolpad/core';
+import { Box } from '@mui/material';
+
+// ...
+
+export default function App() {
+ return (
+
+
+
+ );
+}
+```
+
+This results in the following output
+
+{{"demo": "Tutorial1.js", "hideToolbar": true}}
+
+You don't need to configure any columns, the grid infers them from the data provider. Any default that you define in the fields is adopted by any data rendering component that uses this data provider.
+
+### Sharing data providers
+
+Interesting things happen when you share data providers between different components. For instance, you can add a chart that uses the same data. Similar to the grid, this chart displays the same data as the grid. Under the hood the data fetching happens only once.
+
+```js
+// ...
+import { DataGrid, LineChart } from '@toolpad/core';
+
+// ...
+
+export default function App() {
+ return (
+
+
+
+
+ );
+}
+```
+
+The Toolpad Core components automatically adopt default values. For instance, if you add a `label` to the field, both the grid uses it in the column header, and the chart uses it in the legend:
+
+```js
+ // ...
+ fields: {
+ day: { type: 'date' },
+ downloads: { type: 'number', label: 'Npm Downloads' },
+ },
+ // ...
+```
+
+The result is the following:
+
+{{"demo": "Tutorial2.js", "hideToolbar": true}}
diff --git a/docs/pages/toolpad/core/introduction/dashboard-tutorial.js b/docs/pages/toolpad/core/introduction/dashboard-tutorial.js
deleted file mode 100644
index 81c85c64a58..00000000000
--- a/docs/pages/toolpad/core/introduction/dashboard-tutorial.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from '../../../../data/toolpad/core/introduction/dashboard-tutorial.md?muiMarkdown';
-
-export default function Page() {
- return ;
-}
From 3319f7e5f183992a7330d6b1cfa64088887219d4 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Mon, 3 Jun 2024 18:22:18 +0200
Subject: [PATCH 2/4] Update Tutorial2.js
---
docs/data/toolpad/core/introduction/Tutorial2.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/toolpad/core/introduction/Tutorial2.js b/docs/data/toolpad/core/introduction/Tutorial2.js
index 2b4fc65f0e0..d32a8f86628 100644
--- a/docs/data/toolpad/core/introduction/Tutorial2.js
+++ b/docs/data/toolpad/core/introduction/Tutorial2.js
@@ -17,7 +17,7 @@ const npmData = createDataProvider({
idField: 'day',
fields: {
day: { type: 'date' },
- downloads: { type: 'number' },
+ downloads: { type: 'number', label: 'Npm Downloads' },
},
});
From a492fce763c59d83b7c0f5dbf7d995f9adbfdebd Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Mon, 3 Jun 2024 18:27:42 +0200
Subject: [PATCH 3/4] dewtt
---
docs/data/toolpad/core/introduction/Tutorial1.js | 6 +++---
docs/data/toolpad/core/introduction/Tutorial1.tsx | 6 +++---
docs/data/toolpad/core/introduction/Tutorial2.js | 6 +++---
docs/data/toolpad/core/introduction/Tutorial2.tsx | 6 +++---
docs/data/toolpad/core/introduction/tutorial.md | 10 +++++-----
5 files changed, 17 insertions(+), 17 deletions(-)
diff --git a/docs/data/toolpad/core/introduction/Tutorial1.js b/docs/data/toolpad/core/introduction/Tutorial1.js
index 6d701309682..47e5fde07ef 100644
--- a/docs/data/toolpad/core/introduction/Tutorial1.js
+++ b/docs/data/toolpad/core/introduction/Tutorial1.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import { createDataProvider } from '@toolpad/core/DataProvider';
import { DataGrid } from '@toolpad/core/DataGrid';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
const npmData = createDataProvider({
async getMany() {
@@ -22,8 +22,8 @@ const npmData = createDataProvider({
export default function Tutorial1() {
return (
-
+
-
+
);
}
diff --git a/docs/data/toolpad/core/introduction/Tutorial1.tsx b/docs/data/toolpad/core/introduction/Tutorial1.tsx
index 6d701309682..47e5fde07ef 100644
--- a/docs/data/toolpad/core/introduction/Tutorial1.tsx
+++ b/docs/data/toolpad/core/introduction/Tutorial1.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { createDataProvider } from '@toolpad/core/DataProvider';
import { DataGrid } from '@toolpad/core/DataGrid';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
const npmData = createDataProvider({
async getMany() {
@@ -22,8 +22,8 @@ const npmData = createDataProvider({
export default function Tutorial1() {
return (
-
+
-
+
);
}
diff --git a/docs/data/toolpad/core/introduction/Tutorial2.js b/docs/data/toolpad/core/introduction/Tutorial2.js
index d32a8f86628..45a2f12cef3 100644
--- a/docs/data/toolpad/core/introduction/Tutorial2.js
+++ b/docs/data/toolpad/core/introduction/Tutorial2.js
@@ -2,7 +2,7 @@ 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';
+import Stack from '@mui/material/Stack';
const npmData = createDataProvider({
async getMany() {
@@ -23,7 +23,7 @@ const npmData = createDataProvider({
export default function Tutorial2() {
return (
-
+
-
+
);
}
diff --git a/docs/data/toolpad/core/introduction/Tutorial2.tsx b/docs/data/toolpad/core/introduction/Tutorial2.tsx
index d32a8f86628..45a2f12cef3 100644
--- a/docs/data/toolpad/core/introduction/Tutorial2.tsx
+++ b/docs/data/toolpad/core/introduction/Tutorial2.tsx
@@ -2,7 +2,7 @@ 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';
+import Stack from '@mui/material/Stack';
const npmData = createDataProvider({
async getMany() {
@@ -23,7 +23,7 @@ const npmData = createDataProvider({
export default function Tutorial2() {
return (
-
+
-
+
);
}
diff --git a/docs/data/toolpad/core/introduction/tutorial.md b/docs/data/toolpad/core/introduction/tutorial.md
index 89ac98e25b5..497b059f760 100644
--- a/docs/data/toolpad/core/introduction/tutorial.md
+++ b/docs/data/toolpad/core/introduction/tutorial.md
@@ -137,15 +137,15 @@ This data provider calls the npm API and returns the downloads collection. It de
```js
import { DataGrid } from '@toolpad/core';
-import { Box } from '@mui/material';
+import { Stack } from '@mui/material';
// ...
export default function App() {
return (
-
+
-
+
);
}
```
@@ -168,7 +168,7 @@ import { DataGrid, LineChart } from '@toolpad/core';
export default function App() {
return (
-
+
-
+
);
}
```
From 0cf13431ae0e5620144c409dd7e97fc6ff614174 Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Tue, 4 Jun 2024 20:04:59 +0200
Subject: [PATCH 4/4] Update docs/data/toolpad/core/introduction/tutorial.md
Co-authored-by: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Signed-off-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
---
docs/data/toolpad/core/introduction/tutorial.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/toolpad/core/introduction/tutorial.md b/docs/data/toolpad/core/introduction/tutorial.md
index 497b059f760..bc07aeb6483 100644
--- a/docs/data/toolpad/core/introduction/tutorial.md
+++ b/docs/data/toolpad/core/introduction/tutorial.md
@@ -110,7 +110,7 @@ Now that your project is set up, it's time to build your first dashboard. This p
### Connecting to a data source
-Toolpad Core comes with the concept of data providers. At its core, you could look at a data provider as an abstracts over a remote collection. At the very least, a data provider implements the `getMany` method and defines the fields it returns. The `getMany` method must return an object with a `rows` property:
+Toolpad Core comes with the concept of data providers. At its core, you could look at a data provider as an abstraction over a remote collection. At the very least, a data provider implements the `getMany` method and defines the fields it returns. The `getMany` method must return an object with a `rows` property:
```js
import { createDataProvider } from '@toolpad/core/DataProvider';