shadcn.io is not affiliated with official shadcn/ui
Datadog Alert Dedupe Stats Integration Block for Vue
A usage section for a post-incident review tool connected to Datadog: seven day columns, each a tall light bar of alerts received with a short solid bar of the incidents opened inside it, and a closing band of three figures.
Installation
Overview
An integration usage section for Vue with Ark UI, written for Aftermark, a fictional post-incident review tool, and its Datadog connection. A compact header states the week's result, worked out from the data ("Aftermark folded 395 Datadog alerts into 55 incidents"), with the mark pair at its end. In a framed figure with + marks on its corners, seven day columns each draw a tall light bar of the alerts received and a short solid bar of the incidents opened inside it, with the alert count above the bar and the incident count under the day. A closing band under the frame holds three figures between hairlines: alerts received, incidents opened and the share of alerts folded into an incident that was already open. The bars rise once on load. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides with CSS for the bars and your theme's tokens for every colour: no hue, no chart library. Datadog is named in text only: no logo, colour or wordmark ships with the block. The week and its figures are example data.
FAQ
Where do the numbers come from?
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.
Does it read Datadog?
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.
How does a screen reader get the chart?
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.
What does folded in mean?
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.
How does it fit on a phone and in right-to-left layouts?
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.