# Revenue Story > A store's revenue told as a story: one big annotated line you can scrub day by day against last period, a plain-sentence summary whose numbers roll, a range switch that morphs the line and moves its notes, and a ranked strip of where the money came from. A shadcn/ui block from the [@devl](https://devl.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/devl/revenue-overview). - Page, with a live preview: https://shadcn.exchange/r/devl/revenue-overview - Screenshot: https://shadcn.exchange/shot/devl/revenue-overview/light.png - Registry item: https://devl.dev/r/revenue-overview.json - Categories: screen, Product - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/devl/revenue-overview.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react`, `motion` - Registry items: `utils`, `https://coss.com/ui/r/avatar.json`, `https://coss.com/ui/r/button.json`, `https://coss.com/ui/r/empty.json`, `https://coss.com/ui/r/menu.json`, `https://coss.com/ui/r/segmented-control.json`, `https://coss.com/ui/r/tooltip.json` ## Files ### `registry/devl/revenue-overview.tsx` ```tsx "use client"; import { ArrowDownRightIcon, ArrowUpRightIcon, ChartSplineIcon, ChevronDownIcon, ChevronRightIcon, ClipboardIcon, DownloadIcon, HandshakeIcon, HouseIcon, type LucideIcon, MegaphoneIcon, PackageIcon, SettingsIcon, ShoppingBagIcon, TagIcon, TruckIcon, UsersIcon, } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion, useSpring, useTransform } from "motion/react"; import { type KeyboardEvent, type PointerEvent, type ReactNode, type RefObject, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"; import { Menu, MenuItem, MenuPopup, MenuTrigger } from "@/components/ui/menu"; import { SegmentedControl, SegmentedControlItem } from "@/components/ui/segmented-control"; import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; export type RangeKey = "7d" | "30d" | "90d" | "12m"; export type MomentKind = "promo" | "pricing" | "partner" | "incident"; export interface RevenueDay { date: string; byChannel: Record; } export interface RevenueChannel { key: string; label: string; } export interface RevenueMoment { id: string; date: string; endDate?: string; kind: MomentKind; title: string; short?: string; phrase?: string; note: string; channel?: string; weight?: number; } export interface RevenueStoryProps { days?: RevenueDay[]; channels?: RevenueChannel[]; moments?: RevenueMoment[]; store?: { name: string; plan: string }; user?: { name: string; email: string }; defaultRange?: RangeKey; onRangeChange?: (range: RangeKey) => void; onNavigate?: (label: string) => void; className?: string; } const DAY = 86_400_000; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const pad2 = (n: number) => String(n).padStart(2, "0"); function parseDay(iso: string) { const [y, m, d] = iso.split("-").map(Number); return Date.UTC(y, m - 1, d); } function isoOf(t: number) { const d = new Date(t); return `${d.getUTCFullYear()}-${pad2(d.getUTCMonth() + 1)}-${pad2(d.getUTCDate())}`; } function dayLabel(t: number, year?: number) { const d = new Date(t); const base = `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}`; return year !== undefined && d.getUTCFullYear() !== year ? `${base}, ${d.getUTCFullYear()}` : base; } const yearOf = (t: number) => new Date(t).getUTCFullYear(); function mulberry32(seed: number) { let s = seed; return () => { s = (s + 0x6d2b79f5) | 0; let t = Math.imul(s ^ (s >>> 15), 1 | s); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } const SAMPLE_CHANNELS: RevenueChannel[] = [ { key: "store", label: "Online store" }, { key: "wholesale", label: "Wholesale" }, { key: "market", label: "Marketplaces" }, { key: "social", label: "Social shop" }, ]; const SAMPLE_MOMENTS: RevenueMoment[] = [ { id: "spring-sale", date: "2025-04-24", endDate: "2025-04-28", kind: "promo", title: "Spring sale", phrase: "the spring sale", note: "20% off throws and bedding for five days, sent to the full list.", weight: 2, }, { id: "marketplace-fees", date: "2025-06-02", kind: "pricing", channel: "market", title: "Marketplace fees went up", short: "Marketplace fees", note: "Listing fees rose to 9.5%, so marketplace prices went up to cover them.", weight: 2, }, { id: "autumn-launch", date: "2025-09-23", endDate: "2025-09-29", kind: "promo", title: "Autumn collection launch", short: "Autumn launch", phrase: "the autumn launch", note: "Twelve new pieces in walnut and wool, launched with a lookbook email.", weight: 1, }, { id: "starter-price", date: "2025-11-18", kind: "pricing", channel: "store", title: "Price change on Starter Set", short: "Starter Set price", note: "The Starter Set went from $68 to $58 to make it an easier first order.", weight: 2, }, { id: "black-friday", date: "2025-11-28", endDate: "2025-12-01", kind: "promo", title: "Black Friday sale", short: "Black Friday", phrase: "the Black Friday sale", note: "25% off sitewide through Cyber Monday. Marketplaces ran the same discount.", weight: 3, }, { id: "wholesale-partner", date: "2025-12-02", kind: "partner", channel: "wholesale", title: "Wholesale partner onboarded", short: "Wholesale partner", note: "Juniper & Pine took 14 lines for their four shops. The first order shipped on Dec 3.", weight: 3, }, { id: "shipping-delay", date: "2025-12-08", endDate: "2025-12-10", kind: "incident", title: "Shipping delay", phrase: "the shipping delay", note: "A carrier backlog pushed delivery estimates to 6–8 days and checkout conversion fell.", weight: 3, }, { id: "gift-guide", date: "2025-12-11", endDate: "2025-12-12", kind: "promo", title: "Gift guide email", short: "Gift guide", phrase: "the gift guide email", note: "The holiday gift guide went to 41,200 subscribers on Thursday morning.", weight: 2, }, ]; const SAMPLE_EFFECTS: { from: string; to: string; on: string[]; by: number[] }[] = [ { from: "2024-11-29", to: "2024-12-02", on: ["store", "market", "social"], by: [1.55, 1.28, 1.22, 1.38] }, { from: "2025-04-24", to: "2025-04-28", on: ["store", "social"], by: [1.34, 1.26, 1.22, 1.2, 1.14] }, { from: "2025-06-02", to: "2025-12-12", on: ["market"], by: [0.84] }, { from: "2025-09-23", to: "2025-09-29", on: ["store"], by: [1.26, 1.18, 1.14, 1.1, 1.08, 1.06, 1.04] }, { from: "2025-11-18", to: "2025-12-12", on: ["store"], by: [1.04] }, { from: "2025-11-28", to: "2025-12-01", on: ["store", "market", "social"], by: [1.85, 1.42, 1.32, 1.56] }, { from: "2025-12-02", to: "2025-12-12", on: ["wholesale"], by: [1.3, 3.6, 2.3] }, { from: "2025-12-08", to: "2025-12-10", on: ["store", "market"], by: [0.72, 0.6, 0.78] }, { from: "2025-12-11", to: "2025-12-12", on: ["store", "social"], by: [1.26, 1.12] }, ]; function sampleDays(): RevenueDay[] { const rand = mulberry32(1128); const end = Date.UTC(2025, 11, 12); const count = 728; const season = [0.84, 0.82, 0.9, 0.95, 0.97, 0.93, 0.9, 0.92, 0.98, 1.02, 1.03, 1.06]; const week = [1.03, 0.94, 0.96, 0.98, 1.0, 1.04, 1.07]; const out: RevenueDay[] = []; for (let i = 0; i < count; i++) { const t = end - (count - 1 - i) * DAY; const date = isoOf(t); const d = new Date(t); const p = i / (count - 1); const level = 5400 * (1 + 0.36 * p) * season[d.getUTCMonth()] * week[d.getUTCDay()]; const shares: Record = { store: 0.5 - 0.03 * p, wholesale: 0.14, market: 0.28 - 0.05 * p, social: 0.08 + 0.07 * p, }; const byChannel: Record = {}; for (const key of Object.keys(shares)) { let boost = 1; for (const e of SAMPLE_EFFECTS) { if (date < e.from || date > e.to || !e.on.includes(key)) continue; const offset = Math.round((t - parseDay(e.from)) / DAY); boost *= e.by[Math.min(offset, e.by.length - 1)]; } const spread = key === "wholesale" ? 0.5 : 0.14; byChannel[key] = Math.round(level * shares[key] * boost * (1 + (rand() - 0.5) * spread)); } out.push({ date, byChannel }); } return out; } const SAMPLE_DAYS = sampleDays(); const RANGES: { value: RangeKey; label: string; long: string; buckets: number; step: number }[] = [ { value: "7d", label: "7d", long: "Last 7 days", buckets: 7, step: 1 }, { value: "30d", label: "30d", long: "Last 30 days", buckets: 30, step: 1 }, { value: "90d", label: "90d", long: "Last 90 days", buckets: 90, step: 1 }, { value: "12m", label: "12m", long: "Last 12 months", buckets: 52, step: 7 }, ]; const KINDS: Record = { promo: { label: "Promotion", icon: MegaphoneIcon, dot: "fill-violet-500 dark:fill-violet-400", band: "fill-violet-500/8 dark:fill-violet-400/7", stem: "stroke-violet-500/50 dark:stroke-violet-400/50", soft: "bg-violet-500/12 text-violet-700 dark:bg-violet-400/15 dark:text-violet-300", }, pricing: { label: "Pricing", icon: TagIcon, dot: "fill-sky-500 dark:fill-sky-400", band: "fill-sky-500/8 dark:fill-sky-400/7", stem: "stroke-sky-500/50 dark:stroke-sky-400/50", soft: "bg-sky-500/12 text-sky-700 dark:bg-sky-400/15 dark:text-sky-300", }, partner: { label: "Partner", icon: HandshakeIcon, dot: "fill-teal-500 dark:fill-teal-400", band: "fill-teal-500/8 dark:fill-teal-400/7", stem: "stroke-teal-500/50 dark:stroke-teal-400/50", soft: "bg-teal-500/12 text-teal-700 dark:bg-teal-400/15 dark:text-teal-300", }, incident: { label: "Incident", icon: TruckIcon, dot: "fill-amber-500 dark:fill-amber-400", band: "fill-amber-500/10 dark:fill-amber-400/7", stem: "stroke-amber-500/60 dark:stroke-amber-400/60", soft: "bg-amber-500/14 text-amber-700 dark:bg-amber-400/15 dark:text-amber-300", }, }; const SHADES = ["bg-foreground", "bg-foreground/55", "bg-foreground/32", "bg-foreground/16"]; const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }); const money = (n: number) => usd.format(Math.round(n)); function compact(n: number) { const a = Math.abs(n); if (a >= 1e6) return `$${(a / 1e6).toFixed(2)}M`; if (a >= 1e3) return `$${(a / 1e3).toFixed(1)}k`; return `$${Math.round(a)}`; } const signed = (n: number) => `${n < 0 ? "−" : "+"}${compact(n)}`; const percent = (n: number) => `${n < 0 ? "−" : "+"}${Math.abs(n * 100).toFixed(0)}%`; const tone = (n: number) => (n < 0 ? "text-destructive-foreground" : "text-success-foreground"); function axisMoney(v: number) { if (v >= 1e6) return `$${+(v / 1e6).toFixed(1)}M`; if (v >= 1e3) return `$${+(v / 1e3).toFixed(1)}k`; return `$${v}`; } const totalOf = (day: RevenueDay) => Object.values(day.byChannel).reduce((a, b) => a + b, 0); const ease = [0.23, 1, 0.32, 1] as const; const pressable = "transition-[color,background-color,scale] duration-150 ease-out active:scale-[0.97]"; function useMounted() { const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); return mounted; } function useReducedMotionAfterMount() { const prefers = useReducedMotion(); return useMounted() && Boolean(prefers); } function useElementSize(): [RefObject, { width: number; height: number }] { const ref = useRef(null); const [size, setSize] = useState({ width: 0, height: 0 }); useLayoutEffect(() => { const el = ref.current; if (!el) return; setSize({ width: el.clientWidth, height: el.clientHeight }); const ro = new ResizeObserver(([entry]) => setSize({ width: entry.contentRect.width, height: entry.contentRect.height }), ); ro.observe(el); return () => ro.disconnect(); }, []); return [ref, size]; } function useTextWidth(ref: RefObject, ready: boolean) { const [measure, setMeasure] = useState<((text: string, weight: number) => number) | null>(null); useEffect(() => { if (!ready || !ref.current) return; const ctx = document.createElement("canvas").getContext("2d"); const family = getComputedStyle(ref.current).fontFamily; if (!ctx) return; setMeasure(() => (text: string, weight: number) => { ctx.font = `${weight} 12px ${family}`; return ctx.measureText(text).width; }); }, [ready, ref]); return measure; } interface Bucket { t: number; value: number; prev: number | null; prevT: number; } interface Impact { change: number; text: string; } interface PlacedMoment extends RevenueMoment { i0: number; i1: number; impact: Impact | null; } interface ChannelRow { key: string; label: string; total: number; prev: number; } interface Model { range: RangeKey; step: number; buckets: Bucket[]; start: number; end: number; prevStart: number | null; prevEnd: number | null; total: number; prevTotal: number | null; channels: ChannelRow[]; moments: PlacedMoment[]; } function impactOf(m: RevenueMoment, days: RevenueDay[], index: Map, channels: RevenueChannel[]): Impact | null { const a = index.get(m.date); if (a === undefined) return null; if (m.channel) { const w = Math.min(14, days.length - a, a); if (w < 1) return null; let after = 0; let before = 0; for (let k = 0; k < w; k++) { after += days[a + k].byChannel[m.channel] ?? 0; before += days[a - w + k].byChannel[m.channel] ?? 0; } if (!before) return null; const label = channels.find((c) => c.key === m.channel)?.label ?? m.channel; return { change: after / before - 1, text: `${label} has averaged ${compact(after / w)} a day since, up from ${compact(before / w)}.`, }; } const b = Math.min(index.get(m.endDate ?? m.date) ?? a, days.length - 1); const len = b - a + 1; if (a - len < 0) return null; let cur = 0; let prev = 0; for (let k = 0; k < len; k++) { cur += totalOf(days[a + k]); prev += totalOf(days[a - len + k]); } if (!prev) return null; const span = len === 1 ? "that day" : `over ${len} days`; const before = len === 1 ? "the day before" : `the ${len} days before`; return { change: cur / prev - 1, text: `${compact(cur)} ${span}, against ${compact(prev)} ${before}.` }; } function buildModel( days: RevenueDay[], channels: RevenueChannel[], moments: RevenueMoment[], index: Map, impacts: Map, range: RangeKey, ): Model { const spec = RANGES.find((r) => r.value === range) ?? RANGES[1]; const step = spec.step; const n = Math.max(1, Math.min(spec.buckets, Math.floor(days.length / step))); const span = n * step; const endIdx = days.length; const startIdx = Math.max(0, endIdx - span); const prevIdx = startIdx - span; const sumDays = (from: number, to: number) => { let s = 0; for (let k = from; k < to; k++) s += totalOf(days[k]); return s; }; const buckets: Bucket[] = Array.from({ length: n }, (_, b) => { const s = startIdx + b * step; const t = parseDay(days[s].date); return { t, value: sumDays(s, s + step), prev: prevIdx >= 0 ? sumDays(s - span, s - span + step) : null, prevT: t - span * DAY, }; }); const rows = channels.map((c) => { let total = 0; let prev = 0; for (let k = startIdx; k < endIdx; k++) total += days[k].byChannel[c.key] ?? 0; if (prevIdx >= 0) for (let k = prevIdx; k < startIdx; k++) prev += days[k].byChannel[c.key] ?? 0; return { key: c.key, label: c.label, total, prev }; }); const placed: PlacedMoment[] = []; for (const m of moments) { const a = index.get(m.date); if (a === undefined) continue; const b = index.get(m.endDate ?? m.date) ?? a; if (b < startIdx || a >= endIdx) continue; placed.push({ ...m, i0: Math.floor((Math.max(a, startIdx) - startIdx) / step), i1: Math.floor((Math.min(b, endIdx - 1) - startIdx) / step), impact: impacts.get(m.id) ?? null, }); } placed.sort((x, y) => x.i0 - y.i0); const total = buckets.reduce((s, b) => s + b.value, 0); return { range, step, buckets, start: parseDay(days[startIdx].date), end: parseDay(days[endIdx - 1].date), prevStart: prevIdx >= 0 ? parseDay(days[prevIdx].date) : null, prevEnd: prevIdx >= 0 ? parseDay(days[startIdx - 1].date) : null, total, prevTotal: prevIdx >= 0 ? buckets.reduce((s, b) => s + (b.prev ?? 0), 0) : null, channels: rows, moments: placed, }; } function bucketLabel(model: Model, t: number, long = false) { if (model.step === 7) return `${long ? "Week of " : "week of "}${dayLabel(t, yearOf(model.end))}`; const label = dayLabel(t, yearOf(model.end)); return long ? `${WEEKDAYS[new Date(t).getUTCDay()]}, ${label}` : label; } function momentDates(m: RevenueMoment) { const a = parseDay(m.date); if (!m.endDate || m.endDate === m.date) return dayLabel(a); return `${dayLabel(a)} – ${dayLabel(parseDay(m.endDate))}`; } function momentAt(model: Model, i: number) { return model.moments .filter((m) => m.phrase && i >= m.i0 && i <= m.i1) .sort((a, b) => (b.weight ?? 1) - (a.weight ?? 1))[0]; } function tangents(ys: number[]) { const n = ys.length; const m = new Array(n).fill(0); if (n < 2) return m; const d = ys.slice(1).map((y, i) => y - ys[i]); m[0] = d[0]; m[n - 1] = d[n - 2]; for (let i = 1; i < n - 1; i++) m[i] = d[i - 1] * d[i] <= 0 ? 0 : (d[i - 1] + d[i]) / 2; for (let i = 0; i < n - 1; i++) { if (d[i] === 0) { m[i] = 0; m[i + 1] = 0; continue; } const a = m[i] / d[i]; const b = m[i + 1] / d[i]; const s = a * a + b * b; if (s > 9) { const k = 3 / Math.sqrt(s); m[i] = k * a * d[i]; m[i + 1] = k * b * d[i]; } } return m; } const SAMPLES = 271; function resample(values: number[]): { at: number; v: number }[] { const n = values.length; if (n < 2) return Array.from({ length: SAMPLES }, () => ({ at: 0, v: values[0] ?? 0 })); const m = tangents(values); const total = SAMPLES - 1; const out: { at: number; v: number }[] = []; for (let j = 0; j < n - 1; j++) { const sub = Math.floor(((j + 1) * total) / (n - 1)) - Math.floor((j * total) / (n - 1)); for (let k = 0; k < sub; k++) { const u = k / sub; const u2 = u * u; const u3 = u2 * u; out.push({ at: j + u, v: (2 * u3 - 3 * u2 + 1) * values[j] + (u3 - 2 * u2 + u) * m[j] + (-2 * u3 + 3 * u2) * values[j + 1] + (u3 - u2) * m[j + 1], }); } } out.push({ at: n - 1, v: values[n - 1] }); return out; } function niceTicks(max: number) { const raw = Math.max(max, 1) / 4; const exp = 10 ** Math.floor(Math.log10(raw)); const f = raw / exp; const step = (f <= 1 ? 1 : f <= 2 ? 2 : f <= 2.5 ? 2.5 : f <= 5 ? 5 : 10) * exp; const count = Math.ceil(max / step); return Array.from({ length: count + 1 }, (_, k) => k * step); } function axisTicks(model: Model, plotW: number) { const n = model.buckets.length; const room = Math.max(3, Math.floor(plotW / 72)); if (model.step === 7) { const starts = model.buckets .map((b, i) => ({ i, m: new Date(b.t).getUTCMonth() })) .filter((b, k, all) => k > 0 && b.m !== all[k - 1].m) .map((b) => b.i); const every = Math.max(1, Math.ceil(starts.length / room)); return starts.filter((_, k) => (starts.length - 1 - k) % every === 0); } const every = Math.max(1, Math.ceil((n - 1) / (room - 1))); const out: number[] = []; for (let i = n - 1; i >= 0; i -= every) out.unshift(i); return out; } function placeChips( items: { id: string; x: number; weight: number; full: number }[], left: number, right: number, rows: number, labels: boolean, ) { const taken: [number, number][][] = Array.from({ length: rows }, () => []); const out = new Map(); const order = [...items].sort((a, b) => b.weight - a.weight || a.x - b.x); for (const item of order) { const widths = labels ? [item.full, 24] : [24]; let done = false; for (const w of widths) { for (let row = 0; row < rows && !done; row++) { const l = Math.min(Math.max(item.x - w / 2, left), right - w); if (taken[row].every(([a, b]) => l + w + 6 <= a || l >= b + 6)) { taken[row].push([l, l + w]); out.set(item.id, { left: l, row, compact: w === 24 }); done = true; } } if (done) break; } } return out; } function Rolling({ value, format, className }: { value: number; format: (n: number) => string; className?: string }) { const reduce = useReducedMotionAfterMount(); const spring = useSpring(value, { stiffness: 240, damping: 34 }); const text = useTransform(spring, (v) => format(v)); useEffect(() => { if (reduce) spring.jump(value); else spring.set(value); }, [value, reduce, spring]); return {text}; } function RangeSwitch({ value, onChange }: { value: RangeKey; onChange: (v: RangeKey) => void }) { const refs = useRef<(HTMLButtonElement | null)[]>([]); const index = Math.max( 0, RANGES.findIndex((r) => r.value === value), ); const onKeyDown = (e: KeyboardEvent) => { const moves: Record = { ArrowRight: index + 1, ArrowDown: index + 1, ArrowLeft: index - 1, ArrowUp: index - 1, Home: 0, End: RANGES.length - 1, }; if (!(e.key in moves)) return; e.preventDefault(); const next = (moves[e.key] + RANGES.length) % RANGES.length; onChange(RANGES[next].value); refs.current[next]?.focus(); }; return ( {RANGES.map((r, i) => { const checked = r.value === value; return ( onChange(r.value)} ref={(el: HTMLButtonElement | null) => { refs.current[i] = el; }} role="radio" tabIndex={checked ? 0 : -1} > {r.label} ); })} ); } function Highlight({ children, className }: { children: ReactNode; className?: string }) { return {children}; } function Summary({ model }: { model: Model }) { const change = model.prevTotal === null ? null : model.total - model.prevTotal; const gains = model.channels.map((c) => ({ label: c.label, delta: c.total - c.prev })); const lead = change === null ? null : [...gains].sort((a, b) => (change >= 0 ? b.delta - a.delta : a.delta - b.delta))[0]; const most = lead && change ? lead.delta / change >= 0.5 : false; const unit = model.step === 7 ? "week" : "day"; const values = model.buckets.map((b) => b.value); const best = values.indexOf(Math.max(...values)); const worst = values.indexOf(Math.min(...values)); const bestMoment = momentAt(model, best); const worstMoment = momentAt(model, worst); const when = (i: number) => (model.step === 7 ? `the ${bucketLabel(model, model.buckets[i].t)}` : bucketLabel(model, model.buckets[i].t)); return (

