shadcn.io is not affiliated with official shadcn/ui
API Latency Dashboard Block for Vue
Nine endpoints ranked by p50, p95 or p99 with a range bar on one 0 to 1,000 ms scale, an SLO slider that marks the ones over it, and a histogram of the chosen endpoint's requests.
Installation
Overview
Rank an API's endpoints by how slow they really are, with this latency panel for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a table of nine Lapwick endpoints, each with a range bar from its p50 to its p99 on one shared scale (a dot at p50, a tick at p95, a thin line for the SLO) and its three percentiles in tabular figures. A Toggle Group in the header picks the percentile that sorts the table, and a Slider sets the SLO in milliseconds: every endpoint over it at that percentile gets an Over Badge and the header counts them. Choosing a row fills the side cell with a 12-bucket histogram of its requests, the share at or above the SLO and a sentence on its p99. It's built from Toggle Group, Slider, Badge and Guides, with CSS entrances only. For performance monitors, API consoles and SLO reviews.
FAQ
How do I fill it with my endpoints?
Edit ENDPOINTS. Each has an id, a method, a path and buckets: how many requests landed in each of the 12 latency buckets (EDGES holds their lower edges in ms, and the last bucket is open at 1,000 ms and up). Counts are in thousands a day. Nothing else is typed: the percentiles, the request counts, the bars and the histogram are all worked out from the buckets.
How are p50, p95 and p99 worked out?
percentileOf walks the buckets until the running count reaches that share of all requests, then interpolates inside the bucket it lands in and rounds to the nearest 5 ms. Results are capped at the 1,000 ms end of the scale and shown as "1,000+". A real monitor would send exact percentiles from its store; the buckets are what most metrics systems keep anyway.
What does the SLO slider change?
It moves the thin line in every range bar, decides which endpoints get the Over mark at the chosen percentile, updates the count in the header, and sets the share of the picked endpoint's requests that fall in buckets starting at or above it. It moves in steps of 100 ms so it always lands on a bucket edge, which keeps that share exact rather than estimated.
What stays local, and how do I wire it for real?
Everything: the bucket counts are typed and nothing is measured. Replace ENDPOINTS with histogram counts from your metrics store for the period you want, keep the 12 edges or change EDGES to match your own, and take the SLO's default from your objective.
Can I use it without a pointer?
Yes. The percentile control and the SLO slider take arrow keys, each endpoint's name is a real button, and the table has a caption, column headers and row headers. The selected row is marked with aria-current, the histogram has a text label with its figure, and a polite status line reports the ranking and the count over the SLO. Over is a word and an icon, never only a colour.