Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +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',
gridTemplateColumns: `300px 1fr`,
// TODO: responsive grid size
gridAutoRows: '1fr',
gridAutoRows: 'auto',
gap: theme.spacing(2),
}));
@ -31,11 +31,10 @@ export const ExecutiveDashboard: VFC = () => {
</Box>
<StyledGrid>
<UserStats />
<FlagStats />
<UsersChart
userTrends={executiveDashboardData?.userTrends ?? []}
/>
<Paper>Stats</Paper>
<FlagStats />
<FlagsChart
flagsTrends={executiveDashboardData?.flagsTrends ?? []}
/>

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

@ -12,7 +12,7 @@ import {
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import 'chartjs-adapter-date-fns';
import { Paper, Theme, useTheme } from '@mui/material';
import { Paper, Theme, Typography, useTheme } from '@mui/material';
import {
useLocationSettings,
type ILocationSettings,
@ -54,20 +54,6 @@ const createOptions = (theme: Theme, locationSettings: ILocationSettings) =>
({
responsive: true,
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: {
position: 'bottom',
},
@ -132,6 +118,12 @@ const FlagsChartComponent: VFC<IFlagsChartComponentProps> = ({
return (
<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} />
</Paper>
);

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

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