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 = ({ 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 = ({ 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)