shadcn.io is not affiliated with official shadcn/ui
Edge Function Latency by Region Block for Radix UI
Six regional latency lines stacked as a ridgeline over one hour, worst region on top, with a p50 or p99 toggle, one alert line at 100 ms, one cursor that reads all six regions and a header naming the worst.
Installation
Overview
See which region is slow, on one shared clock, with this edge latency panel for React with Radix UI. It is Edgewren, an edge-functions platform (made up), running your functions in six regions. A hairline frame with a plus mark on each corner holds a ridgeline: six lines of the same hour stacked with overlap, each filled with the card colour so a line hides the foot of the one above it, with the worst region on top. A Toggle Group swaps the series between p50 and p99; p99 has a thin alert line at 100 ms in every row, p50 has none and says so. One hidden range over the stack is the cursor, and a grid of six figures reads every region at that minute. The header names the worst region and how far it sits above the median of the six. Guides draw the frame and its bands; the entrance is CSS only. For multi-region deployments, edge platforms and CDN-style functions.
FAQ
How do I use my own regions?
Edit the REGIONS list at the top of the file. Each region has an id, a name and two arrays of 60 minute samples, p50 and p99; in the demo regionOf builds them from a base level, a wobble and a climb. ALERT is the p99 alert level and TOPS are the tops of the two scales. The order, the median and the header sentence are worked out from the arrays.
Why do the rows overlap?
Overlap lets six lines share one hour in little height while keeping the same scale in every row. Each row is a filled area, so a taller peak hides the foot of the row above and never crosses its line. The rows are sorted by their value now for the chosen percentile, so the worst is on top.
How does the cursor work?
It is a native range over the whole stack, named Time, whose value text is the minute. Arrow keys move it one minute, Home and End jump, and dragging scrubs. A circle on each line and the six figures under the stack follow it, and a polite status line speaks all six values about 600 ms after the last change.
What is real here and what is typed?
All of it is typed: the series are examples and nothing is measured. The product and the region list are made up. In your app feed the same arrays from your metrics.