Range bar — usage

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 (or null), team (or null), band {min,max} (one side may be null, 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.