shadcn.io is not affiliated with official shadcn/ui
Latency Map Dashboard Block for Solid
Eight regions as pins on a drawn dot map sized by requests, a p99 target slider that rings the regions over it and counts them weighted by requests, a p50 or p99 pin label switch, a regions table and a per-endpoint breakdown.
Installation
Overview
See which regions break your latency budget, with this latency map for Solid with Ark UI. A hairline frame with a plus mark on each corner holds eight Echomap regions as pins on a drawn dot map of the world, with no map library: the land is a coarse bitmap at module scope, drawn as one path of round dots. A pin's size is the region's share of requests, and its label is the p50 or p99 you choose with a Toggle Group in the header. A Slider, "p99 target", from 50 to 400 ms, rings every pin whose p99 is over it, and the header counts them weighted by requests, such as "3 of 8 regions over 150 ms at p99: 21% of requests". A table gives each region's p50, p99 and requests, and a band shows the chosen region's p50 and p99 for four endpoints. It's built from Slider, Toggle Group, Native Select and Guides. For API monitors and performance reviews.
FAQ
How do I fill it with my regions?
Edit REGIONS: a name, p50 and p99 in ms, requests a day in millions, and the pin's column and row on the 48 by 20 grid of the map. The endpoint breakdown multiplies the region's p50 and p99 by a factor per endpoint in ENDPOINTS, so replace both with measured values if you have them per endpoint.
How is the count weighted?
The header counts the regions whose p99 is over the target, and the percentage is those regions' requests over all requests. With the default 150 ms, Sao Paulo, Mumbai and Sydney are over, which together carry 21% of the requests even though they are three of eight regions.
Do I need a map library?
No. The land is 20 strings of 48 characters, drawn as dots, and the pins are buttons placed with percentages, so the map costs no network request and works with any theme. Pin positions are approximate cells, not coordinates.
How do I select a region without a mouse?
Tab to a pin or a row in the table and press Enter or Space; the chosen region is read in the status line and in the endpoint band. On a phone a region select sits above the endpoint table and does the same job.