feat: basic flag creation chart

frontend/src/component/insights/hooks/useInsightsData.ts

@@ -22,6 +22,11 @@ export const useInsightsData = (
         projects,
     );
 
+    const creationArchiveData = useFilteredTrends(
+        instanceInsights.creationArchiveTrends,
+        projects,
+    );
+
     const groupedProjectsData = useGroupedProjectTrends(projectsData);
 
     const metricsData = useFilteredTrends(
@@ -34,6 +39,9 @@ export const useInsightsData = (
 
     const groupedLifecycleData = useGroupedProjectTrends(lifecycleData);
 
+    const groupedCreationArchiveData =
+        useGroupedProjectTrends(creationArchiveData);
+
     return useMemo(
         () => ({
             ...instanceInsights,
@@ -46,6 +54,7 @@ export const useInsightsData = (
             allMetricsDatapoints,
             lifecycleData,
             groupedLifecycleData,
+            groupedCreationArchiveData,
         }),
         [
             instanceInsights,
@@ -57,6 +66,7 @@ export const useInsightsData = (
             summary,
             lifecycleData,
             groupedLifecycleData,
+            groupedCreationArchiveData,
         ],
     );
 };

frontend/src/component/insights/hooks/useProjectChartData.ts

@@ -7,6 +7,7 @@ import useProjects from 'hooks/api/getters/useProjects/useProjects';
 
 type ProjectFlagTrends = InstanceInsightsSchema['projectFlagTrends'];
 type LifecycleTrends = InstanceInsightsSchema['lifecycleTrends'];
+type CreationArchiveTrends = InstanceInsightsSchema['creationArchiveTrends'];
 
 export const calculateTechDebt = (item: {
     total: number;
@@ -25,7 +26,8 @@ export const calculateTechDebt = (item: {
 export const useProjectChartData = (
     projectFlagTrends:
         | GroupedDataByProject<ProjectFlagTrends>
-        | GroupedDataByProject<LifecycleTrends>,
+        | GroupedDataByProject<LifecycleTrends>
+        | GroupedDataByProject<CreationArchiveTrends>,
 ) => {
     const theme = useTheme();
     const getProjectColor = useProjectColor();

frontend/src/component/insights/sections/PerformanceInsights.tsx

@@ -27,6 +27,7 @@ import {
 import { useUiFlag } from 'hooks/useUiFlag';
 import { NewProductionFlagsChart } from '../componentsChart/NewProductionFlagsChart/NewProductionFlagsChart.tsx';
 import Lightbulb from '@mui/icons-material/LightbulbOutlined';
+import { CreationArchiveChart } from '../componentsChart/CreationArchiveChart/CreationArchiveChart.tsx';
 
 export const PerformanceInsights: FC = () => {
     const statePrefix = 'performance-';
@@ -63,6 +64,7 @@ export const PerformanceInsights: FC = () => {
         groupedMetricsData,
         allMetricsDatapoints,
         environmentTypeTrends,
+        groupedCreationArchiveData,
     } = useInsightsData(insights, projects);
 
     const { isEnterprise } = useUiConfig();
@@ -110,6 +112,21 @@ export const PerformanceInsights: FC = () => {
                 </StyledWidget>
             ) : null}
 
+            {isLifecycleGraphsEnabled && isEnterprise() ? (
+                <StyledWidget>
+                    <StyledWidgetStats width={275}>
+                        <WidgetTitle title='Flags created vs archived' />
+                    </StyledWidgetStats>
+                    <StyledChartContainer>
+                        <CreationArchiveChart
+                            creationArchiveTrends={groupedCreationArchiveData}
+                            isAggregate={showAllProjects}
+                            isLoading={loading}
+                        />
+                    </StyledChartContainer>
+                </StyledWidget>
+            ) : null}
+
             {showAllProjects ? (
                 <StyledWidget>
                     <StyledWidgetStats width={275}>