From 7b399d24e4d8d4455a1b1e8eaded4c0c6de933d8 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Thu, 21 Mar 2024 09:43:28 +0200
Subject: [PATCH] fix: do not show flagsPerUser when calculation results to NaN

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 frontend/src/component/executiveDashboard/Charts.tsx  |  5 ++---
 .../componentsStat/FlagStats/FlagStats.tsx            |  6 +-----
 .../executiveDashboard/hooks/useDashboardData.ts      |  5 ++++-
 .../hooks/useFilteredFlagsSummary.ts                  | 11 ++++++++++-
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/executiveDashboard/Charts.tsx b/frontend/src/component/executiveDashboard/Charts.tsx
index 06eaea9ba9..85343f89b7 100644
--- a/frontend/src/component/executiveDashboard/Charts.tsx
+++ b/frontend/src/component/executiveDashboard/Charts.tsx
@@ -39,6 +39,7 @@ interface IChartsProps {
         potentiallyStale: number;
         averageUsers: number;
         averageHealth?: string;
+        flagsPerUser?: string;
     };
     avgDaysToProduction: number;
     loading: boolean;
@@ -124,9 +125,7 @@ export const Charts: VFC<IChartsProps> = ({
                     <FlagStats
                         count={summary.total}
                         flagsPerUser={
-                            showAllProjects
-                                ? (summary.total / users.total).toFixed(2)
-                                : ''
+                            showAllProjects ? summary.flagsPerUser : ''
                         }
                     />
                 </Widget>
diff --git a/frontend/src/component/executiveDashboard/componentsStat/FlagStats/FlagStats.tsx b/frontend/src/component/executiveDashboard/componentsStat/FlagStats/FlagStats.tsx
index b289afc783..1a48e920a8 100644
--- a/frontend/src/component/executiveDashboard/componentsStat/FlagStats/FlagStats.tsx
+++ b/frontend/src/component/executiveDashboard/componentsStat/FlagStats/FlagStats.tsx
@@ -83,11 +83,7 @@ export const FlagStats: React.FC<IFlagStatsProps> = ({
             </StyledRingContainer>
 
             <ConditionallyRender
-                condition={
-                    flagsPerUser !== undefined &&
-                    flagsPerUser !== '' &&
-                    flagsPerUser !== 'NaN'
-                }
+                condition={flagsPerUser !== undefined && flagsPerUser !== ''}
                 show={
                     <StyledInsightsContainer>
                         <StyledTextContainer>
diff --git a/frontend/src/component/executiveDashboard/hooks/useDashboardData.ts b/frontend/src/component/executiveDashboard/hooks/useDashboardData.ts
index 09059e1e93..50cf54fb64 100644
--- a/frontend/src/component/executiveDashboard/hooks/useDashboardData.ts
+++ b/frontend/src/component/executiveDashboard/hooks/useDashboardData.ts
@@ -22,7 +22,10 @@ export const useDashboardData = (
     );
     const groupedMetricsData = useGroupedProjectTrends(metricsData);
 
-    const summary = useFilteredFlagsSummary(projectsData);
+    const summary = useFilteredFlagsSummary(
+        projectsData,
+        executiveDashboardData.users,
+    );
 
     const avgDaysToProduction = useAvgTimeToProduction(groupedProjectsData);
 
diff --git a/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.ts b/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.ts
index 026ed357d7..7348532b7c 100644
--- a/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.ts
+++ b/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.ts
@@ -1,9 +1,13 @@
 import { useMemo } from 'react';
-import type { ExecutiveSummarySchemaProjectFlagTrendsItem } from 'openapi';
+import type {
+    ExecutiveSummarySchema,
+    ExecutiveSummarySchemaProjectFlagTrendsItem,
+} from 'openapi';
 
 // NOTE: should we move project filtering to the backend?
 export const useFilteredFlagsSummary = (
     filteredProjectFlagTrends: ExecutiveSummarySchemaProjectFlagTrendsItem[],
+    users: ExecutiveSummarySchema['users'],
 ) =>
     useMemo(() => {
         const lastWeekId = filteredProjectFlagTrends.reduce((prev, current) => {
@@ -38,8 +42,13 @@ export const useFilteredFlagsSummary = (
             },
         );
 
+        const flagsPerUser = sum.total / users.total;
+
         return {
             ...sum,
+            flagsPerUser: Number.isNaN(flagsPerUser)
+                ? 'N/A'
+                : flagsPerUser.toFixed(2),
             averageUsers,
             averageHealth: sum.total
                 ? ((sum.active / (sum.total || 1)) * 100).toFixed(0)