shadcn.io is not affiliated with official shadcn/ui
Response Code Distribution Matrix Block for Radix UI
A matrix of six API paths by eight exact status codes with log-stepped counts, sortable code heads, a pinned cell read as a sentence and a header that finds the one path behind every 429.
Installation
Overview
Find which path returns which status code with this matrix for React with Radix UI. It is Ackmark, an HTTP traffic analyzer, and its header is worked out from the counts: the total, the share that were 2xx and whether every 429 sits on one path. In a hairline frame with a plus mark on each corner, six paths are rows and eight exact codes are columns; each cell is a button holding its count on a log-stepped foreground ramp, with the busiest cell outlined. A code head sorts the rows by that code. Pressing a cell pins it and a line reads it, for example how many of a path's requests returned 500 and what share that is. Arrow keys move between cells. Guides draw the frame and its bands; the entrance is CSS only. For API gateways and any service where the family of a status code hides the one that matters.
FAQ
How do I load my own counts?
Edit PATHS (each has a method, a path and eight counts in the order of CODES) and CODES. Totals, shares, the ramp step of each cell, the busiest cell and the header sentence are derived from them.
How does sorting work?
Each code head is a button with aria-sort. Pressing it orders the rows by that code, largest first; pressing it again restores the first order. The pinned cell stays on its path.
How do I use it with a keyboard?
Tab enters the matrix at the pinned cell; the arrow keys move between cells and Enter or Space pins one. A polite status line speaks the sentence for the pinned cell.