CHAPTER {ch.label} · {ch.period.toUpperCase()}
{ch.title}
{ch.headline}
{ch.body}
{ch.stat.label}
{ch.stat.value}{ch.stat.suffix}
{ch.stat.delta}
setChapter(Math.max(0, chapter - 1))} disabled={chapter === 0}
style={navBtn(chapter === 0, false)}>← Previous
setChapter(Math.min(CHAPTERS.length - 1, chapter + 1))} disabled={chapter === CHAPTERS.length - 1}
style={navBtn(chapter === CHAPTERS.length - 1, true)}>Next →
);
}
/* ── Timeline chart: multi-line with annotations + crosshair tooltip ─────── */
function TimelineChart({ chapter }) {
const ch = CHAPTERS[chapter];
const [hoverIdx, setHoverIdx] = React.useState(null);
const [hidden, setHidden] = React.useState({});
const svgRef = React.useRef(null);
const w = 760, h = 320;
const pad = { l: 44, r: 16, t: 20, b: 36 };
const innerW = w - pad.l - pad.r;
const innerH = h - pad.t - pad.b;
const visibleCats = CATEGORIES.filter((c) => !hidden[c.key]);
const allVals = visibleCats.flatMap((c) => SERIES[c.key]);
const max = visibleCats.length ? Math.max(...allVals) * 1.06 : 140;
const min = 0;
const xFor = (i) => pad.l + i / (MONTH_COUNT - 1) * innerW;
const yFor = (v) => pad.t + (1 - (v - min) / (max - min)) * innerH;
const onMove = (e) => {
const rect = svgRef.current.getBoundingClientRect();
const x = (e.clientX - rect.left) * (w / rect.width);
const idx = Math.round((x - pad.l) / innerW * (MONTH_COUNT - 1));
if (idx >= 0 && idx < MONTH_COUNT) setHoverIdx(idx);
};
const pathFor = (key) => SERIES[key].map((v, i) =>
`${i === 0 ? 'M' : 'L'}${xFor(i).toFixed(1)},${yFor(v).toFixed(1)}`).join(' ');
const periodX1 = xFor(ch.range[0]);
const periodX2 = xFor(ch.range[1]);
return (
Monthly Retail Sales · U.S.
Seasonally adjusted, $ billions per month
setHoverIdx(null)}
style={{ display: 'block', cursor: 'crosshair' }}>
{/* Active period shading */}
${v}B
);
})}
{/* X year ticks */}
{[0, 12, 24, 36, 48, 60].map((i) =>
{2019 + i / 12}
)}
{/* Lines */}
{CATEGORIES.map((c) => {
if (hidden[c.key]) return null;
const focused = ch.focus.includes(c.key);
return (
{a.label}
);
})}
{/* Crosshair */}
{hoverIdx !== null &&
}
{/* Tooltip block */}
{hoverIdx !== null &&
{monthLabel(hoverIdx)}
{CATEGORIES.filter((c) => !hidden[c.key]).map((c) =>
{c.short}
${SERIES[c.key][hoverIdx].toFixed(1)}B
)}
}
{/* Legend toggles */}
{CATEGORIES.map((c) => {
const off = hidden[c.key];
const focused = ch.focus.includes(c.key);
return (
setHidden((h) => ({ ...h, [c.key]: !h[c.key] }))}
style={{
display: 'inline-flex', alignItems: 'center', gap: 6,
padding: '5px 10px', borderRadius: 6,
background: off ? 'transparent' : focused ? 'rgba(148,163,184,0.07)' : 'rgba(148,163,184,0.03)',
border: `1px solid ${off ? STORY_PALETTE.border : focused ? STORY_PALETTE.borderHi : STORY_PALETTE.border}`,
color: off ? STORY_PALETTE.textDim : STORY_PALETTE.text,
fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
opacity: off ? 0.5 : 1, transition: 'all 0.2s'
}}>
);
})}
);
}
/* ── Category delta vs. Feb 2020 baseline ────────────────────────────────── */
function CategoryDeltaChart({ chapter }) {
const ch = CHAPTERS[chapter];
const baselineIdx = 13;
const endIdx = ch.range[1];
const deltas = CATEGORIES.map((c) => {
const base = SERIES[c.key][baselineIdx];
const end = SERIES[c.key][endIdx];
const pct = (end - base) / base * 100;
return { ...c, base, end, pct };
}).sort((a, b) => b.pct - a.pct);
const maxAbs = Math.max(...deltas.map((d) => Math.abs(d.pct)), 1);
return (
Change vs. Feb 2020 baseline
Winners & losers · end of period
{deltas.map((d) => {
const isPositive = d.pct >= 0;
const width = Math.abs(d.pct) / maxAbs * 48;
return (
{d.short}
{isPositive ? '+' : ''}{d.pct.toFixed(0)}%
);
})}
);
}
/* ── Stacked share-of-tracked-retail bar ────────────────────────────────── */
function CategoryShare({ chapter }) {
const ch = CHAPTERS[chapter];
const idx = ch.range[1];
const baselineIdx = 13;
const values = CATEGORIES.map((c) => ({ ...c, v: SERIES[c.key][idx], base: SERIES[c.key][baselineIdx] }));
const total = values.reduce((a, b) => a + b.v, 0);
const baseTotal = values.reduce((a, b) => a + b.base, 0);
values.forEach((d) => {
d.share = d.v / total * 100;
d.baseShare = d.base / baseTotal * 100;
d.shareDelta = d.share - d.baseShare;
});
const sorted = [...values].sort((a, b) => b.share - a.share);
// Build cumulative left-positions so we can animate width transitions
let acc = 0;
const positioned = sorted.map((s) => {
const left = acc;
acc += s.share;
return { ...s, left };
});
return (
Share of Tracked Retail $
Where the dollar lands · end of period
{positioned.map((v) =>
)}
{sorted.map((v) => {
const deltaSign = v.shareDelta >= 0;
return (
{v.short}
{v.share.toFixed(1)}%
{Math.abs(v.shareDelta) < 0.05 ? '—' : `${deltaSign ? '+' : ''}${v.shareDelta.toFixed(1)}pp`}
);
})}
);
}
/* ── Main ────────────────────────────────────────────────────────────────── */
function BIDashboard() {
const [chapter, setChapter] = React.useState(0);
const [playing, setPlaying] = React.useState(false);
// Auto-advance
React.useEffect(() => {
if (!playing) return;
const t = setTimeout(() => {
setChapter((c) => {
if (c >= CHAPTERS.length - 1) {setPlaying(false);return c;}
return c + 1;
});
}, 9000);
return () => clearTimeout(t);
}, [playing, chapter]);
// Keyboard nav (only when section in view)
React.useEffect(() => {
const h = (e) => {
const tag = e.target.tagName;
if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
const sect = document.getElementById('dashboard');
if (!sect) return;
const rect = sect.getBoundingClientRect();
const inView = rect.top < window.innerHeight * 0.6 && rect.bottom > window.innerHeight * 0.4;
if (!inView) return;
if (e.key === 'ArrowRight') {setChapter((c) => Math.min(CHAPTERS.length - 1, c + 1));e.preventDefault();}
if (e.key === 'ArrowLeft') {setChapter((c) => Math.max(0, c - 1));e.preventDefault();}
};
window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', h);
}, []);
React.useEffect(() => {if (window.track) window.track('Dashboard Story Chapter', { chapter: CHAPTERS[chapter].id });}, [chapter]);
return (