shadcn.io is not affiliated with official shadcn/ui
Edge Cache Statistics Block for Ark UI
Time to first byte for five cache statuses as median-to-p95 range bars on one scale, their share of requests or bandwidth, and figures for bandwidth saved, hit ratio and firewall events.
Installation
Overview
See how much slower a cache miss is and how much traffic the edge absorbs, with this cache panel for React with Ark UI. It is Edgetally, an edge analytics tool (made up) that reads the log of a Cloudflare zone. Five rows (Hit, Miss, Expired, Bypass and Dynamic) each show a range bar from the median to the 95th percentile of time to first byte on one millisecond scale, a tick at the median, and a bar for the status's share of traffic. A Toggle Group switches that share between requests and bandwidth, and the shares are rounded so each column adds to 100. The header sentence is worked out from the medians, how many times a miss costs a hit, and a row of figures gives the bandwidth the cache saved, the hit ratio, the request total and the firewall events. Guides draw the frame and its bands; the entrance is CSS only. For web and platform teams tuning cache rules.
FAQ
How do I use my own edge data?
Edit STATUSES: each has its p50 and p95 in milliseconds, its requests in thousands and its gb sent. The scale is SCALE, the shares are split by largest remainder so they total exactly 100, and the header sentence, the hit ratio and the bandwidth saved are derived. Pull the same fields from your provider's analytics or log export on the server.
What do the five statuses mean?
Hit is served from the edge, Miss is fetched from the origin, Expired is checked with the origin because the copy went stale, Bypass skips the cache by rule, and Dynamic is content that cannot be cached. The note under each name says the same in a few words.
What does the toggle change?
Only the share column: it switches between each status's share of requests and its share of bytes. The range bars do not move. The change is announced in a polite status line.
What is real here and what is typed?
All of it is typed and says nothing about any provider. Cloudflare is named once because the slug names it; the numbers, the statuses' timings and the firewall count are examples, and nothing is read from an edge network.