From 07aad34457b097137fa4fb575782c463464ab083 Mon Sep 17 00:00:00 2001 From: Rich Bustos <92274722+richbustos@users.noreply.github.com> Date: Mon, 7 Aug 2023 13:25:00 -0700 Subject: [PATCH] [website] Updating Charts demo with real charts usage for MUI X marketing page (#38317) Co-authored-by: Rich Bustos Co-authored-by: alexandre --- docs/next.config.js | 3 +- docs/package.json | 1 + docs/src/components/productX/XChartsDemo.tsx | 96 ++++++++++++-------- yarn.lock | 16 +++- 4 files changed, 74 insertions(+), 42 deletions(-) diff --git a/docs/next.config.js b/docs/next.config.js index a8216a5762b290..985c81386d6019 100644 --- 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 index 79dd57a30f4960..132a9d3bc8f9e5 100644 --- 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 index 8ee82295400507..a1b6ebc14a0937 100644 --- 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 ( - - - - - - - - - - - - - - - - - - - - - - + div': { + borderRadius: 1, + bgcolor: '#fff', + }, + }, + (theme) => + theme.applyDarkStyles({ + '& > div': { + bgcolor: 'primaryDark.900', + }, + }), + ]} + > + + + + +