fix: do not show flagsPerUser when calculation results to NaN

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

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
+                            showAllProjects ? summary.flagsPerUser : ''
-                                ? (summary.total / users.total).toFixed(2)
-                                : ''
                         }
                     />
                 </Widget>

frontend/src/component/executiveDashboard/componentsStat/FlagStats/FlagStats.tsx

@@ -83,11 +83,7 @@ export const FlagStats: React.FC<IFlagStatsProps> = ({
             </StyledRingContainer>
 
             <ConditionallyRender
-                condition={
+                condition={flagsPerUser !== undefined && flagsPerUser !== ''}
-                    flagsPerUser !== undefined &&
-                    flagsPerUser !== '' &&
-                    flagsPerUser !== 'NaN'
-                }
                 show={
                     <StyledInsightsContainer>
                         <StyledTextContainer>

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);
 

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)