Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: dashboard layout (#6063)

Browse Source 
Align widgets properly on main screen. Responsive view in next PRs
This commit is contained in:
Tymoteusz Czech 2024-01-30 09:00:06 +01:00 committed by GitHub
parent 9d2c65c9c0
commit 46fb40ca08
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 50 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
View File

@ -11,7 +11,7 @@ const StyledGrid = styled(Box)(({ theme }) => ({
display: 'grid', display: 'grid',
gridTemplateColumns: `300px 1fr`, gridTemplateColumns: `300px 1fr`,
// TODO: responsive grid size // TODO: responsive grid size
gridAutoRows: '1fr', gridAutoRows: 'auto',
gap: theme.spacing(2), gap: theme.spacing(2),
})); }));
@ -31,11 +31,10 @@ export const ExecutiveDashboard: VFC = () => {
</Box> </Box>
<StyledGrid> <StyledGrid>
<UserStats /> <UserStats />
<FlagStats />
<UsersChart <UsersChart
userTrends={executiveDashboardData?.userTrends ?? []} userTrends={executiveDashboardData?.userTrends ?? []}
/> />
<Paper>Stats</Paper> <FlagStats />
<FlagsChart <FlagsChart
flagsTrends={executiveDashboardData?.flagsTrends ?? []} flagsTrends={executiveDashboardData?.flagsTrends ?? []}
/> />

22
frontend/src/component/executiveDashboard/FlagsChart/FlagsChartComponent.tsx
View File

@ -12,7 +12,7 @@ import {
} from 'chart.js'; } from 'chart.js';
import { Line } from 'react-chartjs-2'; import { Line } from 'react-chartjs-2';
import 'chartjs-adapter-date-fns'; import 'chartjs-adapter-date-fns';
import { Paper, Theme, useTheme } from '@mui/material'; import { Paper, Theme, Typography, useTheme } from '@mui/material';
import { import {
useLocationSettings, useLocationSettings,
type ILocationSettings, type ILocationSettings,
@ -54,20 +54,6 @@ const createOptions = (theme: Theme, locationSettings: ILocationSettings) =>
({ ({
responsive: true, responsive: true,
plugins: { plugins: {
title: {
text: 'Number of flags',
position: 'top',
align: 'start',
display: true,
font: {
size: 16,
weight: '400',
},
padding: {
bottom: 24,
},
color: theme.palette.text.primary,
},
legend: { legend: {
position: 'bottom', position: 'bottom',
}, },
@ -132,6 +118,12 @@ const FlagsChartComponent: VFC<IFlagsChartComponentProps> = ({
return ( return (
<Paper sx={(theme) => ({ padding: theme.spacing(4) })}> <Paper sx={(theme) => ({ padding: theme.spacing(4) })}>
<Typography
variant='h3'
sx={(theme) => ({ marginBottom: theme.spacing(3) })}
>
Number of flags
</Typography>
<Line options={options} data={data} /> <Line options={options} data={data} />
</Paper> </Paper>
); );

88
frontend/src/component/executiveDashboard/UserStats/UserStats.tsx
View File

@ -75,42 +75,38 @@ const StyledLink = styled(Link)({
export const UserStats = () => { export const UserStats = () => {
return ( return (
<> <StyledContent>
<Box sx={{ display: 'flex', flexDirection: 'column' }}> <StyledHeader variant='h1'>Total users</StyledHeader>
<StyledContent> <StyledUserContainer>
<StyledHeader variant='h1'>Total users</StyledHeader> <StyledUserBox>
<StyledUserContainer> <StyledUserCount variant='h2'>9999</StyledUserCount>
<StyledUserBox> </StyledUserBox>
<StyledUserCount variant='h2'>9999</StyledUserCount> <StyledCustomShadow />
</StyledUserBox> </StyledUserContainer>
<StyledCustomShadow />
</StyledUserContainer>
<StyledUserDistributionContainer> <StyledUserDistributionContainer>
<UserDistribution /> <UserDistribution />
</StyledUserDistributionContainer> </StyledUserDistributionContainer>
<StyledDistInfoContainer> <StyledDistInfoContainer>
<UserDistributionInfo <UserDistributionInfo
type='active' type='active'
percentage='70' percentage='70'
count='9999' count='9999'
/> />
<UserDistributionInfo <UserDistributionInfo
type='inactive' type='inactive'
percentage='30' percentage='30'
count='9999' count='9999'
/> />
</StyledDistInfoContainer> </StyledDistInfoContainer>
<StyledLinkContainer> <StyledLinkContainer>
<StyledLink to='/admin/users'> <StyledLink to='/admin/users'>
View users <ChevronRight /> View users <ChevronRight />
</StyledLink> </StyledLink>
</StyledLinkContainer> </StyledLinkContainer>
</StyledContent> </StyledContent>
</Box>
</>
); );
}; };
@ -204,20 +200,18 @@ const UserDistributionInfo: React.FC<IUserDistributionInfoProps> = ({
}) => { }) => {
return ( return (
<StyledUserDistContainer> <StyledUserDistContainer>
<Box sx={{ display: 'flex' }}> <StyledUserDistIndicator type={type} />
<StyledUserDistIndicator type={type} /> <StyledDistInfoInnerContainer>
<StyledDistInfoInnerContainer> <StyledDistInfoTextContainer>
<StyledDistInfoTextContainer> <Typography variant='body1'>
<Typography variant='body1'> {type === 'active' ? 'Active' : 'Inactive'} users
{type === 'active' ? 'Active' : 'Inactive'} users </Typography>
</Typography> <Typography variant='body2'>{percentage}%</Typography>
<Typography variant='body2'>{percentage}%</Typography> </StyledDistInfoTextContainer>
</StyledDistInfoTextContainer> <StyledCountTypography variant='h2'>
<StyledCountTypography variant='h2'> {count}
{count} </StyledCountTypography>
</StyledCountTypography> </StyledDistInfoInnerContainer>
</StyledDistInfoInnerContainer>
</Box>
</StyledUserDistContainer> </StyledUserDistContainer>
); );
}; };