{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"combo-chart","type":"registry:component","title":"Combo chart","description":"Every day as a bar and the trend as a line on one scale: point at a day and the header becomes its readout while the line’s dot pings where it lands.","author":"Hairline UI","dependencies":[],"registryDependencies":["https://hairlineui.com/r/number-roll.json","https://hairlineui.com/r/text-morph.json"],"files":[{"path":"registry/combo-chart.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { NumberRoll } from \"./number-roll\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * COMBO CHART: every day as a bar, the trend as a line, one scale\n *\n * arrive the first time it's on screen the bars grow up out\n * of the baseline in a wave and the average draws\n * itself across them; the figures roll up from zero\n * hover the bar under the pointer fills while the rest\n * dim, the line's dot slides along it and pings once\n * where it lands, and the header becomes the readout:\n * the title morphs to the day, the total rolls to its\n * count, the line below to its average\n * tiles the best day, the daily average and the quietest\n * day, each rolling up on arrival\n *\n * Bars and line share one scale (never two axes), so the line\n * reads in the same units as the bars. The plot is one tab stop:\n * arrow keys move between days and the readout is announced.\n * Every figure is also in a table for screen readers.\n * ───────────────────────────────────────────────────────── */\n\nexport interface ComboDay {\n key: string;\n /** Under the bar, e.g. \"2 Oct\". */\n label: string;\n value: number;\n /** In the readout, e.g. \"Thursday 2 October\". Defaults to label. */\n title?: string;\n}\n\nexport interface ComboChartProps extends React.HTMLAttributes {\n title?: string;\n days: ComboDay[];\n /** The line: a rolling average over this many days. */\n rolling?: number;\n /** Your own line values instead (e.g. an average that includes days before the first bar). */\n average?: number[];\n /** The total of the period before, for the change chip. */\n previous?: number;\n /** The two marks' names, for the legend and the readout. */\n series?: [string, string];\n format?: Intl.NumberFormatOptions;\n locales?: string | string[];\n}\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst THROW = \"cubic-bezier(0.34,1.36,0.64,1)\";\nconst PLOT = 190;\nconst TOP = 10;\nconst GUTTER = 40;\nconst LABELS = 24;\nconst STEPS = 4;\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\nconst BAR = \"var(--chart-1, var(--primary))\";\nconst LINE = \"var(--chart-2, #e8743b)\";\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(\n subscribeReduced,\n () => window.matchMedia(reducedQuery).matches,\n () => false,\n );\n\nfunction niceTop(value: number) {\n if (value <= 0) return STEPS;\n const raw = value / STEPS;\n const mag = 10 ** Math.floor(Math.log10(raw));\n const step = [1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10].map((m) => m * mag).find((s) => s >= raw) ?? 10 * mag;\n return step * STEPS;\n}\n\nfunction monotone(points: [number, number][]) {\n const n = points.length;\n if (!n) return \"\";\n const r = (v: number) => Math.round(v * 100) / 100;\n if (n === 1) return `M${r(points[0][0])},${r(points[0][1])}`;\n const m: number[] = [];\n for (let i = 0; i < n - 1; i++) m.push((points[i + 1][1] - points[i][1]) / (points[i + 1][0] - points[i][0] || 1));\n const t: number[] = [m[0]];\n for (let i = 1; i < n - 1; i++) t.push(m[i - 1] * m[i] <= 0 ? 0 : (m[i - 1] + m[i]) / 2);\n t.push(m[n - 2]);\n for (let i = 0; i < n - 1; i++) {\n if (m[i] === 0) {\n t[i] = 0;\n t[i + 1] = 0;\n continue;\n }\n const a = t[i] / m[i];\n const b = t[i + 1] / m[i];\n const s = a * a + b * b;\n if (s > 9) {\n const k = 3 / Math.sqrt(s);\n t[i] = k * a * m[i];\n t[i + 1] = k * b * m[i];\n }\n }\n let d = `M${r(points[0][0])},${r(points[0][1])}`;\n for (let i = 0; i < n - 1; i++) {\n const [x0, y0] = points[i];\n const [x1, y1] = points[i + 1];\n const dx = (x1 - x0) / 3;\n d += `C${r(x0 + dx)},${r(y0 + t[i] * dx)} ${r(x1 - dx)},${r(y1 - t[i + 1] * dx)} ${r(x1)},${r(y1)}`;\n }\n return d;\n}\n\nexport function ComboChart({\n title = \"Orders\",\n days,\n rolling = 7,\n average: averageProp,\n previous,\n series = [\"Orders\", \"7-day average\"],\n format,\n locales,\n className = \"\",\n ...props\n}: ComboChartProps) {\n const reduced = useReducedMotion();\n const id = React.useId();\n const [visible, setVisible] = React.useState(false);\n const [plotH, setPlotH] = React.useState(PLOT);\n const [active, setActive] = React.useState(null);\n const [keyboard, setKeyboard] = React.useState(false);\n const [width, setWidth] = React.useState(0);\n const rootRef = React.useRef(null);\n const chartRef = React.useRef(null);\n const plotRef = React.useRef(null);\n const pingRef = React.useRef(null);\n\n const n = days.length;\n const values = days.map((d) => d.value);\n // A rolling average over the days available (the first few average over fewer days).\n const average = React.useMemo(\n () =>\n averageProp ??\n values.map((_, i) => {\n const from = Math.max(0, i - rolling + 1);\n const run = values.slice(from, i + 1);\n return run.reduce((s, v) => s + v, 0) / run.length;\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [averageProp, values.join(\",\"), rolling],\n );\n const max = niceTop(Math.max(0, ...values, ...average));\n const total = values.reduce((s, v) => s + v, 0);\n const daily = n ? total / n : 0;\n const best = values.indexOf(Math.max(...values));\n const quiet = values.indexOf(Math.min(...values));\n const change = previous ? (total - previous) / previous : null;\n\n // The plot's height is set by the card's width in CSS; read it so the drawing fits.\n React.useLayoutEffect(() => {\n const el = chartRef.current;\n if (!el) return;\n const measure = () =>\n setPlotH((h) => {\n const next = el.offsetHeight - LABELS;\n return next > 0 && next !== h ? next : h;\n });\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n React.useEffect(() => {\n const el = rootRef.current;\n if (!el) return;\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n setVisible(true);\n observer.disconnect();\n }\n },\n { rootMargin: \"0px 0px -10% 0px\" },\n );\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n React.useLayoutEffect(() => {\n const el = plotRef.current;\n if (!el) return;\n const measure = () => setWidth((w) => (w === el.offsetWidth ? w : el.offsetWidth));\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n // The dot pings once each time it lands on a new day.\n React.useEffect(() => {\n if (active === null || reduced) return;\n const ring = pingRef.current;\n if (!ring) return;\n const timer = window.setTimeout(() => {\n ring.animate(\n [\n { transform: \"translate(-50%, -50%) scale(1)\", opacity: 0.45 },\n { transform: \"translate(-50%, -50%) scale(2.6)\", opacity: 0 },\n ],\n { duration: 640, easing: \"cubic-bezier(0.22,1,0.36,1)\" },\n );\n }, 180);\n return () => window.clearTimeout(timer);\n }, [active, reduced]);\n\n const slot = n ? width / n : 0;\n const cx = (i: number) => (i + 0.5) * slot;\n const y = (v: number) => TOP + (plotH - TOP) * (1 - v / max);\n const line = width ? monotone(average.map((v, i) => [cx(i), y(v)] as [number, number])) : \"\";\n const barWidth = Math.max(3, Math.min(24, slot * 0.62));\n\n const pointAt = (clientX: number) => {\n const r = plotRef.current?.getBoundingClientRect();\n if (!r || !n) return null;\n return Math.min(n - 1, Math.max(0, Math.floor(((clientX - r.left) / r.width) * n)));\n };\n const onKeyDown = (e: React.KeyboardEvent) => {\n if (!n) return;\n const from = active ?? n - 1;\n const moves: Record = { ArrowLeft: from - 1, ArrowRight: from + 1, Home: 0, End: n - 1 };\n if (e.key === \"Escape\") return setActive(null);\n if (!(e.key in moves)) return;\n e.preventDefault();\n setKeyboard(true);\n setActive(Math.min(n - 1, Math.max(0, active === null ? from : moves[e.key])));\n };\n\n const fmt = (v: number) => new Intl.NumberFormat(locales, { maximumFractionDigits: 0, ...format }).format(v);\n const name = (i: number) => days[i]?.title ?? days[i]?.label ?? \"\";\n const every = width && n ? Math.max(1, Math.ceil(44 / (width / n))) : 1;\n // Labels thin out on narrow screens; the hovered one always shows, and its close neighbours step aside for it.\n const label = (i: number) => active === i || ((n - 1 - i) % every === 0 && (active === null || every === 1 || Math.abs(i - active) >= every));\n const whole = { maximumFractionDigits: 0, ...format };\n const compact: Intl.NumberFormatOptions = { ...format, notation: \"compact\", minimumFractionDigits: 0, maximumFractionDigits: 1 };\n\n return (\n
\n
\n
\n
\n

\n {active !== null ? `${title} on ${name(active)}` : title}\n

\n

\n \n \n \n {change !== null && (\n \n \n = 0 ? \"bg-emerald-500/10 text-emerald-600\" : \"bg-red-500/10 text-red-600\"\n }`}\n >\n = 0 ? \"none\" : \"rotate(180deg)\" }}>\n \n \n \n \n \n \n )}\n

\n

\n \n {active !== null ? `on the ${series[1].toLowerCase()}` : \"a day on average\"}\n

\n
\n
\n\n {/* The legend: a bar key and a line key, so the two read by shape as well as colour. */}\n
\n \n \n {series[0]}\n \n \n \n {series[1]}\n \n
\n\n
\n {Array.from({ length: STEPS + 1 }, (_, k) => 1 - k / STEPS).map((f) => (\n
\n \n \n \n
\n
\n ))}\n\n keyboard && (setActive(null), setKeyboard(false))}\n onPointerMove={(e) => {\n setKeyboard(false);\n setActive(pointAt(e.clientX));\n }}\n onPointerDown={(e) => setActive(pointAt(e.clientX))}\n onPointerLeave={(e) => e.pointerType === \"mouse\" && setActive(null)}\n className={`absolute inset-y-0 right-0 touch-pan-y select-none rounded-lg ${FOCUS}`}\n style={{ left: \"var(--gutter)\" }}\n >\n {days.map((d, i) => {\n const hovered = active === i;\n return (\n \n \n \n {d.label}\n \n \n );\n })}\n\n \n \n {line && }\n \n
\n\n {/* The line's dot, and the ring that pings when it lands. */}\n {[pingRef, null].map((ref, k) => (\n \n ))}\n
\n
\n\n {/* The day's highlights as a compact strip under a hairline. */}\n
\n {[\n { label: \"Best day\", value: values[best] ?? 0, note: days[best]?.label },\n { label: \"Daily average\", value: daily, note: `over ${n} days` },\n { label: \"Quietest day\", value: values[quiet] ?? 0, note: days[quiet]?.label },\n ].map((t) => (\n
\n
{t.label}
\n
\n \n
\n
{t.note}
\n
\n ))}\n
\n\n

\n {keyboard && active !== null ? `${name(active)}: ${fmt(values[active])}, ${series[1].toLowerCase()} ${fmt(average[active])}` : \"\"}\n

\n \n \n \n \n \n \n \n \n \n \n {days.map((d, i) => (\n \n \n \n \n \n ))}\n \n
\n {title}: {fmt(total)} over {n} days\n
Day{series[0]}{series[1]}
{name(i)}{fmt(d.value)}{fmt(average[i])}
\n
\n \n );\n}\n"}],"css":{},"docs":"Docs and live preview: https://hairlineui.com/ui/combo-chart"}