diff --git a/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx b/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
index 171303331324..1098adad9004 100644
--- 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 = () => {
}
/>
+
+
+
>
);
diff --git a/frontend/src/component/executiveDashboard/FlagsProjectChart/FlagsProjectChart.tsx b/frontend/src/component/executiveDashboard/FlagsProjectChart/FlagsProjectChart.tsx
index 8bc0f2a79b4c..5f4255b5fd73 100644
--- 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 = ({
projectFlagTrends,
}) => {
diff --git a/frontend/src/component/executiveDashboard/LineChart/ChartTooltip/ChartTooltip.tsx b/frontend/src/component/executiveDashboard/LineChart/ChartTooltip/ChartTooltip.tsx
index 3a3a889029d7..40f3d5c3d091 100644
--- 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 = ({ tooltip }) => (
}
{tooltip?.body.map((item) => (
-
+
= ({
+ projectFlagTrends,
+}) => {
+ const theme = useTheme();
+
+ const data = useMemo(() => {
+ const groupedFlagTrends = projectFlagTrends.reduce<
+ Record
+ >((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 ;
+};
diff --git a/frontend/src/component/executiveDashboard/executive-dashboard-utils.ts b/frontend/src/component/executiveDashboard/executive-dashboard-utils.ts
new file mode 100644
index 000000000000..e71f7712851c
--- /dev/null
+++ 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;
+};