shadcn.io is not affiliated with official shadcn/ui
API Latency Monitoring Block for Solid
The last hour of p50, p95 and p99 latency as three lines with an alert line at 500 ms and hatched breach spans, a Yesterday or Last week ghost baseline, a cursor that reads each minute and a table of endpoints by rise.
Installation
Overview
See when an API slowed down and how it compares with the same hour before, with this latency panel for Solid with Ark UI. It is Tailwhistle, an API performance monitor (made up), watching the last hour at one-minute steps. A hairline frame with a plus mark on each corner holds three lines on one millisecond scale: p99 solid, p95 dashed and p50 dotted, told apart by stroke rather than colour. A solid line marks the alert at 500 ms, and the stretches where p99 went over it are hatched behind the plot and counted in the header. A Toggle Group in the toolbar draws p99 of the same hour yesterday or last week as a thin ghost line, and the reading says how far the cursor is above or below it. A hidden range over the plot is the cursor: it reads all three percentiles at that minute. Under the plot a table lists six endpoints by their p95 now and the change against the chosen baseline, biggest rise first. Guides draw the frame and its bands; the entrance is CSS only. For API teams, SLO reviews and any service with a latency alert.
FAQ
How do I use my own latency data?
Edit the series at the top of the file: P99 is 60 one-minute samples, and P95 and P50 follow it (in the demo they are worked out from P99; replace them with your own arrays of the same length). YESTERDAY and LAST_WEEK are p99 of the same hour a day and a week ago, and ENDPOINTS holds each path with its p95 now and at both baselines. The alert level is ALERT. Spans over the line, the minutes in the header and the change column are all derived from these arrays.
How does the cursor work?
It is a native range laid over the plot, named Time, whose value text is the minute and its p99 ("13:45 UTC, p99 612 ms"). Arrow keys move it one minute, Home and End jump to the ends, and dragging scrubs it. It starts on the peak so the first screen shows the story. The line under the plot updates at once; a polite status line speaks it about 600 ms after the last change, so a drag is not read out minute by minute.
What does the baseline change?
Choosing Yesterday or Last week draws that hour's p99 as a thin ghost line, adds its value and the percentage difference to the reading, and fills the Baseline and Change columns. The table then sorts by the biggest rise. With None the ghost line goes, both columns show a dash and the table sorts by the slowest p95. The plot and the table keep their size either way.
What is real here and what is typed?
All of it is typed: the series, the baselines and the endpoint figures are examples, and nothing is measured. The product and the paths are made up. In your app feed the same shapes from your metrics store; nothing else in the panel needs to change.