diff --git a/frontend/src/component/executiveDashboard/FlagsProjectChart/FlagsProjectChart.tsx b/frontend/src/component/executiveDashboard/FlagsProjectChart/FlagsProjectChart.tsx index 88a943c9a1..0a8356f124 100644 --- a/frontend/src/component/executiveDashboard/FlagsProjectChart/FlagsProjectChart.tsx +++ b/frontend/src/component/executiveDashboard/FlagsProjectChart/FlagsProjectChart.tsx @@ -11,7 +11,18 @@ interface IFlagsProjectChartProps { export const FlagsProjectChart: VFC = ({ projectFlagTrends, }) => { - const data = useProjectChartData(projectFlagTrends, 'total'); + const data = useProjectChartData(projectFlagTrends); - return ; + return ( + + ); }; diff --git a/frontend/src/component/executiveDashboard/LineChart/LineChartComponent.tsx b/frontend/src/component/executiveDashboard/LineChart/LineChartComponent.tsx index 5f606400cc..e8024032b2 100644 --- a/frontend/src/component/executiveDashboard/LineChart/LineChartComponent.tsx +++ b/frontend/src/component/executiveDashboard/LineChart/LineChartComponent.tsx @@ -10,8 +10,8 @@ import { Chart, Filler, type ChartData, - type ScatterDataPoint, TooltipModel, + ChartOptions, } from 'chart.js'; import { Line } from 'react-chartjs-2'; import 'chartjs-adapter-date-fns'; @@ -223,28 +223,38 @@ const customHighlightPlugin = { }; const LineChartComponent: VFC<{ - data: ChartData<'line', (number | ScatterDataPoint | null)[], unknown>; + data: ChartData<'line', unknown>; aspectRatio?: number; cover?: ReactNode; isLocalTooltip?: boolean; + overrideOptions?: ChartOptions<'line'>; TooltipComponent?: ({ tooltip, }: { tooltip: TooltipState | null }) => ReturnType; -}> = ({ data, aspectRatio, cover, isLocalTooltip, TooltipComponent }) => { +}> = ({ + data, + aspectRatio, + cover, + isLocalTooltip, + overrideOptions, + TooltipComponent, +}) => { const theme = useTheme(); const { locationSettings } = useLocationSettings(); const [tooltip, setTooltip] = useState(null); const options = useMemo( - () => - createOptions( + () => ({ + ...createOptions( theme, locationSettings, setTooltip, Boolean(cover), isLocalTooltip, ), - [theme, locationSettings], + ...overrideOptions, + }), + [theme, locationSettings, overrideOptions], ); return ( diff --git a/frontend/src/component/executiveDashboard/ProjectHealthChart/ProjectHealthChart.tsx b/frontend/src/component/executiveDashboard/ProjectHealthChart/ProjectHealthChart.tsx index 2666f57935..cf8caa44a8 100644 --- a/frontend/src/component/executiveDashboard/ProjectHealthChart/ProjectHealthChart.tsx +++ b/frontend/src/component/executiveDashboard/ProjectHealthChart/ProjectHealthChart.tsx @@ -74,13 +74,19 @@ const TooltipComponent: VFC<{ tooltip: TooltipState | null }> = ({ export const ProjectHealthChart: VFC = ({ projectFlagTrends, }) => { - const data = useProjectChartData(projectFlagTrends, 'health'); + const data = useProjectChartData(projectFlagTrends); return ( ); }; diff --git a/frontend/src/component/executiveDashboard/TimeToProductionChart/TimeToProductionChart.tsx b/frontend/src/component/executiveDashboard/TimeToProductionChart/TimeToProductionChart.tsx index b1ebe444c8..a8140e921d 100644 --- a/frontend/src/component/executiveDashboard/TimeToProductionChart/TimeToProductionChart.tsx +++ b/frontend/src/component/executiveDashboard/TimeToProductionChart/TimeToProductionChart.tsx @@ -11,7 +11,18 @@ interface IFlagsProjectChartProps { export const TimeToProductionChart: VFC = ({ projectFlagTrends, }) => { - const data = useProjectChartData(projectFlagTrends, 'timeToProduction'); + const data = useProjectChartData(projectFlagTrends); - return ; + return ( + + ); }; diff --git a/frontend/src/component/executiveDashboard/useProjectChartData.ts b/frontend/src/component/executiveDashboard/useProjectChartData.ts index 1ccea8ad48..08354f0999 100644 --- a/frontend/src/component/executiveDashboard/useProjectChartData.ts +++ b/frontend/src/component/executiveDashboard/useProjectChartData.ts @@ -8,10 +8,7 @@ import { useTheme } from '@mui/material'; type ProjectFlagTrends = ExecutiveSummarySchema['projectFlagTrends']; -export const useProjectChartData = ( - projectFlagTrends: ProjectFlagTrends, - field: 'timeToProduction' | 'total' | 'health', -) => { +export const useProjectChartData = (projectFlagTrends: ProjectFlagTrends) => { const theme = useTheme(); const data = useMemo(() => { @@ -30,9 +27,7 @@ export const useProjectChartData = ( const color = getProjectColor(project); return { label: project, - data: trends.map((item) => { - return item[field] || 0; - }), + data: trends, borderColor: color, backgroundColor: color, fill: false, @@ -40,15 +35,7 @@ export const useProjectChartData = ( }, ); - const objectKeys = Object.keys(groupedFlagTrends); - - const firstElementTrends = groupedFlagTrends[objectKeys[0]] || []; - const firstElementsDates = firstElementTrends.map((item) => item.date); - - return { - labels: firstElementsDates, - datasets, - }; + return { datasets }; }, [theme, projectFlagTrends]); return data;