Cache Stats
Hit rate with the numbers behind it. 99% on 40 requests a day is noise and 80% on 4 million is a cost centre, so volume sits beside the percentage.
src/components/ui/cache-stats.tsxAbout
From the component's own source, where it was written.
Cache hit rate, with the numbers behind it.
Hit rate alone is not interpretable: 99% on 40 requests a day is noise, and 80% on 4 million is a cost centre. Volume is shown beside the percentage for exactly that reason.
Evictions are separated from misses. A miss means the key was never there; an eviction means it was there and the cache threw it away, which is a sizing problem rather than a warming problem — and the fix is completely different.
The rate is computed here from hits and misses rather than accepted as a prop, so it cannot disagree with the counts printed under it.
Install
npx astralyx-ui add cache-stats
Usage
import { CacheStats } from '@/components/ui/cache-stats'
<CacheStats hits={3_812_400} misses={214_800} evictions={8_120} />Composer
Change the props and the source below follows.
94.7%hit rate
- hits
- 3,812,400
- misses
- 214,800
- evictions
- 8,120
- keys
- 412,000
- size
- 1.2 GB
Evictions mean the cache is too small for the working set — not that it is cold.
<CacheStats hits={3812400} misses={214800} evictions={8120} />Examples
A warm cache
<CacheStats hits={182_400} misses={9_600} history={history} />A cold one
<CacheStats hits={1_200} misses={18_400} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
CacheStats
Cache hit rate, with the numbers behind it.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| hits | number | required | The rate is derived from them, so it cannot disagree with the counts printed underneath. |
| misses | number | required | The rate is derived from them, so it cannot disagree with the counts printed underneath. |
| evictions | number | — | A miss means the key was never there; an eviction means the cache threw it away. Sizing problem, not warming problem — and a different fix. |
| keys | number | — | Optional footprint figures. |
| bytes | number | — | Optional footprint figures. |
| history | number[] | — | Hit rate over time, 0–1 per sample. |
| label | ReactNode | 'Cache' | — |
| hitRateLabel | ReactNode | 'hit rate' | — |
| hitsLabel | ReactNode | 'hits' | — |
| missesLabel | ReactNode | 'misses' | — |
| evictionsLabel | ReactNode | 'evictions' | — |
| keysLabel | ReactNode | 'keys' | — |
| sizeLabel | ReactNode | 'size' | — |
| evictionNote | ReactNode | 'Evictions mean the cache is too small for the working set — not that it is cold.' | Shown when evictions are non-zero. |
| locale | string | 'en-GB' | — |