/* Data-viz primitives: sparkline, radar, distribution histogram, donut,
score ring, trend area, small-multiples. Expressive-but-restrained. */
// ── Sparkline ──────────────────────────────────────────────
function Sparkline({ data, width = 80, height = 22, stroke = 'var(--accent)', fill = 'var(--accent-wash)', showDot = true, strokeWidth = 1.4 }) {
if (!data || data.length < 2) return null;
const min = Math.min(...data), max = Math.max(...data);
const span = Math.max(1, max - min);
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * (width - 4) + 2;
const y = height - 3 - ((v - min) / span) * (height - 6);
return [x, y];
});
const d = pts.map(([x, y], i) => (i === 0 ? `M${x},${y}` : `L${x},${y}`)).join(' ');
const area = `${d} L${pts[pts.length - 1][0]},${height} L${pts[0][0]},${height} Z`;
const last = pts[pts.length - 1];
return (
);
}
// ── Score Ring (animated) ─────────────────────────────────
function ScoreRing({ value, max = 10, size = 140, stroke = 10, color, label = 'of 10', animate = true }) {
const [animated, setAnimated] = React.useState(animate ? 0 : value);
React.useEffect(() => {
if (!animate) { setAnimated(value); return; }
let raf, start;
const dur = 1200;
const step = (t) => {
if (!start) start = t;
const p = Math.min(1, (t - start) / dur);
const eased = 1 - Math.pow(1 - p, 3);
setAnimated(value * eased);
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [value, animate]);
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const off = c - (animated / max) * c;
const col = color || 'var(--accent)';
return (
{max <= 10 ? animated.toFixed(1) : Math.round(animated)}
{label}
);
}
// ── Radar (hex) ────────────────────────────────────────────
function Radar({ axes, values, size = 240, color, compare }) {
const n = axes.length;
const cx = size / 2, cy = size / 2;
const rMax = size / 2 - 40;
const angle = (i) => -Math.PI / 2 + (i / n) * 2 * Math.PI;
const pt = (i, v) => {
const r = (v / 100) * rMax;
return [cx + r * Math.cos(angle(i)), cy + r * Math.sin(angle(i))];
};
const polygon = (vs) => vs.map((v, i) => pt(i, v).join(',')).join(' ');
const rings = [20, 40, 60, 80, 100];
const col = color || 'var(--accent)';
return (
);
}
// ── Distribution histogram ────────────────────────────────
function Histogram({ buckets, width = 360, height = 120, color }) {
const max = Math.max(...buckets.map((b) => b.count), 1);
const barW = (width - (buckets.length - 1) * 4) / buckets.length;
const col = color || 'var(--accent)';
return (
);
}
// ── Trend line chart ───────────────────────────────────────
function TrendLine({ data, width = 540, height = 180, color, axis = true, markers = true }) {
if (!data || data.length < 2) return null;
const pad = { t: 16, r: 16, b: 26, l: 32 };
const w = width - pad.l - pad.r;
const h = height - pad.t - pad.b;
const min = 0, max = 100;
const pts = data.map((d, i) => {
const x = pad.l + (i / (data.length - 1)) * w;
const y = pad.t + h - ((d.value - min) / (max - min)) * h;
return { ...d, x, y };
});
const line = pts.map((p, i) => (i === 0 ? `M${p.x},${p.y}` : `L${p.x},${p.y}`)).join(' ');
const area = `${line} L${pts[pts.length - 1].x},${pad.t + h} L${pts[0].x},${pad.t + h} Z`;
const col = color || 'var(--accent)';
const gridLines = [0, 25, 50, 75, 100];
return (
);
}
// ── Donut ──────────────────────────────────────────────────
function Donut({ segments, size = 120, thickness = 14, center }) {
const total = segments.reduce((s, x) => s + x.value, 0) || 1;
const r = (size - thickness) / 2;
const c = 2 * Math.PI * r;
let offset = 0;
return (
{center && (
{center}
)}
);
}
// ── Bar row (horizontal) ──────────────────────────────────
function BarRow({ label, value, max = 100, color, right, width }) {
const pct = Math.min(100, (value / max) * 100);
const col = color || 'var(--accent)';
return (
{label}
{right != null ? right : Math.round(value)}
);
}
// ── Avatar ──────────────────────────────────────────────
function Avatar({ name, size = 28, seed = 0 }) {
const palette = ['#a93226', '#2d6a4f', '#2e4a7a', '#8a5a1b', '#6c4675', '#1f7a8c', '#7a3f1f'];
const bg = palette[seed % palette.length];
return (
{initials(name)}
);
}
// ── Waveform (recording UI) ────────────────────────────────
function Waveform({ active, bars = 32, variant = 'bars' }) {
const [tick, setTick] = React.useState(0);
React.useEffect(() => {
if (!active) return;
let raf;
const loop = () => { setTick((t) => t + 1); raf = requestAnimationFrame(loop); };
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, [active]);
if (variant === 'dots') {
return (
{Array.from({ length: 5 }).map((_, i) => {
const h = active ? 6 + Math.abs(Math.sin(tick / 8 + i)) * 14 : 6;
return
;
})}
{Array.from({ length: bars }).map((_, i) => {
const seed = Math.sin((i + 1) * 2.13);
const wave = active ? 4 + Math.abs(Math.sin(tick / 6 + i * 0.4 + seed)) * 28 : 4;
return
;
})}