shadcn.io is not affiliated with official shadcn/ui
Status Matrix Stats Block for Vue
Six services by the last eight hourly check windows: passing cells in a foreground tone, degraded cells half filled, a failed cell outlined with a cross and the destructive dot, tooltips and an uptime column.
Installation
Overview
A status matrix for Vue with Ark UI. A start-aligned header counts the exceptions, "1 window failed, 5 windows degraded". A framed table follows: six services down the side, the last eight hourly check windows across (7h ago to now) and an uptime column at the end. A passing window is a cell in a foreground tone, a degraded window is half filled, and a failed window is an outlined cell with a cross and the destructive status dot, the only alert in the block. State is always shape and word, never colour alone: every cell says Passing, Degraded or Failed to screen readers and a key sits under the table. Degraded and failed cells are buttons, so a keyboard user can focus them, and each opens a tooltip with the service, the window and what the check saw. Uptime counts a passing window as one and a degraded one as half. All of it is computed from one list of services. On a phone the newest six windows stay and uptime moves under each service's name. For uptime pages, synthetic monitoring and job histories.
FAQ
How do I use my own services?
Edit SERVICES at the top of the file: a name, eight states per service (up, slow or down, oldest first) and an issues list with a note for each window that isn't passing. The headline counts, the uptime column, the cells and the tooltips are computed from them. Change WINDOW_COUNT and headOf if your windows are not hourly.
How is state told without colour?
By shape and word. Passing is a plain tone, degraded is half filled, and failed is an outlined cell with a cross, and every cell contains its word for screen readers. The destructive status dot appears only on the failed cell, as extra emphasis for the one real alert, never as the only signal. The key under the table shows the three looks.
Which cells have tooltips?
The degraded and failed ones, which are buttons you can reach with the keyboard; the tooltip opens on hover or focus and says the service, the window and what the check saw. Passing cells have no tooltip because there is nothing to add; they are plain cells with the word Passing for screen readers. All the information is also in the table and in the uptime column, so a tooltip is only a convenience.