Skip to content

Commit 779bc36

Browse files
zanivandanilo-lealnoraleonte
authored and
joserodolfofreitas
committed
[material-ui][docs] Add improvements to Dashboard template (mui#42445)
Co-authored-by: Danilo Leal <[email protected]> Co-authored-by: noraleonte <[email protected]>
1 parent d0d3786 commit 779bc36

File tree

104 files changed

+5467
-3198
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

104 files changed

+5467
-3198
lines changed

‎docs/data/material/getting-started/templates/dashboard/Dashboard.js

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import * as React from 'react';
22

3-
import { createTheme, ThemeProvider } from '@mui/material/styles';
3+
import { createTheme, ThemeProvider, alpha } from '@mui/material/styles';
44
import CssBaseline from '@mui/material/CssBaseline';
55
import Box from '@mui/material/Box';
6-
import Container from '@mui/material/Container';
7-
import getDashboardTheme from './getDashboardTheme';
6+
import Stack from '@mui/material/Stack';
7+
import getDashboardTheme from './theme/getDashboardTheme';
88
import ToggleCustomTheme from './internals/components/ToggleCustomTheme';
9-
import Copyright from './internals/components/Copyright';
109
import Navbar from './components/Navbar';
1110
import Header from './components/Header';
1211
import MainGrid from './components/MainGrid';
12+
import SideMenu from './components/SideMenu';
1313

1414
export default function Dashboard() {
1515
const [mode, setMode] = React.useState('light');
@@ -29,30 +29,32 @@ export default function Dashboard() {
2929
<ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
3030
<CssBaseline />
3131
<Box sx={{ display: 'flex' }}>
32+
<SideMenu />
3233
<Navbar mode={mode} toggleColorMode={toggleColorMode} />
34+
{/* Main content */}
3335
<Box
3436
component="main"
35-
sx={{
36-
backgroundColor: 'background.default',
37+
sx={(theme) => ({
38+
position: { sm: 'relative', md: '' },
39+
top: { sm: '48px', md: '0' },
40+
height: { sm: 'calc(100vh - 48px)', md: '100vh' },
3741
flexGrow: 1,
38-
height: '100vh',
42+
pt: 2,
43+
backgroundColor: alpha(theme.palette.background.default, 1),
3944
overflow: 'auto',
40-
}}
45+
})}
4146
>
42-
{/* Main content */}
43-
<Container
44-
maxWidth="xl"
47+
<Stack
48+
spacing={2}
4549
sx={{
46-
display: 'flex',
47-
flexDirection: 'column',
48-
py: { xs: 14, sm: 16 },
49-
gap: 2,
50+
alignItems: 'center',
51+
mx: 3,
52+
pb: 10,
5053
}}
5154
>
52-
<Header />
55+
<Header mode={mode} toggleColorMode={toggleColorMode} />
5356
<MainGrid />
54-
<Copyright sx={{ my: 4 }} />
55-
</Container>
57+
</Stack>
5658
</Box>
5759
<ToggleCustomTheme
5860
showCustomTheme={showCustomTheme}

‎docs/data/material/getting-started/templates/dashboard/Dashboard.tsx

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import * as React from 'react';
22
import { PaletteMode } from '@mui/material';
3-
import { createTheme, ThemeProvider } from '@mui/material/styles';
3+
import { createTheme, ThemeProvider, alpha } from '@mui/material/styles';
44
import CssBaseline from '@mui/material/CssBaseline';
55
import Box from '@mui/material/Box';
6-
import Container from '@mui/material/Container';
7-
import getDashboardTheme from './getDashboardTheme';
6+
import Stack from '@mui/material/Stack';
7+
import getDashboardTheme from './theme/getDashboardTheme';
88
import ToggleCustomTheme from './internals/components/ToggleCustomTheme';
9-
import Copyright from './internals/components/Copyright';
109
import Navbar from './components/Navbar';
1110
import Header from './components/Header';
1211
import MainGrid from './components/MainGrid';
12+
import SideMenu from './components/SideMenu';
1313

1414
export default function Dashboard() {
1515
const [mode, setMode] = React.useState<PaletteMode>('light');
@@ -29,30 +29,32 @@ export default function Dashboard() {
2929
<ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
3030
<CssBaseline />
3131
<Box sx={{ display: 'flex' }}>
32+
<SideMenu />
3233
<Navbar mode={mode} toggleColorMode={toggleColorMode} />
34+
{/* Main content */}
3335
<Box
3436
component="main"
35-
sx={{
36-
backgroundColor: 'background.default',
37+
sx={(theme) => ({
38+
position: { sm: 'relative', md: '' },
39+
top: { sm: '48px', md: '0' },
40+
height: { sm: 'calc(100vh - 48px)', md: '100vh' },
3741
flexGrow: 1,
38-
height: '100vh',
42+
pt: 2,
43+
backgroundColor: alpha(theme.palette.background.default, 1),
3944
overflow: 'auto',
40-
}}
45+
})}
4146
>
42-
{/* Main content */}
43-
<Container
44-
maxWidth="xl"
47+
<Stack
48+
spacing={2}
4549
sx={{
46-
display: 'flex',
47-
flexDirection: 'column',
48-
py: { xs: 14, sm: 16 },
49-
gap: 2,
50+
alignItems: 'center',
51+
mx: 3,
52+
pb: 10,
5053
}}
5154
>
52-
<Header />
55+
<Header mode={mode} toggleColorMode={toggleColorMode} />
5356
<MainGrid />
54-
<Copyright sx={{ my: 4 }} />
55-
</Container>
57+
</Stack>
5658
</Box>
5759
<ToggleCustomTheme
5860
showCustomTheme={showCustomTheme}

‎docs/data/material/getting-started/templates/dashboard/components/CardAlert.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from 'react';
2+
import Card from '@mui/material/Card';
3+
import CardContent from '@mui/material/CardContent';
4+
import Button from '@mui/material/Button';
5+
import Typography from '@mui/material/Typography';
6+
import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
7+
8+
export default function CardAlert() {
9+
return (
10+
<Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
11+
<CardContent>
12+
<AutoAwesomeRoundedIcon fontSize="small" />
13+
<Typography gutterBottom sx={{ fontWeight: 600 }}>
14+
Plan about to expire
15+
</Typography>
16+
<Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
17+
Enjoy 10% off when renewing your plan today.
18+
</Typography>
19+
<Button variant="contained" size="small" fullWidth>
20+
Get the discount
21+
</Button>
22+
</CardContent>
23+
</Card>
24+
);
25+
}

‎docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from 'react';
2+
import Card from '@mui/material/Card';
3+
import CardContent from '@mui/material/CardContent';
4+
import Button from '@mui/material/Button';
5+
import Typography from '@mui/material/Typography';
6+
import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
7+
8+
export default function CardAlert() {
9+
return (
10+
<Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
11+
<CardContent>
12+
<AutoAwesomeRoundedIcon fontSize="small" />
13+
<Typography gutterBottom sx={{ fontWeight: 600 }}>
14+
Plan about to expire
15+
</Typography>
16+
<Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
17+
Enjoy 10% off when renewing your plan today.
18+
</Typography>
19+
<Button variant="contained" size="small" fullWidth>
20+
Get the discount
21+
</Button>
22+
</CardContent>
23+
</Card>
24+
);
25+
}

‎docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,15 +112,18 @@ PieCenterLabel.propTypes = {
112112
};
113113

114114
const colors = [
115-
'hsl(220, 25%, 65%)',
116-
'hsl(220, 25%, 45%)',
117-
'hsl(220, 25%, 30%)',
118-
'hsl(220, 25%, 20%)',
115+
'hsl(220, 20%, 65%)',
116+
'hsl(220, 20%, 42%)',
117+
'hsl(220, 20%, 35%)',
118+
'hsl(220, 20%, 25%)',
119119
];
120120

121121
export default function ChartUserByCountry() {
122122
return (
123-
<Card variant="outlined" sx={{ pb: '8px' }}>
123+
<Card
124+
variant="outlined"
125+
sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
126+
>
124127
<CardContent>
125128
<Typography component="h2" variant="subtitle2">
126129
Users by country
@@ -177,6 +180,7 @@ export default function ChartUserByCountry() {
177180
</Stack>
178181
<LinearProgress
179182
variant="determinate"
183+
aria-label="Number of users by country"
180184
value={country.value}
181185
sx={{
182186
[`& .${linearProgressClasses.bar}`]: {

‎docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -115,15 +115,18 @@ function PieCenterLabel({ primaryText, secondaryText }: PieCenterLabelProps) {
115115
}
116116

117117
const colors = [
118-
'hsl(220, 25%, 65%)',
119-
'hsl(220, 25%, 45%)',
120-
'hsl(220, 25%, 30%)',
121-
'hsl(220, 25%, 20%)',
118+
'hsl(220, 20%, 65%)',
119+
'hsl(220, 20%, 42%)',
120+
'hsl(220, 20%, 35%)',
121+
'hsl(220, 20%, 25%)',
122122
];
123123

124124
export default function ChartUserByCountry() {
125125
return (
126-
<Card variant="outlined" sx={{ pb: '8px' }}>
126+
<Card
127+
variant="outlined"
128+
sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
129+
>
127130
<CardContent>
128131
<Typography component="h2" variant="subtitle2">
129132
Users by country
@@ -180,6 +183,7 @@ export default function ChartUserByCountry() {
180183
</Stack>
181184
<LinearProgress
182185
variant="determinate"
186+
aria-label="Number of users by country"
183187
value={country.value}
184188
sx={{
185189
[`& .${linearProgressClasses.bar}`]: {

‎docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,45 @@ import { columns, rows } from '../internals/data/gridData';
55
export default function CustomizedDataGrid() {
66
return (
77
<DataGrid
8+
autoHeight
89
checkboxSelection
910
rows={rows}
1011
columns={columns}
1112
getRowClassName={(params) =>
1213
params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
1314
}
1415
initialState={{
15-
pagination: { paginationModel: { pageSize: 10 } },
16+
pagination: { paginationModel: { pageSize: 20 } },
1617
}}
17-
pageSizeOptions={[10, 25, 50]}
18+
pageSizeOptions={[10, 20, 50]}
1819
disableColumnResize
20+
density="compact"
21+
slotProps={{
22+
filterPanel: {
23+
filterFormProps: {
24+
logicOperatorInputProps: {
25+
variant: 'outlined',
26+
size: 'small',
27+
},
28+
columnInputProps: {
29+
variant: 'outlined',
30+
size: 'small',
31+
sx: { mt: 'auto' },
32+
},
33+
operatorInputProps: {
34+
variant: 'outlined',
35+
size: 'small',
36+
sx: { mt: 'auto' },
37+
},
38+
valueInputProps: {
39+
InputComponentProps: {
40+
variant: 'outlined',
41+
size: 'small',
42+
},
43+
},
44+
},
45+
},
46+
}}
1947
/>
2048
);
2149
}

‎docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,45 @@ import { columns, rows } from '../internals/data/gridData';
55
export default function CustomizedDataGrid() {
66
return (
77
<DataGrid
8+
autoHeight
89
checkboxSelection
910
rows={rows}
1011
columns={columns}
1112
getRowClassName={(params) =>
1213
params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
1314
}
1415
initialState={{
15-
pagination: { paginationModel: { pageSize: 10 } },
16+
pagination: { paginationModel: { pageSize: 20 } },
1617
}}
17-
pageSizeOptions={[10, 25, 50]}
18+
pageSizeOptions={[10, 20, 50]}
1819
disableColumnResize
20+
density="compact"
21+
slotProps={{
22+
filterPanel: {
23+
filterFormProps: {
24+
logicOperatorInputProps: {
25+
variant: 'outlined',
26+
size: 'small',
27+
},
28+
columnInputProps: {
29+
variant: 'outlined',
30+
size: 'small',
31+
sx: { mt: 'auto' },
32+
},
33+
operatorInputProps: {
34+
variant: 'outlined',
35+
size: 'small',
36+
sx: { mt: 'auto' },
37+
},
38+
valueInputProps: {
39+
InputComponentProps: {
40+
variant: 'outlined',
41+
size: 'small',
42+
},
43+
},
44+
},
45+
},
46+
}}
1947
/>
2048
);
2149
}

‎docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,10 +200,12 @@ export default function CustomizedTreeView() {
200200
return (
201201
<Card
202202
variant="outlined"
203-
sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
203+
sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
204204
>
205205
<CardContent>
206-
<Typography variant="subtitle2">Product tree</Typography>
206+
<Typography component="h2" variant="subtitle2">
207+
Product tree
208+
</Typography>
207209
<RichTreeView
208210
items={ITEMS}
209211
aria-label="pages"

‎docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,10 +181,12 @@ export default function CustomizedTreeView() {
181181
return (
182182
<Card
183183
variant="outlined"
184-
sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
184+
sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
185185
>
186186
<CardContent>
187-
<Typography variant="subtitle2">Product tree</Typography>
187+
<Typography component="h2" variant="subtitle2">
188+
Product tree
189+
</Typography>
188190
<RichTreeView
189191
items={ITEMS}
190192
aria-label="pages"

0 commit comments

Comments
 (0)