ns-ui / histogram-live-grain
checkout · response time199mslast
0msp50 226ms · p90 393ms · n 100480ms
rolling window · 140 samples
every sample falls as a grain into its bin — the heap is the histogram, and the P50/P90 fences slide as it shifts
ns-ui
Live distribution instrument where the histogram IS the samples: each arrival falls as a grain into its bin and stacks, the heap visibly re-settles as the rolling window slides, and P50/P90 fences ride the same scale.
Use when the distribution of a rolling sample is the question and each arrival should be visible as itself, falling into its bin and stacking so the heap resettles as the window slides; pick heatmap-calendar-tide instead when the question is position in time rather than distribution, or stem-and-leaf-live when every individual record must stay readable and focusable rather than becoming an anonymous grain.
Install
npx shadcn add https://design.helpmarq.comns-ui / histogram-live-grain
every sample falls as a grain into its bin — the heap is the histogram, and the P50/P90 fences slide as it shifts
| Prop | Type | Default | Description |
|---|---|---|---|
| samples | GrainTallySample[] | — | Rolling window of samples, oldest first. Append new ones, shift old ones off. |
| min? | number | — | Fixed domain. A live instrument needs a stable scale — auto-ranging makes every arrival move everything. |
| max? | number | — | — |
| bins? | number | — | — |
| unit? | string | — | Unit suffix for readouts, e.g. "ms". |
| label? | string | — | — |
| height? | number | — | — |
| className? | string | — | — |