// src/components/charts/TrendChart.tsx "use client"; import { useEffect, useMemo, useRef, useState } from "react"; export interface TrendSeries { id: string; label: string; /** ink = the series the chart is about; context = de-emphasis comparison. */ tone: "ink" | "context"; values: number[]; } export interface TrendChartProps { /** X labels, one per point (already formatted, e.g. "Jul 12"). */ labels: string[]; series: TrendSeries[]; formatValue?: (n: number) => string; height?: number; "aria-label": string; } const PL = 48; const PR = 72; const PT = 12; const PB = 26; function niceCeil(max: number): number { if (max <= 0) return 1; const pow = 10 ** Math.floor(Math.log10(max)); for (const m of [1, 2, 2.5, 5, 10]) if (max <= m * pow) return m * pow; return 10 * pow; } const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }); const full = new Intl.NumberFormat("en"); /** Line chart in emphasis form: one ink series, optional context comparison. * Crosshair + one tooltip listing every series at the snapped X; same readout * on keyboard (arrows / Home / End). Values are also reachable without the * pointer via endpoint labels, axis ticks, and ChartCard's table view. */ export default function TrendChart({ labels, series, formatValue = (n) => compact.format(n), height = 240, "aria-label": ariaLabel, }: TrendChartProps) { const wrapRef = useRef(null); const [width, setWidth] = useState(0); const [active, setActive] = useState(null); useEffect(() => { const el = wrapRef.current; if (!el) return; const ro = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width)); ro.observe(el); return () => ro.disconnect(); }, []); const n = labels.length; const maxV = useMemo(() => niceCeil(Math.max(...series.flatMap((s) => s.values))), [series]); const ticks = [0, 0.25, 0.5, 0.75, 1].map((f) => f * maxV); const x = (i: number) => PL + (n === 1 ? 0 : (i * (width - PL - PR)) / (n - 1)); const y = (v: number) => PT + (1 - v / maxV) * (height - PT - PB); const xLabelIdx = useMemo(() => { const count = Math.min(5, n); return [...new Set(Array.from({ length: count }, (_, k) => Math.round((k * (n - 1)) / (count - 1))))]; }, [n]); // Endpoint labels: keep each beside its own dot, but open a minimum gap when // two land on top of each other (only ever 2 series in this system). const endLabelY = useMemo(() => { const ys = series.map((s) => y(s.values[n - 1]) + 4); if (ys.length === 2 && Math.abs(ys[0] - ys[1]) < 16) { const [top, bot] = ys[0] < ys[1] ? [0, 1] : [1, 0]; const mid = (ys[0] + ys[1]) / 2; ys[top] = mid - 8; ys[bot] = mid + 8; } return ys; // eslint-disable-next-line react-hooks/exhaustive-deps }, [series, width, maxV, n, height]); function snap(clientX: number) { const rect = wrapRef.current!.getBoundingClientRect(); const px = clientX - rect.left; const i = Math.round(((px - PL) / (width - PL - PR)) * (n - 1)); setActive(Math.max(0, Math.min(n - 1, i))); } function onKeyDown(e: React.KeyboardEvent) { const cur = active ?? n - 1; if (e.key === "ArrowLeft") setActive(Math.max(0, cur - 1)); else if (e.key === "ArrowRight") setActive(Math.min(n - 1, cur + 1)); else if (e.key === "Home") setActive(0); else if (e.key === "End") setActive(n - 1); else if (e.key === "Escape") setActive(null); else return; e.preventDefault(); } const ink = series.find((s) => s.tone === "ink"); const tooltipLeft = active !== null && width > 0 ? Math.max(84, Math.min(width - 84, x(active))) : 0; return (

{width > 0 && ( )} {active !== null && ( )} {active !== null ? `${labels[active]} — ${series.map((s) => `${s.label} ${full.format(s.values[active])}`).join(", ")}` : ""} {series.length > 1 && (

{series.map((s) => ( {s.label} ))}

)}

); } // src/components/charts/BarList.tsx export interface BarListItem { label: string; value: number; /** Secondary note after the value, e.g. "12 titles". */ hint?: string; } export interface BarListProps { items: BarListItem[]; formatValue?: (n: number) => string; "aria-label": string; } const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }); /** Horizontal bar chart for nominal categories. One series, so every bar wears * the same ink — identity is the row label, magnitude is the length, and the * value sits at the data end, so no legend and no tooltip are needed. */ export default function BarList({ items, formatValue = (n) => compact.format(n), "aria-label": ariaLabel }: BarListProps) { const max = Math.max(...items.map((i) => i.value), 1); return (

{item.label} {formatValue(item.value)} {item.hint && {item.hint}}

); } // src/components/charts/Histogram.tsx export interface HistogramBucket { label: string; count: number; } export interface HistogramProps { buckets: HistogramBucket[]; "aria-label": string; } /** Column histogram for a distribution. Single ink series; every cap carries * its count (sparse enough at ≤ 10 buckets), so values never depend on hover. */ export default function Histogram({ buckets, "aria-label": ariaLabel }: HistogramProps) { const max = Math.max(...buckets.map((b) => b.count), 1); return (

{buckets.map((b) => (

{b.count} {/* capped at 82% so the count label always fits above the tallest bar */} 0 ? 3 : 0)}%` }} /> {b.label}

))}

); } // src/components/charts/ChartCard.tsx "use client"; import { useState, type ReactNode } from "react"; import Card from "@/components/ui/Card"; import SegmentedControl from "@/components/ui/SegmentedControl"; import { Table } from "@/components/ui/Table"; export interface ChartCardProps { title: string; /** What the chart shows and over what window — charts never go uncaptioned. */ caption: string; /** Accessible/table view of the same data. Every chart ships one. */ tableHeaders: string[]; tableRows: (string | number)[][]; children: ReactNode; } /** Chart frame: title, caption, and a Chart/Table view switch. The table view * is the relief channel for anything hover-only or low-contrast in the plot — * same data, same order, no extra fetch. */ export default function ChartCard({ title, caption, tableHeaders, tableRows, children }: ChartCardProps) { const [view, setView] = useState("chart"); return (

{title}

{caption}

{view === "chart" ? ( children ) : ( {tableHeaders.map((h) => ( ))} {tableRows.map((row, i) => ( {row.map((cell, j) => ( ))} ))}

{h}
{typeof cell === "number" ? new Intl.NumberFormat("en").format(cell) : cell}

)} ); } // src/components/charts/Sparkline.tsx /** Decorative 12-point trend beside a stat value. Context-gray body with the * current period stamped in accent — never a full accent series. Purely * supplementary: the value and delta text carry the information. */ export interface SparklineProps { values: number[]; width?: number; height?: number; } export default function Sparkline({ values, width = 88, height = 28 }: SparklineProps) { if (values.length < 2) return null; const pad = 4; const min = Math.min(...values); const max = Math.max(...values); const span = max - min || 1; const x = (i: number) => pad + (i * (width - pad * 2)) / (values.length - 1); const y = (v: number) => pad + (1 - (v - min) / span) * (height - pad * 2); const d = values.map((v, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)} ${y(v).toFixed(1)}`).join(" "); const last = values.length - 1; return ( ); }