1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

feat: project health widget (#6092)

Adds the project health widget to the edb:

<img width="1243" alt="Skjermbilde 2024-01-31 kl 12 16 23"
src="https://github.com/Unleash/unleash/assets/16081982/7df1e4dc-3245-4c30-bb9e-f21e90697392">
This commit is contained in:
Fredrik Strand Oseberg 2024-01-31 13:19:28 +01:00 committed by GitHub
parent fcb8bf6918
commit 79e86e1aca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 75 additions and 10 deletions

View File

@ -14,6 +14,7 @@ import { UserStats } from './UserStats/UserStats';
import { FlagStats } from './FlagStats/FlagStats';
import { Widget } from './Widget/Widget';
import { FlagsProjectChart } from './FlagsProjectChart/FlagsProjectChart';
import { ProjectHealthChart } from './ProjectHealthChart/ProjectHealthChart';
const StyledGrid = styled(Box)(({ theme }) => ({
display: 'grid',
@ -126,6 +127,17 @@ export const ExecutiveDashboard: VFC = () => {
}
/>
</Widget>
<Widget
title='Health per project'
order={6}
span={largeChartSpan}
>
<ProjectHealthChart
projectFlagTrends={
executiveDashboardData.projectFlagTrends
}
/>
</Widget>
</StyledGrid>
</>
);

View File

@ -6,20 +6,12 @@ import {
ExecutiveSummarySchemaProjectFlagTrendsItem,
} from 'openapi';
import { LineChart } from '../LineChart/LineChart';
import { getRandomColor } from '../executive-dashboard-utils';
interface IFlagsProjectChartProps {
projectFlagTrends: ExecutiveSummarySchema['projectFlagTrends'];
}
const getRandomColor = () => {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
export const FlagsProjectChart: VFC<IFlagsProjectChartProps> = ({
projectFlagTrends,
}) => {

View File

@ -1,5 +1,6 @@
import { Paper, styled, Typography } from '@mui/material';
import { VFC } from 'react';
import { objectId } from 'utils/objectId';
export type TooltipState = {
caretX: number;
@ -66,7 +67,7 @@ export const ChartTooltip: VFC<IChartTooltipProps> = ({ tooltip }) => (
}
<StyledList>
{tooltip?.body.map((item) => (
<StyledItem key={item.title}>
<StyledItem key={objectId(item)}>
<StyledLabelIcon
sx={{
backgroundColor: item.color,

View File

@ -0,0 +1,51 @@
import { useMemo, type VFC } from 'react';
import 'chartjs-adapter-date-fns';
import { useTheme } from '@mui/material';
import {
ExecutiveSummarySchema,
ExecutiveSummarySchemaProjectFlagTrendsItem,
} from 'openapi';
import { LineChart } from '../LineChart/LineChart';
import { getRandomColor } from '../executive-dashboard-utils';
interface IFlagsProjectChartProps {
projectFlagTrends: ExecutiveSummarySchema['projectFlagTrends'];
}
export const ProjectHealthChart: VFC<IFlagsProjectChartProps> = ({
projectFlagTrends,
}) => {
const theme = useTheme();
const data = useMemo(() => {
const groupedFlagTrends = projectFlagTrends.reduce<
Record<string, ExecutiveSummarySchemaProjectFlagTrendsItem[]>
>((groups, item) => {
if (!groups[item.project]) {
groups[item.project] = [];
}
groups[item.project].push(item);
return groups;
}, {});
const datasets = Object.entries(groupedFlagTrends).map(
([project, trends]) => {
const color = getRandomColor();
return {
label: project,
data: trends.map((item) => item.health || 0),
borderColor: color,
backgroundColor: color,
fill: true,
};
},
);
return {
labels: projectFlagTrends.map((item) => item.date),
datasets,
};
}, [theme, projectFlagTrends]);
return <LineChart data={data} />;
};

View File

@ -0,0 +1,9 @@
// TODO: Replace this function with something more tailored to our color palette
export const getRandomColor = () => {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};