Region Status Footer Block for React

Edit REGIONS: each region has an id, a city, a p50 in milliseconds and thirty days. history([13]) builds the days and lists, as "days ago", which ones were degraded. Replace that with your own series (any list of { ago, state } objects, oldest first) and the bars, the "today" dot and the sentence under each bar all follow. The block fetches nothing itself.

Only for the exception. A normal day is the foreground tone, so a month of calm reads as one quiet bar, and a degraded day takes the Status warning token. The sentence under each bar gives the same count in words ("1 degraded day, the last 13 days ago"), and each bar is one image named with that sentence, so nobody has to read thirty cells.

It opens on press or Enter and holds three links: Email, RSS and Webhook, each with one line saying what you get. Escape or a press outside closes it. It does not trap focus. The Ark popover is set to non-modal, so the rest of the page stays readable while it is open.

Yes, with one deliberate exception: the thirty-day bar and its "30 days ago" and "Today" ends keep their order in every direction, because a time series reads oldest to newest. Everything else mirrors, and the latency figure is isolated so its digits stay together.

The halves stack with a rule between them: the brand, the subscribe button and the links first, then the figure at the full width, then the legal row. The bars shrink with the width (each cell is a flexible slice), so thirty cells still fit at 320 pixels.