[charts][docs] Add more illustrations to the Overview page (#12041)

mui · Feb 15, 2024 · e2f8137 · e2f8137
1 parent fd92ca6
commit e2f8137
Show file tree

Hide file tree

Showing 27 changed files with 93 additions and 15 deletions.
diff --git a/docs/data/charts/heat-map/heat-map.md b/docs/data/charts/heat-map/heat-map.md
@@ -3,12 +3,12 @@ title: React Heat map chart
 productId: x-charts
 ---
 
-# Charts - Heat map 🚧
+# Charts - Heatmap 🚧
 
-<p class="description">Heat map charts allow to highlight correlation between categories.</p>
+<p class="description">Heatmap charts allow to highlight correlation between categories.</p>
 
 :::warning
-The Heat map Chart component isn't available yet, but you can upvote [**this GitHub issue**](https://github.com/mui/mui-x/issues/7926) to see it arrive sooner.
+The Heatmap Chart component isn't available yet, but you can upvote [**this GitHub issue**](https://github.com/mui/mui-x/issues/7926) to see it arrive sooner.
 
 Don't hesitate to leave a comment there to influence what gets built.
 Especially if you already have a use case for this component, or if you're facing a pain point with your current solution.

diff --git a/docs/data/pages.ts b/docs/data/pages.ts
@@ -459,7 +459,7 @@ const pages: MuiPage[] = [
             subheader: 'Future components',
             children: [
               { pathname: '/x/react-charts/gauge', title: 'Gauge', planned: true },
-              { pathname: '/x/react-charts/heat-map', title: 'Heat map', planned: true },
+              { pathname: '/x/react-charts/heat-map', title: 'Heatmap', planned: true },
               { pathname: '/x/react-charts/radar', title: 'Radar', planned: true },
               { pathname: '/x/react-charts/tree-map', title: 'Tree map', planned: true },
               { pathname: '/x/react-charts/funnel', title: 'Funnel', plan: 'pro', planned: true },

diff --git a/docs/public/static/x/component-illustrations/bar-dark.png b/docs/public/static/x/component-illustrations/bar-dark.png
diff --git a/docs/public/static/x/component-illustrations/bar-light.png b/docs/public/static/x/component-illustrations/bar-light.png
diff --git a/docs/public/static/x/component-illustrations/funnel-dark.png b/docs/public/static/x/component-illustrations/funnel-dark.png
diff --git a/docs/public/static/x/component-illustrations/funnel-light.png b/docs/public/static/x/component-illustrations/funnel-light.png
diff --git a/docs/public/static/x/component-illustrations/gantt-dark.png b/docs/public/static/x/component-illustrations/gantt-dark.png
diff --git a/docs/public/static/x/component-illustrations/gantt-light.png b/docs/public/static/x/component-illustrations/gantt-light.png
diff --git a/docs/public/static/x/component-illustrations/gauge-dark.png b/docs/public/static/x/component-illustrations/gauge-dark.png
diff --git a/docs/public/static/x/component-illustrations/gauge-light.png b/docs/public/static/x/component-illustrations/gauge-light.png
diff --git a/docs/public/static/x/component-illustrations/heatmap-dark.png b/docs/public/static/x/component-illustrations/heatmap-dark.png
diff --git a/docs/public/static/x/component-illustrations/heatmap-light.png b/docs/public/static/x/component-illustrations/heatmap-light.png
diff --git a/docs/public/static/x/component-illustrations/lines-dark.png b/docs/public/static/x/component-illustrations/lines-dark.png
diff --git a/docs/public/static/x/component-illustrations/lines-light.png b/docs/public/static/x/component-illustrations/lines-light.png
diff --git a/docs/public/static/x/component-illustrations/pie-dark.png b/docs/public/static/x/component-illustrations/pie-dark.png
diff --git a/docs/public/static/x/component-illustrations/pie-light.png b/docs/public/static/x/component-illustrations/pie-light.png
diff --git a/docs/public/static/x/component-illustrations/radar-dark.png b/docs/public/static/x/component-illustrations/radar-dark.png
diff --git a/docs/public/static/x/component-illustrations/radar-light.png b/docs/public/static/x/component-illustrations/radar-light.png
diff --git a/docs/public/static/x/component-illustrations/sankey-dark.png b/docs/public/static/x/component-illustrations/sankey-dark.png
diff --git a/docs/public/static/x/component-illustrations/sankey-light.png b/docs/public/static/x/component-illustrations/sankey-light.png
diff --git a/docs/public/static/x/component-illustrations/scatter-dark.png b/docs/public/static/x/component-illustrations/scatter-dark.png
diff --git a/docs/public/static/x/component-illustrations/scatter-light.png b/docs/public/static/x/component-illustrations/scatter-light.png
diff --git a/docs/public/static/x/component-illustrations/sparkline-dark.png b/docs/public/static/x/component-illustrations/sparkline-dark.png
diff --git a/docs/public/static/x/component-illustrations/sparkline-light.png b/docs/public/static/x/component-illustrations/sparkline-light.png
diff --git a/docs/public/static/x/component-illustrations/treemap-dark.png b/docs/public/static/x/component-illustrations/treemap-dark.png
diff --git a/docs/public/static/x/component-illustrations/treemap-light.png b/docs/public/static/x/component-illustrations/treemap-light.png
diff --git a/docs/src/modules/components/ChartComponentsGrid.js b/docs/src/modules/components/ChartComponentsGrid.js
@@ -4,6 +4,8 @@ import Card from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
 import Link from 'docs/src/modules/components/Link';
 
 function components() {
@@ -33,11 +35,60 @@ function components() {
       href: '/x/react-charts/scatter/',
     },
     {
-      title: 'Sparkline Chart',
+      title: 'Sparkline',
       srcLight: '/static/x/component-illustrations/sparkline-light.png',
       srcDark: '/static/x/component-illustrations/sparkline-dark.png',
       href: '/x/react-charts/sparkline/',
     },
+    {
+      title: 'Gauge',
+      srcLight: '/static/x/component-illustrations/gauge-light.png',
+      srcDark: '/static/x/component-illustrations/gauge-dark.png',
+      href: '/x/react-charts/gauge/',
+      planned: true,
+    },
+    {
+      title: 'Heatmap',
+      srcLight: '/static/x/component-illustrations/heatmap-light.png',
+      srcDark: '/static/x/component-illustrations/heatmap-dark.png',
+      href: '/x/react-charts/heat-map/',
+      planned: true,
+    },
+    {
+      title: 'Radar Chart',
+      srcLight: '/static/x/component-illustrations/radar-light.png',
+      srcDark: '/static/x/component-illustrations/radar-dark.png',
+      href: '/x/react-charts/radar/',
+      planned: true,
+    },
+    {
+      title: 'Treemap',
+      srcLight: '/static/x/component-illustrations/treemap-light.png',
+      srcDark: '/static/x/component-illustrations/treemap-dark.png',
+      href: '/x/react-charts/tree-map/',
+      planned: true,
+    },
+    {
+      title: 'Funnel Chart',
+      srcLight: '/static/x/component-illustrations/funnel-light.png',
+      srcDark: '/static/x/component-illustrations/funnel-dark.png',
+      href: '/x/react-charts/funnel/',
+      planned: true,
+    },
+    {
+      title: 'Gantt Chart',
+      srcLight: '/static/x/component-illustrations/gantt-light.png',
+      srcDark: '/static/x/component-illustrations/gantt-dark.png',
+      href: '/x/react-charts/gantt/',
+      planned: true,
+    },
+    {
+      title: 'Sankey Chart',
+      srcLight: '/static/x/component-illustrations/sankey-light.png',
+      srcDark: '/static/x/component-illustrations/sankey-dark.png',
+      href: '/x/react-charts/sankey/',
+      planned: true,
+    },
   ];
 }
 
@@ -71,23 +122,50 @@ export default function ChartComponentsGrid() {
               sx={(theme) => ({
                 aspectRatio: '16 / 9',
                 background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-                borderBottom: '1px solid',
-                borderColor: 'divider',
+                opacity: component.planned ? 0.4 : 1,
+                filter: component.planned ? 'grayscale(100%)' : undefined,
                 ...theme.applyDarkStyles({
+                  opacity: component.planned ? 0.2 : 1,
                   content: `url(${component.srcDark})`,
                   background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-                  borderColor: 'divider',
                 }),
               })}
             />
-            <Typography
-              component="h3"
-              variant="body2"
-              fontWeight="semiBold"
-              sx={{ px: 2, py: 1.5 }}
+            <Stack
+              direction="row"
+              alignItems="center"
+              sx={{ p: 1.5, borderTop: '1px solid', borderColor: 'divider' }}
             >
-              {component.title}
-            </Typography>
+              <Typography component="h3" variant="body2" fontWeight="semiBold" mr={0.5}>
+                {component.title}
+              </Typography>
+              {component.pro && <span className="plan-pro" />}
+              {component.planned && (
+                <Chip
+                  label="Planned"
+                  size="small"
+                  variant="outlined"
+                  color="grey"
+                  sx={(theme) => ({
+                    ml: 'auto',
+                    height: 20,
+                    backgroundColor: 'grey.50',
+                    borderColor: 'grey.200',
+                    '.MuiChip-label': {
+                      px: '6px',
+                      fontSize: '0.65rem',
+                      letterSpacing: '.04rem',
+                      textTransform: 'uppercase',
+                      color: 'text.primary',
+                    },
+                    ...theme.applyDarkStyles({
+                      backgroundColor: 'divider',
+                      borderColor: 'divider',
+                    }),
+                  })}
+                />
+              )}
+            </Stack>
           </Card>
         </Grid>
       ))}