[website] Updating Charts demo with real charts usage for MUI X marke…

…ting page (#38317) Co-authored-by: Rich Bustos <[email protected]> Co-authored-by: alexandre <[email protected]>
mui · Aug 7, 2023 · 07aad34 · 07aad34
1 parent f7d2574
commit 07aad34
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 42 deletions.
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -57,6 +57,7 @@ module.exports = withDocsInfra({
             '@mui/x-date-pickers',
             '@mui/x-date-pickers-pro',
             '@mui/x-data-grid-generator',
+            '@mui/x-charts',
             '@mui/x-license-pro',
           ].some((dep) => request.startsWith(dep));
 
@@ -118,7 +119,7 @@ module.exports = withDocsInfra({
             test: /\.(js|mjs|jsx)$/,
             resourceQuery: { not: [/raw/] },
             include:
-              /node_modules(\/|\\)(notistack|@mui(\/|\\)x-data-grid|@mui(\/|\\)x-data-grid-pro|@mui(\/|\\)x-license-pro|@mui(\/|\\)x-data-grid-generator|@mui(\/|\\)x-date-pickers-pro|@mui(\/|\\)x-date-pickers)/,
+              /node_modules(\/|\\)(notistack|@mui(\/|\\)x-data-grid|@mui(\/|\\)x-data-grid-pro|@mui(\/|\\)x-license-pro|@mui(\/|\\)x-data-grid-generator|@mui(\/|\\)x-date-pickers-pro|@mui(\/|\\)x-date-pickers|@mui(\/|\\)x-charts)/,
             use: {
               loader: 'babel-loader',
               options: {

diff --git a/docs/package.json b/docs/package.json
@@ -44,6 +44,7 @@
     "@mui/styles": "^5.14.3",
     "@mui/system": "^5.14.3",
     "@mui/types": "^7.2.4",
+    "@mui/x-charts": "^6.0.0-alpha.6",
     "@mui/x-data-grid": "6.10.2",
     "@mui/x-data-grid-generator": "6.10.2",
     "@mui/x-data-grid-premium": "6.10.2",

diff --git a/docs/src/components/productX/XChartsDemo.tsx b/docs/src/components/productX/XChartsDemo.tsx
@@ -1,53 +1,71 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
 import Chip from '@mui/material/Chip';
-import { alpha, styled } from '@mui/material/styles';
-import { shouldForwardProp } from '@mui/system';
+import { alpha } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { mangoFusionPalette } from '@mui/x-charts';
 import Frame from 'docs/src/components/action/Frame';
 
-const AspectRatioImage = styled('div', {
-  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'src' && prop !== 'ratio',
-})<{ ratio: number; src: string }>(({ src, ratio, theme }) => ({
-  height: 0,
-  backgroundImage: `url(${src})`,
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: 'contain',
-  paddingBottom: `${(1 / ratio) * 100}%`,
-  margin: 'auto',
-  ...theme.applyDarkStyles({
-    backgroundImage: `url(${src.replace('-light', '-dark')})`,
-  }),
-}));
-
 export default function XChartsDemo() {
   return (
     <Frame sx={{ height: '100%' }}>
       <Frame.Demo sx={{ p: 2, flexGrow: 1 }}>
-        <Grid container spacing={1} justifyContent="center">
-          <Grid item xs={6}>
-            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', ml: 'auto' }}>
-              <AspectRatioImage src="/static/branding/mui-x/chart-light1.png" ratio={219 / 120} />
-            </Box>
-          </Grid>
-          <Grid item xs={6}>
-            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', mr: 'auto' }}>
-              <AspectRatioImage src="/static/branding/mui-x/chart-light2.png" ratio={219 / 120} />
-            </Box>
-          </Grid>
-          <Grid item xs={6}>
-            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', ml: 'auto' }}>
-              <AspectRatioImage src="/static/branding/mui-x/chart-light3.png" ratio={219 / 120} />
-            </Box>
-          </Grid>
-          <Grid item xs={6}>
-            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', mr: 'auto' }}>
-              <AspectRatioImage src="/static/branding/mui-x/chart-light4.png" ratio={219 / 120} />
-            </Box>
-          </Grid>
-        </Grid>
+        <Paper
+          variant="outlined"
+          sx={[
+            {
+              '& > div': {
+                borderRadius: 1,
+                bgcolor: '#fff',
+              },
+            },
+            (theme) =>
+              theme.applyDarkStyles({
+                '& > div': {
+                  bgcolor: 'primaryDark.900',
+                },
+              }),
+          ]}
+        >
+          <Box sx={{ py: 1 }}>
+            <LineChart
+              sx={{
+                '& .MuiMarkElement-root': { display: 'none' },
+                '& .MuiMarkElement-root.MuiMarkElement-highlighted': { display: 'block' },
+              }}
+              margin={{ top: 10, bottom: 50, left: 40, right: 20 }}
+              series={[
+                { data: [35, 44, 24, 34], stack: 'total', area: true },
+                { data: [51, 6, 49, 30], stack: 'total', area: true },
+                { data: [5, 15, 30, 50], stack: 'total', area: true },
+                { data: [60, 50, 15, 10], stack: 'total', area: true },
+              ]}
+              xAxis={[{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'point' }]}
+              colors={mangoFusionPalette}
+              height={250}
+            />
+            <BarChart
+              sx={{
+                '& .MuiMarkElement-root': { display: 'none' },
+                '& .MuiMarkElement-root.MuiMarkElement-highlighted': { display: 'block' },
+              }}
+              margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
+              series={[
+                { data: [35, 44, 24, 34] },
+                { data: [51, 6, 49, 30] },
+                { data: [15, 25, 30, 50] },
+                { data: [60, 50, 15, 25] },
+              ]}
+              xAxis={[{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'band' }]}
+              height={200}
+              colors={mangoFusionPalette}
+            />
+          </Box>
+        </Paper>
       </Frame.Demo>
       <Frame.Info data-mui-color-scheme="dark">
         <Box

diff --git a/yarn.lock b/yarn.lock
@@ -1980,6 +1980,18 @@
     react-test-renderer "^18.0.0"
     semver "^5.7.0"
 
+"@mui/x-charts@^6.0.0-alpha.6":
+  version "6.0.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/@mui/x-charts/-/x-charts-6.0.0-alpha.6.tgz#0c86df55163119eaa3996f4d4aa1aa8164e2e510"
+  integrity sha512-WAFwfu3LBDrztRDaH3Q6Ny83bDlTBX1vjQWYf5iTc2Fz3CPfpeLW3ipZOZpfc+GKno8dZ6vUohzyOqc2CXmQZQ==
+  dependencies:
+    "@babel/runtime" "^7.22.6"
+    clsx "^1.2.1"
+    d3-color "^3.1.0"
+    d3-scale "^4.0.2"
+    d3-shape "^3.2.0"
+    prop-types "^15.8.1"
+
 "@mui/[email protected]":
   version "6.10.2"
   resolved "https://registry.yarnpkg.com/@mui/x-data-grid-generator/-/x-data-grid-generator-6.10.2.tgz#376b945cdf13f06670fbfd12b4e518a130bbb831"
@@ -6359,7 +6371,7 @@ custom-event@~1.0.0:
   dependencies:
     internmap "1 - 2"
 
-"d3-color@1 - 3":
+"d3-color@1 - 3", d3-color@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
@@ -6397,7 +6409,7 @@ d3-scale@^4.0.2:
     d3-time "2.1.1 - 3"
     d3-time-format "2 - 4"
 
-d3-shape@^3.1.0:
+d3-shape@^3.1.0, d3-shape@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
   integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==