Feat: metrics chart tooltip refactoring (#6414)

Refactoring after moving aggregation to BE
<img width="1357" alt="Screenshot 2024-03-04 at 12 14 28"
src="https://github.com/Unleash/unleash/assets/104830839/9881ba13-69a3-49d9-bb3f-3316a9287a06">

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

frontend/src/component/application/ApplicationChart.tsx

@@ -5,7 +5,7 @@ import { FC, useLayoutEffect, useRef, useState } from 'react';
 import {
     ApplicationOverviewEnvironmentSchema,
     ApplicationOverviewSchema,
-} from '../../openapi';
+} from 'openapi';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { HelpIcon } from '../common/HelpIcon/HelpIcon';
 import { CloudCircle, Flag, WarningAmberRounded } from '@mui/icons-material';

frontend/src/component/executiveDashboard/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx

@@ -109,7 +109,7 @@ export const MetricsSummaryTooltip: VFC<{ tooltip: TooltipState | null }> = ({
                     />
                     <InfoLine
                         iconChar={'▣ '}
-                        title={`Total requests: ${point.value.total}`}
+                        title={`Total requests: ${point.value.totalRequests}`}
                         color={'info'}
                     />
                     <InfoLine

frontend/src/component/executiveDashboard/MetricsSummaryChart/MetricsSummaryChart.tsx

@@ -19,7 +19,7 @@ export const MetricsSummaryChart: VFC<IMetricsSummaryChartProps> = ({
             isLocalTooltip
             TooltipComponent={MetricsSummaryTooltip}
             overrideOptions={{
-                parsing: { yAxisKey: 'total', xAxisKey: 'weekId' },
+                parsing: { yAxisKey: 'totalRequests', xAxisKey: 'week' },
             }}
         />
     );

frontend/src/component/executiveDashboard/useMetricsSummary.ts

@@ -1,72 +1,32 @@
 import { useMemo } from 'react';
 import { useTheme } from '@mui/material';
-import { ExecutiveSummarySchema } from '../../openapi';
-import { parseISO, getISOWeek, format } from 'date-fns';
+import {
+    ExecutiveSummarySchema,
+    ExecutiveSummarySchemaMetricsSummaryTrendsItem,
+} from 'openapi';
 import { getProjectColor } from './executive-dashboard-utils';
 
 type MetricsSummaryTrends = ExecutiveSummarySchema['metricsSummaryTrends'];
 
-interface GroupedData {
-    [key: string]: {
-        [week: string]: {
-            total: number;
-            totalYes: number;
-            totalNo: number;
-            totalApps: number;
-            totalEnvironments: number;
-            totalFlags: number;
-        };
-    };
-}
+type GroupedDataByProject = Record<
+    string,
+    ExecutiveSummarySchemaMetricsSummaryTrendsItem[]
+>;
 
-function groupAndSumData(data: MetricsSummaryTrends): any {
-    const groupedData: GroupedData = {};
+function groupDataByProject(
+    data: ExecutiveSummarySchemaMetricsSummaryTrendsItem[],
+): GroupedDataByProject {
+    const groupedData: GroupedDataByProject = {};
 
     data.forEach((item) => {
-        const weekNumber = getISOWeek(parseISO(item.date));
-        const year = format(parseISO(item.date), 'yyyy');
-        const weekId = `${year}-${weekNumber.toString().padStart(2, '0')}`;
-        const project = item.project;
-
+        const { project } = item;
         if (!groupedData[project]) {
-            groupedData[project] = {};
-        }
-
-        if (!groupedData[project][weekId]) {
-            groupedData[project][weekId] = {
-                total: 0,
-                totalYes: 0,
-                totalNo: 0,
-                totalApps: 0,
-                totalEnvironments: 0,
-                totalFlags: 0,
-            };
+            groupedData[project] = [];
         }
-
-        groupedData[project][weekId].total += item.totalYes + item.totalNo;
-        groupedData[project][weekId].totalYes += item.totalYes;
-        groupedData[project][weekId].totalNo += item.totalNo;
-        groupedData[project][weekId].totalApps += item.totalApps;
-        groupedData[project][weekId].totalEnvironments +=
-            item.totalEnvironments;
-        groupedData[project][weekId].totalFlags += item.totalFlags;
+        groupedData[project].push(item);
     });
 
-    return Object.entries(groupedData).map(([project, weeks]) => {
-        const color = getProjectColor(project);
-        return {
-            label: project,
-            borderColor: color,
-            backgroundColor: color,
-            fill: false,
-            data: Object.entries(weeks)
-                .sort(([weekA], [weekB]) => weekA.localeCompare(weekB))
-                .map(([weekId, values]) => ({
-                    weekId,
-                    ...values,
-                })),
-        };
-    });
+    return groupedData;
 }
 
 export const useMetricsSummary = (
@@ -75,7 +35,20 @@ export const useMetricsSummary = (
     const theme = useTheme();
 
     const data = useMemo(() => {
-        return { datasets: groupAndSumData(metricsSummaryTrends) };
+        const groupedMetrics = groupDataByProject(metricsSummaryTrends);
+        const datasets = Object.entries(groupedMetrics).map(
+            ([project, trends]) => {
+                const color = getProjectColor(project);
+                return {
+                    label: project,
+                    data: trends,
+                    borderColor: color,
+                    backgroundColor: color,
+                    fill: false,
+                };
+            },
+        );
+        return { datasets };
     }, [theme, metricsSummaryTrends]);
 
     return data;

frontend/src/openapi/models/applicationOverviewIssuesSchemaType.ts

@@ -0,0 +1,17 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+/**
+ * The name of this action.
+ */
+export type ApplicationOverviewIssuesSchemaType =
+    (typeof ApplicationOverviewIssuesSchemaType)[keyof typeof ApplicationOverviewIssuesSchemaType];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const ApplicationOverviewIssuesSchemaType = {
+    missingFeatures: 'missingFeatures',
+    missingStrategies: 'missingStrategies',
+} as const;

frontend/src/openapi/models/executiveSummarySchemaMetricsSummaryTrendsItem.ts

@@ -5,8 +5,6 @@
  */
 
 export type ExecutiveSummarySchemaMetricsSummaryTrendsItem = {
-    /** Date the impressions summary were calculated */
-    date: string;
     /** Project id of the project the impressions summary belong to */
     project: string;
     /** Total number of applications the impression data belong to */
@@ -17,6 +15,10 @@ export type ExecutiveSummarySchemaMetricsSummaryTrendsItem = {
     totalFlags: number;
     /** Total number of times all project flags were not exposed across all environments */
     totalNo: number;
+    /** Total number of times all project flags were requested  */
+    totalRequests: number;
     /** Total number of times all project flags were exposed across all environments */
     totalYes: number;
+    /** Year and week in a given year for which the metrics summary was calculated */
+    week: string;
 };

frontend/src/openapi/models/index.ts

@@ -575,7 +575,6 @@ export * from './getAllToggles403';
 export * from './getApiTokensByName401';
 export * from './getApiTokensByName403';
 export * from './getApplication404';
-export * from './getApplicationEnvironmentInstances404';
 export * from './getApplicationOverview404';
 export * from './getApplicationsParams';
 export * from './getArchivedFeatures401';