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;