shadcn.io is not affiliated with official shadcn/ui
P99 Tail Latency Chart Block for React
The p99 line over twelve five-minute windows with an alert line, a range that steps through them, and for the chosen window a log-scale histogram of its requests with p50, p95 and p99 ticks, the share over 200 ms and its slowest endpoint.
Installation
Overview
See how the slow tail of a service widened, one five-minute window at a time, with this latency chart for React with Base UI. It is Quantilo, a latency percentile tool (made up), splitting an hour into twelve windows. A hairline frame with a plus mark on each corner holds two bands. The top one draws p99 for the twelve windows with an alert line at 500 ms, and a hidden range steps through them. Under it the chosen window's requests fall into 24 buckets on a log scale, a third of an octave each from 6 ms to 1,600 ms, with p50, p95 and p99 as ticks worked out from those same counts. A row of facts gives the three percentiles and the share of requests that took 200 ms or more, and the reading names the window's slowest endpoint. The header says when the tail widened and for how many windows p99 stayed over the line. Guides draw the frame and its bands; the entrance is CSS only. For tail-latency reviews, SLO work and any service where the average hides the problem.
FAQ
How do I use my own requests?
Edit COUNT_LINES: one line per window, 24 numbers for the requests in each bucket, oldest window first. SLOWEST_LINES names each window's slowest endpoint and its p99. The bucket edges are FIRST_EDGE times two to the power of a third per bucket, and the alert level is ALERT. Every percentile, the line above, the share over 200 ms and the header are worked out from the counts, so nothing is typed twice.
How are the percentiles worked out?
By walking the buckets until the running total reaches the share asked for, then placing the value inside that bucket on the log scale. That is an estimate good to a fraction of a bucket (about 26% wide), the same way a histogram-based metrics store answers. If you keep exact percentiles, replace percentileOf with your own values.
How does the range work?
It is a native range over the top plot, named Window, with 12 steps. Arrow keys move one window, Home and End jump to the ends, and dragging scrubs it. It starts on the window with the highest p99. A polite status line speaks the window's reading about 600 ms after the last change.
What is real here and what is typed?
All of it is typed: the counts and the endpoint names are examples, and nothing is measured. The product is made up. In your app feed the same shapes from your metrics store.