{" "} this period {change !== null && lead ? ( <> ,{" "} {change < 0 ? "down" : "up"} {" "} on the last one — {most ? (change < 0 ? "mostly from" : "most of it from") : "led by"}{" "} {lead.label}. ) : ( "." )}

Best {unit} was {when(best)} at{" "} {compact(values[best])} {bestMoment ? `, during ${bestMoment.phrase}` : ""}. Slowest was{" "} {when(worst)} at{" "} {compact(values[worst])} {worstMoment ? `, during ${worstMoment.phrase}` : ""}.

); } interface MomentHandlers { openId: string | null; pinnedId: string | null; onHover: (id: string | null) => void; onFocus: (id: string | null) => void; onToggle: (id: string) => void; } function KindIcon({ kind, className }: { kind: MomentKind; className?: string }) { const k = KINDS[kind]; return ( ); } function StoryChart({ model, handlers, cardId }: { model: Model; handlers: MomentHandlers; cardId: string }) { const mounted = useMounted(); const reduce = useReducedMotionAfterMount(); const clipId = `reveal-${useId().replace(/:/g, "")}`; const fadeId = `fade-${useId().replace(/:/g, "")}`; const [surfaceRef, size] = useElementSize(); const ready = mounted && size.width > 0 && size.height > 0; const measure = useTextWidth(surfaceRef, ready); const [scrub, setScrub] = useState<{ range: RangeKey; i: number } | null>(null); const [focused, setFocused] = useState(false); const { buckets } = model; const n = buckets.length; const width = size.width; const height = size.height; const wide = width >= 560; const rows = wide ? 2 : 1; const pad = { l: 44, r: 12, t: wide ? 74 : 44, b: 28 }; const plotW = Math.max(1, width - pad.l - pad.r); const base = Math.max(pad.t + 1, height - pad.b); const plotH = base - pad.t; const values = useMemo(() => buckets.map((b) => b.value), [buckets]); const prevValues = useMemo(() => (buckets.every((b) => b.prev !== null) ? buckets.map((b) => b.prev ?? 0) : null), [buckets]); const ticks = niceTicks(Math.max(...values, ...(prevValues ?? [0])) * 1.04); const top = ticks[ticks.length - 1] || 1; const x = (i: number) => pad.l + (n === 1 ? plotW / 2 : (i / (n - 1)) * plotW); const y = (v: number) => base - (v / top) * plotH; const morph = reduce ? { duration: 0 } : ({ type: "spring", visualDuration: 0.38, bounce: 0 } as const); const samples = useMemo(() => resample(values), [values]); const prevSamples = useMemo(() => (prevValues ? resample(prevValues) : null), [prevValues]); const toPath = (pts: { at: number; v: number }[]) => pts.map((p, k) => `${k ? "L" : "M"}${x(p.at).toFixed(1)},${y(p.v).toFixed(1)}`).join(""); const line = toPath(samples); const area = `${line}L${x(n - 1).toFixed(1)},${base}L${x(0).toFixed(1)},${base}Z`; const prevLine = prevSamples ? toPath(prevSamples) : null; const open = model.moments.find((m) => m.id === handlers.openId) ?? null; const scrubIndex = scrub && scrub.range === model.range ? Math.min(scrub.i, n - 1) : null; const active = scrubIndex ?? open?.i0 ?? n - 1; const showCrosshair = scrubIndex !== null || open !== null; const bucket = buckets[active]; const delta = bucket.prev ? bucket.value / bucket.prev - 1 : null; const here = model.moments.filter((m) => active >= m.i0 && active <= m.i1); const label = bucketLabel(model, bucket.t, true); const prevLabel = model.step === 7 ? bucketLabel(model, bucket.prevT) : dayLabel(bucket.prevT, yearOf(model.end)); const widest = money(Math.max(...values)).length; const chipText = (m: PlacedMoment) => ({ label: m.short ?? m.title, delta: m.impact ? percent(m.impact.change) : "" }); const placement = useMemo(() => { if (!ready) return new Map(); const items = model.moments.map((m) => { const t = chipText(m); const textW = measure ? measure(t.label, 500) + measure(t.delta, 400) : (t.label.length + t.delta.length) * 6.6; return { id: m.id, x: x(m.i0), weight: m.weight ?? 1, full: Math.ceil(textW + 46) }; }); return placeChips(items, pad.l - 10, width - 2, rows, wide); }, [ready, model, measure, width, rows, wide]); const xTicks = ready ? axisTicks(model, plotW) : []; const valueText = `${label}: ${money(bucket.value)}${delta !== null ? `, ${delta < 0 ? "down" : "up"} ${Math.abs(delta * 100).toFixed(0)}% on ${prevLabel}` : ""}`; const indexAt = (e: PointerEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const scale = rect.width / (width || 1); const px = (e.clientX - rect.left) / (scale || 1); return Math.min(n - 1, Math.max(0, Math.round(((px - pad.l) / plotW) * (n - 1)))); }; const onKeyDown = (e: KeyboardEvent) => { const jump = e.shiftKey ? 7 : 1; const moves: Record = { ArrowRight: active + jump, ArrowUp: active + jump, ArrowLeft: active - jump, ArrowDown: active - jump, PageUp: active + 7, PageDown: active - 7, Home: 0, End: n - 1, }; if (e.key === "Escape") { setScrub(null); return; } if (!(e.key in moves)) return; e.preventDefault(); setScrub({ range: model.range, i: Math.min(n - 1, Math.max(0, moves[e.key])) }); }; const cardW = wide ? 248 : Math.max(0, width - 8); const cardX = open ? x(open.i0) : 0; const cardRight = cardX + 14 + cardW <= width - 4; const cardLeft = wide ? (cardRight ? cardX + 14 : Math.max(4, cardX - 14 - cardW)) : 4; const cardTop = pad.t + 2; return (
{showCrosshair || focused ? label : `Latest · ${label}`} {here[0] && ( {here[0].title} )}
{money(bucket.value)} {delta !== null && bucket.prev !== null && ( {delta < 0 ? : } {percent(delta)} vs {prevLabel} · {money(bucket.prev)} )}
This period {prevValues && ( Previous period )}
{ if (e.key === "Escape" && handlers.pinnedId) handlers.onToggle(handlers.pinnedId); }} >
{ setFocused(false); setScrub(null); }} onFocus={() => setFocused(true)} onKeyDown={onKeyDown} onPointerDown={(e) => { if (handlers.pinnedId) handlers.onToggle(handlers.pinnedId); setScrub({ range: model.range, i: indexAt(e) }); }} onPointerLeave={() => setScrub(null)} onPointerMove={(e) => setScrub({ range: model.range, i: indexAt(e) })} ref={surfaceRef} role="slider" tabIndex={0} > {ready && ( {model.moments .filter((m) => m.endDate && m.endDate !== m.date) .map((m) => { const half = n > 1 ? plotW / (n - 1) / 2 : plotW / 2; const left = Math.max(pad.l, x(m.i0) - half); const right = Math.min(pad.l + plotW, x(m.i1) + half); return ( ); })} {ticks.map((v, k) => ( {axisMoney(v)} ))} {xTicks.map((i) => { const px = x(i); const anchor = i === n - 1 && n > 1 ? "end" : px - 24 < pad.l ? "start" : "middle"; const t = buckets[i].t; return ( {model.step === 7 ? MONTHS[new Date(t + 6 * DAY).getUTCMonth()] : dayLabel(t)} ); })} {prevLine && ( )} {model.moments.map((m) => { const spot = placement.get(m.id); const cx = x(m.i0); const cy = y(values[m.i0]); const settle = { duration: reduce ? 0 : 0.2, delay: reduce ? 0 : 0.36 }; return ( {spot && } ); })} {showCrosshair ? ( {prevValues && ( )} ) : ( )} )}
{ready && model.moments.map((m) => { const spot = placement.get(m.id); if (!spot) return null; const text = chipText(m); const isOpen = handlers.openId === m.id; return ( handlers.onFocus(null)} onClick={() => handlers.onToggle(m.id)} onFocus={() => handlers.onFocus(m.id)} onPointerEnter={(e) => e.pointerType === "mouse" && handlers.onHover(m.id)} onPointerLeave={() => handlers.onHover(null)} transition={{ x: morph, y: morph, opacity: { duration: 0.18, delay: reduce ? 0 : 0.45 }, scale: { duration: 0.18, ease, delay: reduce ? 0 : 0.45 }, }} type="button" > {!spot.compact && ( <> {text.label} {text.delta && {text.delta}} )} ); })} {ready && open && (
{KINDS[open.kind].label} · {momentDates(open)}

{open.title}

{open.note}

{open.impact && (
{open.impact.text} {percent(open.impact.change)}
)} )}
); } function Breakdown({ model }: { model: Model }) { const titleId = useId(); const reduce = useReducedMotionAfterMount(); const [hover, setHover] = useState(null); const ranked = [...model.channels].sort((a, b) => b.total - a.total); const total = ranked.reduce((s, c) => s + c.total, 0) || 1; const hasPrev = model.prevTotal !== null; return (

Where it came from

{hasPrev && vs last period}
`${c.label} ${Math.round((c.total / total) * 100)}%`).join(", ")}`} className="mt-3 flex h-2.5 gap-[3px]" role="img" > {ranked.map((c, i) => (
))}
    {ranked.map((c, i) => { const change = c.total - c.prev; return ( e.pointerType === "mouse" && setHover(c.key)} onPointerLeave={() => setHover(null)} transition={{ type: "spring", visualDuration: 0.3, bounce: 0 }} >
    {c.label}
    {Math.round((c.total / total) * 100)}% of revenue
    {hasPrev && (
    {signed(change)} · {c.prev ? percent(change / c.prev) : "new"}
    )}
    ); })}
); } function MomentList({ model, handlers, cardId }: { model: Model; handlers: MomentHandlers; cardId: string }) { const titleId = useId(); return (

Moments

{model.moments.length ? `${model.moments.length} in this period` : "None logged"}
{model.moments.length ? (
    {model.moments.map((m) => { const isOpen = handlers.openId === m.id; return (
    • ); })}
) : (

Nothing happened worth pinning in this range. Add a moment to see it on the line.

)}
); } const NAV: { label: string; icon: LucideIcon }[] = [ { label: "Home", icon: HouseIcon }, { label: "Orders", icon: ShoppingBagIcon }, { label: "Products", icon: PackageIcon }, { label: "Customers", icon: UsersIcon }, { label: "Revenue", icon: ChartSplineIcon }, ]; function RailButton({ label, active, icon: Icon, onClick }: { label: string; active?: boolean; icon: LucideIcon; onClick?: () => void }) { return ( } > {label} ); } function SectionEmpty({ label, icon: Icon, onBack }: { label: string; icon: LucideIcon; onBack: () => void }) { return (
{label} opens in its own view This preview only includes the revenue story.
); } export function RevenueStory({ days = SAMPLE_DAYS, channels = SAMPLE_CHANNELS, moments = SAMPLE_MOMENTS, store = { name: "Fernwood Goods", plan: "Growth plan" }, user = { name: "Ines Moreau", email: "ines@fernwood.shop" }, defaultRange = "30d", onRangeChange, onNavigate, className, }: RevenueStoryProps) { const cardId = useId(); const [range, setRange] = useState(defaultRange); const [nav, setNav] = useState("Revenue"); const [hoverId, setHoverId] = useState(null); const [focusId, setFocusId] = useState(null); const [pinnedId, setPinnedId] = useState(null); const [status, setStatus] = useState(null); const dayIndex = useMemo(() => new Map(days.map((d, i) => [d.date, i])), [days]); const impacts = useMemo( () => new Map(moments.map((m) => [m.id, impactOf(m, days, dayIndex, channels)])), [moments, days, dayIndex, channels], ); const model = useMemo(() => buildModel(days, channels, moments, dayIndex, impacts, range), [days, channels, moments, dayIndex, impacts, range]); const openId = hoverId ?? focusId ?? pinnedId; useEffect(() => { if (!status) return; const timer = window.setTimeout(() => setStatus(null), 2200); return () => window.clearTimeout(timer); }, [status]); const handlers: MomentHandlers = { openId: model.moments.some((m) => m.id === openId) ? openId : null, pinnedId, onHover: setHoverId, onFocus: setFocusId, onToggle: (id) => setPinnedId((p) => (p === id ? null : id)), }; const changeRange = (next: RangeKey) => { setRange(next); setPinnedId(null); onRangeChange?.(next); }; const go = (label: string) => { setNav(label); onNavigate?.(label); }; const summaryText = () => { const change = model.prevTotal === null ? null : model.total - model.prevTotal; const period = `${dayLabel(model.start)} – ${dayLabel(model.end)}, ${yearOf(model.end)}`; return `${store.name} revenue, ${period}: ${money(model.total)}${change === null ? "" : `, ${change < 0 ? "down" : "up"} ${compact(change)} on the previous period`}.`; }; const downloadCsv = () => { const header = model.step === 7 ? "week_starting,revenue,previous" : "date,revenue,previous"; const lines = model.buckets.map((b) => `${isoOf(b.t)},${Math.round(b.value)},${b.prev === null ? "" : Math.round(b.prev)}`); const url = URL.createObjectURL(new Blob([[header, ...lines].join("\n")], { type: "text/csv" })); const a = document.createElement("a"); a.href = url; a.download = `revenue-${model.range}.csv`; a.click(); URL.revokeObjectURL(url); setStatus("CSV downloaded"); }; const copySummary = () => { navigator.clipboard?.writeText(summaryText()).then( () => setStatus("Summary copied"), () => setStatus("Couldn't copy"), ); }; const initials = user.name .split(" ") .map((p) => p[0]) .join("") .slice(0, 2); const section = NAV.find((item) => item.label === nav) ?? NAV[4]; const rangeLong = RANGES.find((r) => r.value === range)?.long ?? ""; return (
{store.name[0]} {status ?? "Updated 2 min ago"} {section.label === "Revenue" && ( }> Export Copy summary Download CSV )}
{section.label !== "Revenue" ? ( go("Revenue")} /> ) : (

{rangeLong} · {dayLabel(model.start, yearOf(model.end))} – {dayLabel(model.end)} {model.prevStart !== null && model.prevEnd !== null && ( {" "} vs {dayLabel(model.prevStart, yearOf(model.end))} – {dayLabel(model.prevEnd, yearOf(model.end))} )}

)}
); } ```