Tabbed Window Uptime History Block for React

Edit SERVICES at the top of the file: each service has an id, a name and a list of incidents with an ISO date between Jul 3 and Sep 30, 2026, the minutes lost and what happened. The strip, the uptime on each tab, the large figure, the table and the fleet figure in the title are all computed from that list. The numbers in the block are example data.

The strip is an image with a text alternative that states the service, its uptime, the days with downtime and the minutes lost in all, so nothing depends on seeing the bars. The same incidents are in the table under it, a real table with a caption, and a polite status line announces the new service's figures when you change tab.

The tab list is a single tab stop; the arrow keys move between services, Home and End jump to the first and last, and the open panel follows. Focus moves with the arrow keys and selects as it goes.

No. Every service's panel is also rendered once, unseen and inert, in the same grid cell as the open panel, so the cell is always as tall as the tallest panel. The large figure uses Sliding Number, which rolls only the digits that changed (and swaps them in place with reduced motion).

The three tabs share the width, and the strip shows the last 45 days: the older bars are removed, the date under the strip's start changes from Jul 3 to Aug 17, and a line says so. The figure and the table still cover all 90 days. Nothing scrolls sideways at 320 pixels.

Yes. The strip is a time series, so it keeps its own left-to-right direction and the oldest day stays at the start; the percentages and minutes are isolated so they don't reorder, and the tab list follows the page's direction.