Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Cache Hit Rate Monitoring Block for Svelte

A cache hit-rate panel whose header is the equation behind the average, seven hours of hits and misses as stacked columns, six key prefixes sorted by time lost to misses, and a TTL what-if from a typed replay curve.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See what misses cost, and where, with this cache panel for Svelte with Ark UI. It is Stashgauge, a cache analytics tool (made up). The header is the equation behind the average latency, worked out from the data: the hit rate times what a hit costs plus the miss rate times what a miss costs. A hairline frame with a plus mark on each corner holds seven hours of requests as stacked columns, hits light and misses solid, with the miss share above each column. Under it six key prefixes read as rows with the time lost to misses as a bar, the hit rate and the TTL; a Toggle Group re-sorts them by time lost, misses or hit rate. Choosing a prefix says how much of the lost time it causes, and a native select asks what its hit rate would be at another TTL, read from a typed replay curve. Guides draw the frame; the entrance is CSS only. For backend teams tuning cache keys and expiry.

FAQ

How do I use my own numbers?

Edit FAMILIES at the top of the file: each key prefix has its requests over the window in thousands, hit rate in tenths of a percent, what a miss costs in milliseconds, its TTL and a curve of hit rates at each of TTLS. The hourly columns are split from the totals by HOUR_WEIGHTS and HOUR_MISS. The equation, the shares and the sort orders are derived.

What is time lost to misses?

Misses times what one miss costs: for a prefix with 900 thousand misses at 1,900 ms that is 1,710,000 seconds, shown as hours. It ranks prefixes by how much waiting they cause, which is not the same as how often they miss; the toggle group lets you compare both.

What does the TTL what-if do?

It reads the chosen prefix's typed curve at another TTL and says what the hit rate and the time lost would be, next to today's values. The curve stands for a replay of past requests; nothing is simulated in the browser and the numbers are examples. Choosing another prefix resets the select to that prefix's own TTL.

What is real here and what stays local?

Every figure is typed and the product is made up; nothing reads a cache. The sort, the choice of prefix and the TTL select only change what the panel shows.

Can I read it without colour?

Yes. Hits are the light outlined part of each column and misses the solid part, the miss share is written above it, and a screen reader gets the hour-by-hour counts in the chart's caption and a sentence for every prefix row.

How does it look on a phone?

The chart shows the last four hours, the prefix rows keep the name and the time lost with its bar and drop the hit rate and TTL columns (the sentence under the rows still gives them), and the select goes full width.

All 100 monitoring blocks