shadcn.io is not affiliated with official shadcn/ui
CDN Analytics Dashboard Block for Vue
A three-step funnel of where a month of requests stop (edge hit, shield hit, origin fetch) with the bandwidth saved, a regions table that re-reads the funnel for a region, and a collapsible list of its nodes, in requests or bandwidth.
Installation
Overview
See how much traffic your cache keeps off the origin, with this CDN analytics panel for Vue with Ark UI. A hairline frame with a plus mark on each corner draws a month of Edgehaul requests as a funnel of three bars: Edge hit, Shield hit and Origin fetch, each with its count and share, and a header sentence that says what the cache saved. A Toggle Group in the header switches every figure between requests and bandwidth. A table lists six regions with requests, bandwidth, hit ratio and shield efficiency, plus an "All regions" row; pressing a region re-derives the funnel for it and opens a Collapsible list of its three nodes, each with its edge hit ratio and its bandwidth. It's built from Toggle Group, Collapsible and Guides. For delivery dashboards and cost reviews.
FAQ
How do I fill it with my regions?
Edit REGIONS: a name, the requests in the month (in millions), the share of edge misses the shield answers, the mean object size in KB, and its nodes with a hit ratio and a share of the region's requests. The region's edge hit ratio is the nodes' ratios weighted by share, the funnel's three counts follow from it, and bandwidth is requests times object size. The all-regions row adds the counts up.
What does each step of the funnel mean?
A request stops at the first step that has it. The edge answers what it holds; what it misses goes to the regional shield, which answers its share; the rest reaches the origin. Hit ratio in the table is edge plus shield over all requests, and shield efficiency is the shield's hits over everything that reached it.
What does the unit switch change?
The three funnel values and the header sentence's saved figure. Requests show counts in millions; bandwidth shows the same split in GB or TB. The bars and percentages stay the same because bandwidth uses one mean object size for the region.
Why is the node list empty at first?
Nodes belong to a region, so with "All regions" selected the list is closed and the band says to pick one. Selecting a region opens it, and you can hide or show it with the button in its head. The band keeps the same height either way, so the panel never jumps.