Datadog Alert Dedupe Stats Integration Block for React

From one typed list at the top of the file, WEEK: seven days, each with the alerts received and the incidents opened. Everything else is worked out from it: the totals in the header and the band, the share folded in (FOLDED, alerts minus incidents over alerts, rounded), the scale of the plot (CEILING, the busiest day rounded up) and every bar's height. Edit the seven pairs and the headline, the band and the bars all follow. They are example figures, and the caption under the plot says so.

No. Nothing connects, reads or sends anything, and the block has no state. To feed it, count the alerts your server received through Datadog's API for each day and the incidents your product opened, and fill WEEK. The dates are fixed text, Mon 5 Oct to Sun 11 Oct 2026, never computed from the clock.

The plot is hidden from assistive technology and its numbers sit in a visually hidden table with a caption, a column per measure and a row per day, so the same data is read in order. The header and the band carry the totals in text. The two bars are told apart by height and by fill (light and solid), never by colour, and the legend under the plot names them.

Aftermark groups the alerts that fire for the same problem under one incident. "Folded in" is the share of alerts that joined an incident that was already open instead of opening a new one: with 395 alerts and 55 incidents, 340 of 395 joined an existing incident, which rounds to 86%. Change FOLDED if your product counts it differently.

The seven columns narrow and keep their order on a phone, and the band's three figures stack one per row. The plot keeps its left-to-right time order in a right-to-left layout, while the header, the band and the captions flip; the counts sit in bdi elements so numbers keep their shape. The bars rise once with a CSS transition on load; with reduced motion they simply appear.