-
-
Notifications
You must be signed in to change notification settings - Fork 654
/
ProjectHealthChart.tsx
108 lines (101 loc) · 3.61 KB
/
ProjectHealthChart.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import 'chartjs-adapter-date-fns';
import { useMemo, type VFC } from 'react';
import type { InstanceInsightsSchema } from 'openapi';
import { HealthTooltip } from './HealthChartTooltip/HealthChartTooltip';
import { useProjectChartData } from 'component/insights/hooks/useProjectChartData';
import {
fillGradientPrimary,
LineChart,
NotEnoughData,
} from 'component/insights/components/LineChart/LineChart';
import { useTheme } from '@mui/material';
import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends';
interface IProjectHealthChartProps {
projectFlagTrends: GroupedDataByProject<
InstanceInsightsSchema['projectFlagTrends']
>;
isAggregate?: boolean;
}
export const ProjectHealthChart: VFC<IProjectHealthChartProps> = ({
projectFlagTrends,
isAggregate,
}) => {
const projectsData = useProjectChartData(projectFlagTrends);
const theme = useTheme();
const aggregateHealthData = useMemo(() => {
const labels = Array.from(
new Set(
projectsData.datasets.flatMap((d) =>
d.data.map((item) => item.week),
),
),
);
const weeks = labels
.map((label) => {
return projectsData.datasets
.map((d) => d.data.find((item) => item.week === label))
.reduce(
(acc, item) => {
if (item) {
acc.total += item.total;
acc.stale += item.stale + item.potentiallyStale;
}
if (!acc.date) {
acc.date = item?.date;
}
return acc;
},
{
total: 0,
stale: 0,
week: label,
} as {
total: number;
stale: number;
week: string;
date?: string;
},
);
})
.sort((a, b) => (a.week > b.week ? 1 : -1));
return {
datasets: [
{
label: 'Health',
data: weeks.map((item) => ({
health: item.total
? ((item.total - item.stale) / item.total) * 100
: undefined,
date: item.date,
})),
borderColor: theme.palette.primary.light,
backgroundColor: fillGradientPrimary,
fill: true,
order: 3,
},
],
};
}, [projectsData, theme]);
const data = isAggregate ? aggregateHealthData : projectsData;
const notEnoughData = useMemo(
() =>
projectsData.datasets.some((d) => d.data.length > 1) ? false : true,
[projectsData],
);
return (
<LineChart
key={isAggregate ? 'aggregate' : 'project'}
data={data}
isLocalTooltip
TooltipComponent={isAggregate ? undefined : HealthTooltip}
overrideOptions={
notEnoughData
? {}
: {
parsing: { yAxisKey: 'health', xAxisKey: 'date' },
}
}
cover={notEnoughData ? <NotEnoughData /> : false}
/>
);
};