Simplify created numbers (don't show count by flag type) and update colors (#10531)

Simplifies the data we show for the archive vs creation chart by not
showing the created count by flag type. Instead, all we show is the
total.

Also, in doing this, updates the colors we use for the bars (to A1, and
A2). The contrast is a little low between A1 and A2, so we should look
at that before taking this into production.

The created tooltip colors are wrong, but we'll need to update the
tooltip in a later PR, so not tackling that now.

Before:
<img width="1115" height="456" alt="image"
src="https://github.com/user-attachments/assets/13626295-1aa5-42be-b8dd-cea9912effe0"
/>
<img width="564" height="311" alt="image"
src="https://github.com/user-attachments/assets/7a02eec0-e018-49fd-8b1f-92aa3376a6cc"
/>



After: 
<img width="1179" height="481" alt="image"
src="https://github.com/user-attachments/assets/1ba6584a-d7e2-4ae4-81ec-38260c1f0e07"
/>

<img width="420" height="159" alt="image"
src="https://github.com/user-attachments/assets/e4433c32-eaa4-41d2-a5ef-af84a9725c30"
/>

Closes 1-4018, 1-4013, 1-4014

frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx

@@ -25,7 +25,6 @@ import {
 } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip';
 import { createTooltip } from 'component/insights/components/LineChart/createTooltip';
 import { CreationArchiveTooltip } from './CreationArchiveTooltip.tsx';
-import { getFlagTypeColors } from './flagTypeColors.ts';
 import type { WeekData, RawWeekData } from './types.ts';
 
 ChartJS.register(
@@ -66,29 +65,14 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
             ),
         );
 
-        const allFlagTypes = new Set<string>();
-        creationVsArchivedChart.datasets.forEach((d) =>
-            d.data.forEach((item: any) => {
-                if (item.createdFlags) {
-                    Object.keys(item.createdFlags).forEach((type) =>
-                        allFlagTypes.add(type),
-                    );
-                }
-            }),
-        );
-
         const aggregateWeekData = (acc: WeekData, item: RawWeekData) => {
             if (item) {
                 acc.archivedFlags += item.archivedFlags || 0;
 
                 if (item.createdFlags) {
-                    Object.entries(item.createdFlags).forEach(
-                        ([type, count]) => {
-                            acc.createdFlagsByType[type] =
-                                (acc.createdFlagsByType[type] || 0) + count;
-                            acc.totalCreatedFlags += count;
-                        },
-                    );
+                    Object.entries(item.createdFlags).forEach(([_, count]) => {
+                        acc.totalCreatedFlags += count;
+                    });
                 }
             }
             if (!acc.date) {
@@ -100,7 +84,6 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
         const createInitialWeekData = (label: string): WeekData => ({
             archivedFlags: 0,
             totalCreatedFlags: 0,
-            createdFlagsByType: {},
             archivePercentage: 0,
             week: label,
         });
@@ -120,40 +103,28 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
             }))
             .sort((a, b) => (a.week > b.week ? 1 : -1));
 
-        const flagTypeColors = getFlagTypeColors(theme);
-
-        const flagTypeDatasets = Array.from(allFlagTypes).map(
-            (flagType, index) => ({
-                label: flagType,
-                data: weeks,
-                backgroundColor: flagTypeColors[index % flagTypeColors.length],
-                borderColor: flagTypeColors[index % flagTypeColors.length],
-                type: 'bar' as const,
-                parsing: {
-                    yAxisKey: `createdFlagsByType.${flagType}`,
-                    xAxisKey: 'date',
-                },
-                yAxisID: 'y',
-                stack: 'created',
-                order: 2,
-            }),
-        );
-
-        const flagTypeNames = Array.from(allFlagTypes);
-
         return {
             datasets: [
                 {
-                    label: 'Archived flags',
+                    label: 'Flags archived',
                     data: weeks,
-                    backgroundColor: theme.palette.neutral.border,
-                    borderColor: theme.palette.neutral.border,
+                    backgroundColor: theme.palette.charts.A2,
+                    borderColor: theme.palette.charts.A2,
                     parsing: { yAxisKey: 'archivedFlags', xAxisKey: 'date' },
+                    order: 1,
+                },
+                {
+                    label: 'Flags created',
+                    data: weeks,
+                    backgroundColor: theme.palette.charts.A1,
+                    borderColor: theme.palette.charts.A1,
+                    parsing: {
+                        yAxisKey: 'totalCreatedFlags',
+                        xAxisKey: 'date',
+                    },
                     order: 2,
                 },
-                ...flagTypeDatasets,
             ],
-            flagTypeNames,
         };
     }, [creationVsArchivedChart, theme]);
 
