shadcn.io is not affiliated with official shadcn/ui
Cache Performance Dashboard Block for Vue
A 60-minute chart of a cache tier's hit ratio with a deploy flag you press to read what happened to it, a tier select for Edge, Redis and In-process, a sortable key-pattern table and a memory bar with the eviction count.
Installation
Overview
See what a deploy did to your cache, with this cache performance panel for Vue with Ark UI. A hairline frame with a plus mark on each corner opens with the last 60 minutes of one Stashwell tier: an area for hits a minute under a hit-ratio line, with the 14:00 deploy marked by a flag that is a button. Pressing the flag reads the dip from the samples, such as "94% to 61%, back to 90% in 18 minutes", and marks the low point and the recovery on the chart. A Native Select in the header swaps the tier between Edge, Redis and In-process, each with its own series, key patterns and memory. A table of the busiest key patterns shows hits, misses, hit ratio and TTL, and sorts by any column head. A memory bar with the used share, the evictions in the hour and the keys held closes the panel. It's built from Native Select and Guides. For cache consoles and release reviews.
FAQ
How do I fill it with my tiers?
Each tier in the file has a few numbers (its steady hit ratio, the size of the drop at the deploy, how fast it recovers, its requests a minute and a seed) and the chart's 60 samples are generated from them with a seeded generator, so they are the same on every render. Replace that step with your own per-minute hits and requests, keep DEPLOY at the index of the deploy, and the reading, the low point and the recovery are all worked out from the samples. The key patterns and the memory figures are typed per tier.
How is the deploy reading worked out?
The ratio before is the mean of the five minutes before the deploy. The low is the lowest sample after it. Recovery is the first sample after the low that is within four points of the ratio before, and the sentence says how many minutes after the deploy that was. If a tier never gets back inside the window, as the In-process tier doesn't, the sentence says it was not back by the last minute.
How does sorting work?
Every column head is a button. A first press sorts in the direction that makes sense for the column (hits, misses and ratio from the highest, pattern and TTL from the lowest), a second press reverses it, and the head carries aria-sort. Ties fall back to the pattern name so the order never jumps.
What stays local, and how do I wire it for real?
Everything: no cache is measured and the flag only reads the typed samples. Feed the chart from your metrics store at one-minute resolution, take the deploy time from your release log, and load the key patterns from your cache's keyspace statistics.