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">
Unleash · Jan 31, 2024 · 79e86e1 · 79e86e1
1 parent fcb8bf6
commit 79e86e1
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 10 deletions.
diff --git a/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx b/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
@@ -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>
         </>
     );

diff --git a/frontend/src/component/executiveDashboard/FlagsProjectChart/FlagsProjectChart.tsx b/frontend/src/component/executiveDashboard/FlagsProjectChart/FlagsProjectChart.tsx
@@ -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,
 }) => {

diff --git a/frontend/src/component/executiveDashboard/LineChart/ChartTooltip/ChartTooltip.tsx b/frontend/src/component/executiveDashboard/LineChart/ChartTooltip/ChartTooltip.tsx
@@ -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,

diff --git a/frontend/src/component/executiveDashboard/ProjectHealthChart/ProjectHealthChart.tsx b/frontend/src/component/executiveDashboard/ProjectHealthChart/ProjectHealthChart.tsx
@@ -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} />;
+};
diff --git a/frontend/src/component/executiveDashboard/executive-dashboard-utils.ts b/frontend/src/component/executiveDashboard/executive-dashboard-utils.ts
@@ -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;
+};