Colour Alert History frequency bars by severity

The frequency chart drew every period in one blue under a legend of
coloured severity dots that described nothing in the bars, left info
alerts out of that legend, and used a floored log scale on which a
25-alert burst looked barely three times one alert.

Each period now stacks critical, warning and info in the legend's own
colours, counted with the alerts contract's closed severity vocabulary,
and bars scale by the square root of their share of the busiest period so
a burst stands clear while quiet periods keep a readable mix. The legend
counts all three severities, and the tooltip and accessible name carry
each period's breakdown. Light-theme warnings use amber-700 because
yellow on the chart surface was under 2:1, and a selected period is
ringed instead of dimming the rest below 3:1.

The chart's two test files are registered as alerts frontend proofs.
This commit is contained in:
rcourtman
2026-10-14 21:34:03 +01:00
parent 477a81e603
commit e63da80b65
11 changed files with 309 additions and 48 deletions
@@ -2486,6 +2486,7 @@ None yet.
"frontend-modern/src/components/Alerts/__tests__/ThresholdsTable.test.tsx",
"frontend-modern/src/features/alerts/AlertDeliveryHealthCard.test.tsx",
"frontend-modern/src/features/alerts/__tests__/AlertDeadManDestinationSection.test.tsx",
"frontend-modern/src/features/alerts/__tests__/AlertHistoryFrequencyCard.test.tsx",
"frontend-modern/src/features/alerts/__tests__/AlertIncidentSynthesisSummary.test.tsx",
"frontend-modern/src/features/alerts/__tests__/AlertIntentPolicyPanel.test.tsx",
"frontend-modern/src/features/alerts/__tests__/AlertOverviewAlertCard.system-scope.test.tsx",
@@ -2493,6 +2494,7 @@ None yet.
"frontend-modern/src/features/alerts/__tests__/OverviewTab.timelineerror.test.tsx",
"frontend-modern/src/features/alerts/__tests__/OverviewTab.total24h.test.tsx",
"frontend-modern/src/features/alerts/__tests__/ThresholdsTab.test.tsx",
"frontend-modern/src/features/alerts/__tests__/alertHistoryModel.test.ts",
"frontend-modern/src/features/alerts/__tests__/alertsConfigurationModel.test.ts",
"frontend-modern/src/features/alerts/__tests__/helpers.test.ts",
"frontend-modern/src/features/alerts/__tests__/useAlertDestinationsState.test.tsx",