[draft] Add Charts example collection page

[prakhargupta1]

Preview: https://deploy-preview-18353--material-ui-x.netlify.app/x/react-charts/examples/

[mui-bot]

Deploy preview: https://deploy-preview-18353--material-ui-x.netlify.app/

Updated pages:

• docs/data/charts/examples/examples.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-pro	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-premium	0B(0.00%)	0B(0.00%)
@mui/x-charts	0B(0.00%)	0B(0.00%)
@mui/x-charts-pro	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	0B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against 2f9a34f961a4d586097007aca06cd3eb5d699826

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #18353 will not alter performance

_{Comparing prakhargupta1:charts-demo (2f9a34f) with master (93406bb)}

Summary

✅ 10 untouched

[prakhargupta1]

@alelthomas For https://github.com/mui/mui-x/issues/16587 I started exploring charts demos in this PR. The idea was to have a page similar to Data Grid's Features page. So basically list all demos from the docs into a single page. Would you like to continue it from here? Today we discussed that we should replace current data with some real data.

[alexfauquette]

What about removing the single demo pages and only keep "Examples" as a single entry, like overview and quickstart?

Those pages are just a copy paste of demo available somewhere else.

https://deploy-preview-18353--material-ui-x.netlify.app/x/react-charts/examples/mixedbarchart/ <=> https://deploy-preview-18353--material-ui-x.netlify.app/x/react-charts/bar-demo/#mixedbarchart

I see two main options to display charts

