From 0cd64780fadef9f7e26f637a130a666953545f14 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 25 Aug 2025 16:09:44 +0200 Subject: [PATCH] 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: image image After: image image Closes 1-4018, 1-4013, 1-4014 --- .../CreationArchiveChart.tsx | 96 ++++--------------- .../CreationArchiveTooltip.tsx | 43 +++------ .../CreationArchiveChart/flagTypeColors.ts | 1 + .../CreationArchiveChart/types.ts | 1 - 4 files changed, 31 insertions(+), 110 deletions(-) diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx index c58285724f..e3fcb657c3 100644 --- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx +++ b/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 = ({ ), ); - const allFlagTypes = new Set(); - 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 = ({ const createInitialWeekData = (label: string): WeekData => ({ archivedFlags: 0, totalCreatedFlags: 0, - createdFlagsByType: {}, archivePercentage: 0, week: label, }); @@ -120,40 +103,28 @@ export const CreationArchiveChart: FC = ({ })) .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 = ({ const data = notEnoughData || isLoading ? placeholderData : aggregateOrProjectData; - const flagTypeNames = aggregateOrProjectData.flagTypeNames || []; - return ( <> = ({ 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 = ({ width={250} /> {tooltip?.dataPoints?.some( - (point) => point.dataset.label !== 'Archived flags', + (point) => point.dataset.label !== 'Flags archived', ) ? ( ) : ( diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx index 2fc274f68c..4cb525bfa2 100644 --- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx +++ b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx @@ -41,30 +41,12 @@ export const CreationArchiveTooltip: FC = ({ 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 ( @@ -77,19 +59,18 @@ export const CreationArchiveTooltip: FC = ({ Flag type - {flagTypeEntries.map(({ type, count, color }) => ( - - - - {'● '} - - {type.charAt(0).toUpperCase() + type.slice(1)} - - - {count} - - - ))} + + + {'● '} + + Total created: + + + {rawData.totalCreatedFlags} + ); diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/flagTypeColors.ts b/frontend/src/component/insights/componentsChart/CreationArchiveChart/flagTypeColors.ts index 5455478703..a206b6e8f5 100644 --- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/flagTypeColors.ts +++ b/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) => [ diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/types.ts b/frontend/src/component/insights/componentsChart/CreationArchiveChart/types.ts index 0276e01ca7..3a3570aa95 100644 --- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/types.ts +++ b/frontend/src/component/insights/componentsChart/CreationArchiveChart/types.ts @@ -1,7 +1,6 @@ export type WeekData = { archivedFlags: number; totalCreatedFlags: number; - createdFlagsByType: Record; archivePercentage: number; week: string; date?: string;