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; +};