• Displaying images of the charts (https://echarts.apache.org/examples/en/)

  • Pros: It scales well with a high number of demo to show, and allow to show charts with a lot of data points without performance issues
  • Cons: Needs some infra work to generate and save the images. And you cand have an overview of how interaction works

• Rendering the actual charts (https://tremor.so/charts)

  • Pros: Use can play with the chart. This allows to show tooltip, or zooms
  • Cons: It impacts performances of the page. We need to load the entire package, and having multiple heavy demo might slow down users browsers

Currently, we pay the cost of rendering the charts without getting the benefits.

[bernardobelchior]

Cons: It impacts performances of the page. We need to load the entire package, and having multiple heavy demo might slow down users browsers

We might be able to use an intersection observer to only render charts that are visible (at the cost of some complexity)

[alelthomas]

So the initial inspiration for keeping the single pages was: https://www.highcharts.com/demo and https://www.ag-grid.com/charts/gallery/

To also redirect from our main website (e.g. mui.com/charts)

More so a gallery so users or decision makers don't have to go browsing all the docs to find the demos... but yes right now it's redundant. I personally prefer option 2 if we remove the single pages, but for performance, we can do images, and I can link them to where the demo is already being displayed in the docs.

[mapache-salvaje]

Instead of Examples —> All, would it be possible to just link the Examples dropdown directly to the "All" page and remove the "All" text from the sidebar? (I don't know if our infra makes this possible)

[alexfauquette]

So the initial inspiration for keeping the single pages was: highcharts.com/demo and ag-grid.com/charts/gallery

Ok, I better understand. But this works because examples are tailored to be in a gallery. For example, this demo https://www.ag-grid.com/charts/gallery/multiple-scatter-series/ does not appear in the related docs page https://www.ag-grid.com/charts/javascript/scatter-series/

I personally prefer option 2

You mean the tremor-like way of doing it?

If I get your message correctly, I think we agree on the following plan

• short-term goal: A gallery where the user can see a selection of our docs demo. They can play with them and have a link to the related docs page. (20% of the effort, 80% of the result)
• long-term goal:
  • Add an infra to generate/store images of the gallery
  • Replace some "dumy demo" of the gallery by more advanced ones

[prakhargupta1]

Adding images instead of charts makes sense to optimize for performance and space (within the card). Currently there is white space on the sides and legends seem unnecessary. I like how this chart fits and utilizes space:

[alelthomas]

Noted on all the above, then I'll do as @alexfauquette proposes - in stages.

Stage 1: display demos linking to source so users can still interact with the chart within each card.

Stage 2: infra for thumbnails of the demos + replace interactive demo with those screenshots + add more advanced demos.

[prakhargupta1]

@alelthomas In today’s weekly, we agreed to drop the hover effect and have all charts show in color by default. Also, in the stage 2, you can explore https://tremor.so/charts style of showcase as the grid will help us use screen space efficiently without relying on fixed card dimensions.

[alelthomas]

Perf. Thanks for the update @prakhargupta1

[alexfauquette]

For preview sizing, the issue is that you interfere with the component used to mesure charts size. So the SVG needs to reshape, leading to some unexpected white space.

A solution could be to add a wrapper on top of the demos (here a dumb <Box sx={{ width: '100%', height: 300 }}/>) such that the charts can fit this box. And in the example pages, we override this box size with the '& > div' selector.

I also propose adding [data-hide-overview=true] such that we ca use <Typography data-hide-overview>Charts Title</Typography> and the tilte does not apear in the example page.

I added commits to test this on bar and line demos. Feel free to revert them if needed

--- a/docs/data/charts/bar-demo/BarChartStackedBySign.tsx
+++ b/docs/data/charts/bar-demo/BarChartStackedBySign.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { BarChart } from '@mui/x-charts/BarChart';
 
 const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300];
@@ -16,14 +17,15 @@ const xLabels = [
 
 export default function BarChartStackedBySign() {
   return (

+    <Box sx={{ width: '100%', height: 300 }}>
     <BarChart
       height={300}
       series={[
         { data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
         { data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
       ]}
       xAxis={[{ data: xLabels }]}
       yAxis={[{ width: 60 }]}
     />
+    </Box>
   );

--- a/docs/src/ChartExampleThumbnailGrid.js
+++ b/docs/src/ChartExampleThumbnailGrid.js
@@ -40,14 +40,11 @@ export function ChartThumbnailCard({ title, ChartComponent }) {
             alignItems: 'center',
             justifyContent: 'center',
             '& > div': {
-              width: '100% !important',
-              height: '100% !important',
+              width: '100%',
+              height: '100%',
             },
-            '& svg': {
-               width: '100%',
-               height: '100%',
-              objectFit: 'contain',
-            },
+            '& [data-hide-overview=true]': {
+              display: 'none',
+            },
           }}
         >

Before

After

For the bar chart we will still ahve an issue since their is no enought space for all y-axis label

[alelthomas]

I adjusted the layout to sort of match the Overview page x Tremor with links to the code:

I still need to adjust the view for some charts but I think it's overall cleaner this way. LMK what y'all think

[prakhargupta1]

LMK what y'all think

Awesome! It looks much better now.

Instead of taking the user to Github, I think it would be better if we take them to the docs demo as there are more options in the toolbar that they may find helpful. Also, they'll get to see other relevant charts on page (the ones that don't make the cut to this main Examples page).

[alexfauquette]

Instead of taking the user to Github, I think it would be better if we take them to the docs demo as there are more options in the toolbar that they may find helpful.

I agree. For devs that woudl allow them to open sandbox, and read the explanations about the feature.

I pushed the following modifications:

1. All example component got moved ina dedicated folder modules/examples/charts to avoid poluting the folder space for other teams
2. I modified the links to go to the docs. If further refinements are needed, this modification has been done with the following RegEx:
   • Replace https://github.com/mui/mui-x/blob/v8.10.2/docs/data/charts by /x/react-charts
   • Replace /([a-zA-Z]*\.tsx) by /#$1

[prakhargupta1]

• Other charts are not centrally aligned, can we fix them?

• The buttons in https://deploy-preview-18353--material-ui-x.netlify.app/x/react-charts/line-demo/#line-chart-with-live-data need to be fixed.

• I see that adding a box to the original demos fixed the layouts. Should we not follow the same for other charts? For instance, area chart demos are still not using the full width.

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-pro	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-premium	0B(0.00%)	▼-1B(0.00%)
@mui/x-charts	🔺+12B(0.00%)	🔺+8B(+0.01%)
@mui/x-charts-pro	🔺+12B(0.00%)	🔺+9B(+0.01%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	🔺+1B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

[alelthomas]

• I see that adding a box to the original demos fixed the layouts. Should we not follow the same for other charts? For instance, area chart demos are still not using the full width.

Ugh I'm not so sure I like that look though. I've been discussing this with Nora, and she agrees that removing the whitespace just makes them look more cluttered... I feel like giving them a little bit of space helps. Similar to https://tremor.so/charts

[prakhargupta1]

On my Macbook, the area chart looks like below, but on a larger screen it looks fine.

Similarly, the pie chart goes out of the box:

[prakhargupta1]

@alexfauquette Overall it looks good to me now. Do you mind taking a look?

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.