Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: updates per environment type chart (#6449)
Creates the updates per environment type chart. (forgive the sample data) Closes # [1-2034](https://linear.app/unleash/issue/1-2034/widget-updates-per-environment-type-frontend) <img width="1385" alt="Screenshot 2024-03-06 at 16 52 18" src="https://github.com/Unleash/unleash/assets/104830839/b05479f8-de8b-4de7-98a3-a1285737db0d"> --------- Signed-off-by: andreas-unleash <andreas@getunleash.ai>
- Loading branch information
1 parent
4a8faac
commit ec6c439
Showing
9 changed files
with
229 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
...shboard/componentsChart/UpdatesPerEnvironmentTypeChart/UpdatesPerEnvironmentTypeChart.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import { useMemo, type VFC } from 'react'; | ||
import 'chartjs-adapter-date-fns'; | ||
import { useTheme } from '@mui/material'; | ||
import { | ||
ExecutiveSummarySchema, | ||
ExecutiveSummarySchemaEnvironmentTypeTrendsItem, | ||
} from 'openapi'; | ||
import { LineChart, NotEnoughData } from '../../components/LineChart/LineChart'; | ||
import { usePlaceholderData } from 'component/executiveDashboard/hooks/usePlaceholderData'; | ||
import { getProjectColor } from '../../executive-dashboard-utils'; | ||
|
||
interface IUpdatesPerEnvironmnetTypeChart { | ||
environmentTypeTrends: ExecutiveSummarySchema['environmentTypeTrends']; | ||
isLoading?: boolean; | ||
} | ||
|
||
const groupByDate = ( | ||
items: ExecutiveSummarySchemaEnvironmentTypeTrendsItem[], | ||
): Record<string, ExecutiveSummarySchemaEnvironmentTypeTrendsItem[]> => { | ||
if (!items) { | ||
return {}; | ||
} | ||
|
||
const grouped = items.reduce( | ||
(acc, item) => { | ||
const key = item.environmentType; | ||
|
||
if (!acc[key]) { | ||
acc[key] = []; | ||
} | ||
|
||
acc[key].push(item); | ||
|
||
return acc; | ||
}, | ||
{} as Record<string, ExecutiveSummarySchemaEnvironmentTypeTrendsItem[]>, | ||
); | ||
|
||
return grouped; | ||
}; | ||
|
||
export const UpdatesPerEnvironmentTypeChart: VFC< | ||
IUpdatesPerEnvironmnetTypeChart | ||
> = ({ environmentTypeTrends, isLoading }) => { | ||
const theme = useTheme(); | ||
const notEnoughData = environmentTypeTrends?.length < 2; | ||
const placeholderData = usePlaceholderData({ fill: true, type: 'double' }); | ||
|
||
const data = useMemo(() => { | ||
const grouped = groupByDate(environmentTypeTrends); | ||
const labels = environmentTypeTrends?.map((item) => item.date); | ||
const datasets = Object.entries(grouped).map( | ||
([environmentType, trends]) => { | ||
const color = getProjectColor(environmentType); | ||
return { | ||
label: environmentType, | ||
data: trends.map((item) => item.totalUpdates), | ||
borderColor: color, | ||
backgroundColor: color, | ||
fill: false, | ||
}; | ||
}, | ||
); | ||
return { labels, datasets }; | ||
}, [theme, environmentTypeTrends]); | ||
|
||
return ( | ||
<LineChart | ||
data={notEnoughData || isLoading ? placeholderData : data} | ||
cover={notEnoughData ? <NotEnoughData /> : isLoading} | ||
/> | ||
); | ||
}; |
117 changes: 117 additions & 0 deletions
117
...TypeChart/UpdatesPerEnvironmentTypeChartTooltip/UpdatesPerEnvironmentTypeChartTooltip.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
import { type VFC } from 'react'; | ||
import { ExecutiveSummarySchemaEnvironmentTypeTrendsItem } from 'openapi'; | ||
import { Box, Divider, Paper, styled, Typography } from '@mui/material'; | ||
import { TooltipState } from '../../../components/LineChart/ChartTooltip/ChartTooltip'; | ||
|
||
const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({ | ||
padding: theme.spacing(2), | ||
})); | ||
|
||
const StyledItemHeader = styled(Box)(({ theme }) => ({ | ||
display: 'flex', | ||
justifyContent: 'space-between', | ||
gap: theme.spacing(2), | ||
alignItems: 'center', | ||
})); | ||
|
||
const InfoLine = ({ | ||
iconChar, | ||
title, | ||
color, | ||
}: { | ||
iconChar: string; | ||
title: string; | ||
color: 'info' | 'success' | 'error'; | ||
}) => ( | ||
<Typography | ||
variant='body2' | ||
component='p' | ||
sx={{ | ||
color: (theme) => theme.palette[color].main, | ||
}} | ||
> | ||
<Typography component='span'>{iconChar}</Typography> | ||
<strong>{title}</strong> | ||
</Typography> | ||
); | ||
|
||
const InfoSummary = ({ data }: { data: { key: string; value: number }[] }) => ( | ||
<Typography variant={'body1'} component={'p'}> | ||
<Box display={'flex'} flexDirection={'row'}> | ||
{data.map(({ key, value }) => ( | ||
<div style={{ flex: 1, flexDirection: 'column' }}> | ||
<div | ||
style={{ | ||
flex: 1, | ||
textAlign: 'center', | ||
marginBottom: '4px', | ||
}} | ||
> | ||
{key} | ||
</div> | ||
<div style={{ flex: 1, textAlign: 'center' }}>{value}</div> | ||
</div> | ||
))} | ||
</Box> | ||
</Typography> | ||
); | ||
|
||
export const UpdatesPerEnvironmentTypeChartTooltip: VFC<{ | ||
tooltip: TooltipState | null; | ||
}> = ({ tooltip }) => { | ||
const data = tooltip?.dataPoints.map((point) => { | ||
return { | ||
label: point.label, | ||
title: point.dataset.label, | ||
color: point.dataset.borderColor, | ||
value: point.raw as ExecutiveSummarySchemaEnvironmentTypeTrendsItem, | ||
}; | ||
}); | ||
|
||
const limitedData = data?.slice(0, 5); | ||
|
||
return ( | ||
<Box | ||
sx={(theme) => ({ | ||
display: 'flex', | ||
flexDirection: 'column', | ||
gap: theme.spacing(2), | ||
width: '300px', | ||
})} | ||
> | ||
{limitedData?.map((point, index) => ( | ||
<StyledTooltipItemContainer | ||
elevation={3} | ||
key={`${point.title}-${index}`} | ||
> | ||
<StyledItemHeader> | ||
<Typography variant='body2' component='span'> | ||
<Typography | ||
sx={{ color: point.color }} | ||
component='span' | ||
> | ||
{'● '} | ||
</Typography> | ||
<strong>{point.title}</strong> | ||
</Typography> | ||
<Typography | ||
variant='body2' | ||
color='textSecondary' | ||
component='span' | ||
> | ||
{point.label} | ||
</Typography> | ||
</StyledItemHeader> | ||
<Divider | ||
sx={(theme) => ({ margin: theme.spacing(1.5, 0) })} | ||
/> | ||
<InfoLine | ||
iconChar={'● '} | ||
title={`Total updates: ${point.value.totalUpdates}`} | ||
color={'info'} | ||
/> | ||
</StyledTooltipItemContainer> | ||
)) || null} | ||
</Box> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
frontend/src/openapi/models/executiveSummarySchemaEnvironmentTypeTrendsItem.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
/** | ||
* Generated by Orval | ||
* Do not edit manually. | ||
* See `gen:api` script in package.json | ||
*/ | ||
|
||
export type ExecutiveSummarySchemaEnvironmentTypeTrendsItem = { | ||
/** A UTC date when the stats were captured. Time is the very end of a given day. */ | ||
date: string; | ||
/** Environment type the data belongs too */ | ||
environmentType: string; | ||
/** Total number of times configuration has been updated in the environment type */ | ||
totalUpdates: number; | ||
/** Year and week in a given year for which the stats were calculated */ | ||
week: string; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters