[charts] Move dataset to distinct files in the demos

[oliviertassinari]

I was trying to understand how some of the charts of the docs were built but struggle with a lot of line to scroll associated for the data set, e.g. https://mui.com/x/react-charts/bars/#layout

I think that we should move the data set to the bottom of the page:

diff --git a/docs/data/charts/bars/HorizontalBars.tsx b/docs/data/charts/bars/HorizontalBars.tsx
index 0f5de1074..ef153edd6 100644
--- a/docs/data/charts/bars/HorizontalBars.tsx
+++ b/docs/data/charts/bars/HorizontalBars.tsx
@@ -10,6 +10,21 @@ const chartSetting = {
   width: 500,
   height: 400,
 };
+
+const valueFormatter = (value: number) => `${value}mm`;
+
+export default function HorizontalBars() {
+  return (
+    <BarChart
+      dataset={dataset}
+      yAxis={[{ scaleType: 'band', dataKey: 'month' }]}
+      series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
+      layout="horizontal"
+      {...chartSetting}
+    />
+  );
+}
+
 const dataset = [
   {
     london: 59,
@@ -96,17 +111,3 @@ const dataset = [
     month: 'Dec',
   },
 ];
-
-const valueFormatter = (value: number) => `${value}mm`;
-
-export default function HorizontalBars() {
-  return (
-    <BarChart
-      dataset={dataset}
-      yAxis={[{ scaleType: 'band', dataKey: 'month' }]}
-      series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
-      layout="horizontal"
-      {...chartSetting}
-    />
-  );
-}

Examples

• This would be similar to how the Autocomplete demos solve the problem: https://mui.com/material-ui/react-autocomplete/#combo-box.

Context

In the future, we might want to have a custom data set.

And maybe even have it interactive:

https://github.com/mui/mui-x/assets/3165635/898f5840-38c7-4f39-aff8-3fcca9a83c5d

https://www.chartjs.org/docs/latest/samples/scales/linear-step-size.html

Your environment 🌎

v6.0.0-alpha.9

[flaviendelangle]

I would love if someday, the data-rich components have a data tab on the demo, like Nivo demos and receives a data prop on the demo.

The data of MyDemo.{js|tsx} could come from MyDemo.data.json or even MyDemo.data.js if we need some dynamic data generation like the current useDemoData or useMovieData.

Because for a given demo, 99% of the time the data is fixed once the component is mounted. We only have those hooks to avoid duplicate the logic for each demo. But if we could load the rows and columns prop from a file and display there value in a tab it would greatly improve the comprehension of the demo for users. And the same clearly applies to charts and tree view.

[oliviertassinari]

We only have those hooks to avoid duplicate the logic for each demo.

There is also a notion of allowing a straightforward demo copy & paste experience.

have a data tab on the demo

I'm connecting this to a docs-infra issue, we explored this for another problem in the past: https://github.com/mui/material-ui/issues/38911.

[flaviendelangle]

There is also a notion of allowing a straightforward demo copy & paste experience.

The main downside of the current approach being that it's hard to understand the demo code because some logic is hidden behind custom hooks that are somethings very complex (useDemoData)

[oliviertassinari]

The main downside of the current approach being that it's hard to understand the demo code because some logic is hidden behind custom hooks that are somethings very complex (useDemoData)

@flaviendelangle When we introduced useDemoData, the idea was to limit it to data that are not relevant to the feature the demo covers. So I think we should always default to override the data of useDemoData if it's important to understand the demo.

Issue created: https://github.com/mui/material-ui/issues/38911. We could use a tab to host the data.

[alexfauquette]

I'm closing because most of the demos now have a dataset in a distinct file.

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@oliviertassinari: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.