feat: simplified insights data fetching (#6342)

Simplify insights data fetching - let charts pick data instead of preparing labels in hook.
Unleash · Feb 27, 2024 · ed44de6 · ed44de6
1 parent 7cebf7b
commit ed44de6
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 27 deletions.
diff --git 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<IFlagsProjectChartProps> = ({
     projectFlagTrends,
 }) => {
-    const data = useProjectChartData(projectFlagTrends, 'total');
+    const data = useProjectChartData(projectFlagTrends);
 
-    return <LineChart data={data} isLocalTooltip />;
+    return (
+        <LineChart
+            data={data}
+            isLocalTooltip
+            overrideOptions={{
+                parsing: {
+                    yAxisKey: 'total',
+                    xAxisKey: 'date',
+                },
+            }}
+        />
+    );
 };
diff --git 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<VFC>;
-}> = ({ data, aspectRatio, cover, isLocalTooltip, TooltipComponent }) => {
+}> = ({
+    data,
+    aspectRatio,
+    cover,
+    isLocalTooltip,
+    overrideOptions,
+    TooltipComponent,
+}) => {
     const theme = useTheme();
     const { locationSettings } = useLocationSettings();
 
     const [tooltip, setTooltip] = useState<null | TooltipState>(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
@@ -74,13 +74,19 @@ const TooltipComponent: VFC<{ tooltip: TooltipState | null }> = ({
 export const ProjectHealthChart: VFC<IFlagsProjectChartProps> = ({
     projectFlagTrends,
 }) => {
-    const data = useProjectChartData(projectFlagTrends, 'health');
+    const data = useProjectChartData(projectFlagTrends);
 
     return (
         <LineChart
             data={data}
             isLocalTooltip
             TooltipComponent={TooltipComponent}
+            overrideOptions={{
+                parsing: {
+                    yAxisKey: 'health',
+                    xAxisKey: 'date',
+                },
+            }}
         />
     );
 };
diff --git 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<IFlagsProjectChartProps> = ({
     projectFlagTrends,
 }) => {
-    const data = useProjectChartData(projectFlagTrends, 'timeToProduction');
+    const data = useProjectChartData(projectFlagTrends);
 
-    return <LineChart data={data} isLocalTooltip />;
+    return (
+        <LineChart
+            data={data}
+            isLocalTooltip
+            overrideOptions={{
+                parsing: {
+                    yAxisKey: 'timeToProduction',
+                    xAxisKey: 'date',
+                },
+            }}
+        />
+    );
 };
diff --git 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,25 +27,15 @@ 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,
                 };
             },
         );
 
-        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;