Weekly bars
canonWeekly columns from zero against a recommended band (gradient); in band = --goal-in, out of band = --ic-amber; team line breaks on weeks without data.
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
Default
export const Default = () => (
<Frame>
<WeeklyBars
labels={WEEK_LABELS}
{...BARS.intoBand}
band={MONOLOGUE_BAND}
statusOf={statusOf(MONOLOGUE_BAND)}
format={mono}
bandLabel="≤ 2:30"
summary="Nejdelší monolog po týdnech: 3:50 → 2:20, doporučeno ≤ 2:30"
emptyText="zatím bez dat"
/>
</Frame>
);States
export const States = () => (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 560px)', gap: 'var(--sp-6)' }}>
<Frame text="in band — every week within ≤ 2:30, team line continuous">
<WeeklyBars
labels={WEEK_LABELS}
{...BARS.inBand}
band={MONOLOGUE_BAND}
statusOf={statusOf(MONOLOGUE_BAND)}
format={mono}
bandLabel="≤ 2:30"
summary="Nejdelší monolog po týdnech: 2:20 → 1:58, doporučeno ≤ 2:30"
emptyText="zatím bez dat"
/>
</Frame>
<Frame text="out → into band — a week without a meeting is an empty slot, the team line breaks at gaps">
<WeeklyBars
labels={WEEK_LABELS}
{...BARS.intoBand}
band={MONOLOGUE_BAND}
statusOf={statusOf(MONOLOGUE_BAND)}
format={mono}
bandLabel="≤ 2:30"
summary="Nejdelší monolog po týdnech: 3:50 → 2:20, doporučeno ≤ 2:30"
emptyText="zatím bez dat"
/>
</Frame>
<Frame text="no goal — words per minute: no zone, accent bars">
<WeeklyBars
labels={WEEK_LABELS}
{...BARS.noGoal}
band={null}
statusOf={statusOf(null)}
format={(v) => fmtCoach('wordsPerMin', v)}
summary="Tempo po týdnech: 171 → 164"
emptyText="zatím bez dat"
/>
</Frame>
<Frame text="no data — no measured week: no chart and no band, one quiet line">
<WeeklyBars
labels={WEEK_LABELS}
{...BARS.noData}
band={MONOLOGUE_BAND}
statusOf={statusOf(MONOLOGUE_BAND)}
format={mono}
bandLabel="≤ 2:30"
summary="Nejdelší monolog po týdnech"
emptyText="zatím bez dat"
/>
</Frame>
</div>
);