[docs] Improve performance on charts entry point

A quick follow up on mui#12041
thomasmoon · Sep 6, 2024 · ef73d54 · ef73d54
1 parent 4b476ef
commit ef73d54
Show file tree

Hide file tree

Showing 28 changed files with 12 additions and 8 deletions.
diff --git a/docs/data/charts/heat-map/heat-map.md b/docs/data/charts/heat-map/heat-map.md
@@ -1,5 +1,5 @@
 ---
-title: React Heat map chart
+title: React Heatmap chart
 productId: x-charts
 ---
 

diff --git a/docs/data/charts/tree-map/tree-map.md b/docs/data/charts/tree-map/tree-map.md
@@ -1,14 +1,14 @@
 ---
-title: React Tree map chart
+title: React Treemap chart
 productId: x-charts
 ---
 
-# Charts - Tree map 🚧
+# Charts - Treemap 🚧
 
-<p class="description">Tree map allows to display data with a hierarchical structure.</p>
+<p class="description">Treemap allows to display data with a hierarchical structure.</p>
 
 :::warning
-The Tree map Chart component isn't available yet, but you can upvote [**this GitHub issue**](https://github.com/mui/mui-x/issues/7924) to see it arrive sooner.
+The Treemap Chart component isn't available yet, but you can upvote [**this GitHub issue**](https://github.com/mui/mui-x/issues/7924) 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
@@ -461,7 +461,7 @@ const pages: MuiPage[] = [
             children: [
               { 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/tree-map', title: 'Treemap', planned: true },
               { pathname: '/x/react-charts/funnel', title: 'Funnel', plan: 'pro', planned: true },
               { pathname: '/x/react-charts/gantt', title: 'Gantt', plan: 'pro', planned: true },
               { pathname: '/x/react-charts/sankey', title: 'Sankey', 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
@@ -8,7 +8,7 @@ import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
 import Link from 'docs/src/modules/components/Link';
 
-function components() {
+function getComponents() {
   return [
     {
       title: 'Bar Chart',
@@ -73,28 +73,31 @@ function components() {
       srcDark: '/static/x/component-illustrations/funnel-dark.png',
       href: '/x/react-charts/funnel/',
       planned: true,
+      pro: 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,
+      pro: 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,
+      pro: true,
     },
   ];
 }
 
 export default function ChartComponentsGrid() {
   return (
     <Grid container spacing={2} sx={{ pt: 2, pb: 4 }}>
-      {components().map((component) => (
+      {getComponents().map((component) => (
         <Grid item xs={12} sm={4} sx={{ flexGrow: 1 }} key={component.title}>
           <Card
             component={Link}
@@ -118,6 +121,7 @@ export default function ChartComponentsGrid() {
               component="img"
               alt=""
               image={component.srcLight}
+              loading="lazy"
               sx={(theme) => ({
                 aspectRatio: '16 / 9',
                 background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,