Range bar
canonBand indicator in a stat tile: recommended zone, ghost of the value N weeks ago, team median, current value dot.
acrm !4412 + !4413 (Reporty › Koučink, owner approved 1. 10. 2026), verified on dev 2. 10. 2026 (1440 light/dark + 390). Colour = --goal-in / --goal-in-ink / --goal-in-subtle (vivid green, owner rejected faded --positive here) vs --ic-amber; motion only under prefers-reduced-motion: no-preference. App-level next to Spark; before canon: stories (States: in band / out / no goal / no data), usage + a11y, and a decision whether it moves to packages/ui. 2. 10. 2026: beta — usage/a11y written, states reviewed by AD on the preview (koucink-stavy.html). Canon 2. 10. 2026: stories + light/dark baselines merged in !4422, AD-verified in the catalogue. Registry repaired 17 Oct 2026 (review F3): mapped existing Ladle stories.
Used in 1 file · 1 area · 1× — components/sales-reports
Where I am against the recommendation and how far I moved, inside a metric tile (Reporty › Koučink). React RangeBar (apps/web/src/components/sales-reports/charts/RangeBar.tsx), CSS apps/web/src/ds/coach-report.css.
When to use
- One metric with a recommended band (or one-sided limit) in a stat tile: value now, value N weeks ago (ghost), team median.
When not to use
- No current value — do not draw it; the tile shows „—“ and „zatím bez dat“.
- A trend over time — use weekly-bars or trend-band. A plain ratio to a limit — use Meter.
Anatomy
- Props:
value,ghost(ornull),team(ornull),band {min,max}(one side may benull, or no band),status in|out|none,label. - Axis = points ∪ band edges ∪ team + 20 %; a non-negative metric never goes below 0. Positions via
--x,--w,--x0; colours and sizes only in coach-report.css. - One state = one colour: in band
--goal-in, out--ic-amber(value text--warning-ink), no goal--accent. Red only for a real error.