@@ -166,8 +137,6 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
     const data =
         notEnoughData || isLoading ? placeholderData : aggregateOrProjectData;
 
-    const flagTypeNames = aggregateOrProjectData.flagTypeNames || [];
-
     return (
         <>
             <Chart
@@ -183,35 +152,6 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                                 usePointStyle: true,
                                 padding: 21,
                                 boxHeight: 8,
-                                filter: (legendItem) => {
-                                    return !flagTypeNames.includes(
-                                        legendItem.text || '',
-                                    );
-                                },
-                                generateLabels: (chart) => {
-                                    const original =
-                                        ChartJS.defaults.plugins.legend.labels.generateLabels(
-                                            chart,
-                                        );
-                                    const filtered = original.filter(
-                                        (item) =>
-                                            !flagTypeNames.includes(
-                                                item.text || '',
-                                            ),
-                                    );
-
-                                    filtered.push({
-                                        text: 'Created Flags',
-                                        fillStyle: theme.palette.success.main,
-                                        strokeStyle: theme.palette.success.main,
-                                        lineWidth: 0,
-                                        hidden: false,
-                                        index: filtered.length,
-                                        datasetIndex: -1,
-                                    });
-
-                                    return filtered;
-                                },
                             },
                         },
                         tooltip: {
@@ -248,7 +188,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                 width={250}
             />
             {tooltip?.dataPoints?.some(
-                (point) => point.dataset.label !== 'Archived flags',
+                (point) => point.dataset.label !== 'Flags archived',
             ) ? (
                 <CreationArchiveTooltip tooltip={tooltip} />
             ) : (

frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx

@@ -41,30 +41,12 @@ export const CreationArchiveTooltip: FC<CreationArchiveTooltipProps> = ({
 
     const rawData = createdFlagDataPoints[0]?.raw as WeekData;
 
-    if (!rawData?.createdFlagsByType) {
-        return null;
-    }
-
     const flagTypeNames = createdFlagDataPoints.map(
         (point) => point.dataset.label || '',
     );
 
     const flagTypeColors = getFlagTypeColors(theme);
 
-    const flagTypeEntries = Object.entries(rawData.createdFlagsByType)
-        .filter(([, count]) => (count as number) > 0)
-        .map(([flagType, count], index) => ({
-            type: flagType,
-            count: count as number,
-            color:
-                flagTypeColors[flagTypeNames.indexOf(flagType)] ||
-                flagTypeColors[index % flagTypeColors.length],
-        }));
-
-    if (flagTypeEntries.length === 0) {
-        return null;
-    }
-
     return (
         <ChartTooltipContainer tooltip={tooltip}>
             <StyledTooltipItemContainer elevation={3}>
@@ -77,19 +59,18 @@ export const CreationArchiveTooltip: FC<CreationArchiveTooltipProps> = ({
                     Flag type
                 </Typography>
 
-                {flagTypeEntries.map(({ type, count, color }) => (
-                    <StyledFlagTypeItem key={type}>
-                        <Typography variant='body2' component='span'>
-                            <Typography sx={{ color }} component='span'>
-                                {'● '}
-                            </Typography>
-                            {type.charAt(0).toUpperCase() + type.slice(1)}
-                        </Typography>
-                        <Typography variant='body2' component='span'>
-                            {count}
-                        </Typography>
-                    </StyledFlagTypeItem>
-                ))}
+                <Typography variant='body2' component='span'>
+                    <Typography
+                        sx={{ color: flagTypeColors[0] }}
+                        component='span'
+                    >
+                        {'● '}
+                    </Typography>
+                    Total created:
+                </Typography>
+                <Typography variant='body2' component='span'>
+                    {rawData.totalCreatedFlags}
+                </Typography>
             </StyledTooltipItemContainer>
         </ChartTooltipContainer>
     );

frontend/src/component/insights/componentsChart/CreationArchiveChart/flagTypeColors.ts

@@ -1,3 +1,4 @@
+// todo (lifecycleGraphs): delete this file
 import type { Theme } from '@mui/material';
 
 export const getFlagTypeColors = (theme: Theme) => [

frontend/src/component/insights/componentsChart/CreationArchiveChart/types.ts

@@ -1,7 +1,6 @@
 export type WeekData = {
     archivedFlags: number;
     totalCreatedFlags: number;
-    createdFlagsByType: Record<string, number>;
     archivePercentage: number;
     week: string;
     date?: string;