/* ============================================================ Sentinel Mesh — chart primitives Lightweight SVG-based viz components. Globals: window.{Sparkline, Donut, BarRow, GroupedBar, AreaLine, HeatmapGrid, Gauge, RadialArc, NetworkGraph, StackedBar, useTooltip, formatNum, formatPct} ============================================================ */ const { useState, useEffect, useRef, useMemo, useCallback } = React; // ---------- Formatting ---------- function formatNum(n, opts = {}) { if (n == null) return "—"; const abs = Math.abs(n); if (abs >= 1e9) return (n/1e9).toFixed(opts.dp ?? 1) + "B"; if (abs >= 1e6) return (n/1e6).toFixed(opts.dp ?? 1) + "M"; if (abs >= 1e3) return (n/1e3).toFixed(opts.dp ?? 1) + "K"; return Number.isInteger(n) ? String(n) : n.toFixed(opts.dp ?? 1); } function formatPct(n, dp = 1) { return (n).toFixed(dp) + "%"; } function formatTime(ts) { const d = new Date(ts); return `${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}`; } // ---------- Tooltip helper ---------- function useTooltip() { const [tip, setTip] = useState(null); useEffect(() => { const onMove = (e) => { if (tip) setTip(t => ({ ...t, x: e.clientX, y: e.clientY })); }; if (tip) window.addEventListener("mousemove", onMove); return () => window.removeEventListener("mousemove", onMove); }, [tip != null]); const show = useCallback((content, e) => { setTip({ content, x: e.clientX, y: e.clientY }); }, []); const hide = useCallback(() => setTip(null), []); const Tip = tip ? (
{tip.content}
) : null; return { Tip, show, hide }; } // ---------- Sparkline ---------- function Sparkline({ data, color = "var(--signal)", height = 28, fill = true, baseline = true }) { if (!data || data.length === 0) return null; const w = 200, h = height; const max = Math.max(...data.map(d => d.v)); const min = Math.min(...data.map(d => d.v)); const range = max - min || 1; const xs = data.map((_, i) => (i / (data.length - 1)) * w); const ys = data.map(d => h - ((d.v - min) / range) * (h - 4) - 2); const path = xs.map((x, i) => `${i ? "L" : "M"}${x.toFixed(1)},${ys[i].toFixed(1)}`).join(" "); const area = `${path} L${w},${h} L0,${h} Z`; return ( {baseline && } {fill && } ); } // ---------- Area / line chart ---------- function AreaLine({ data, color = "var(--signal)", height = 200, showAxes = true, label }) { const ref = useRef(null); const [w, setW] = useState(600); useEffect(() => { const ro = new ResizeObserver(() => { if (ref.current) setW(ref.current.clientWidth); }); if (ref.current) ro.observe(ref.current); return () => ro.disconnect(); }, []); const { show, hide, Tip } = useTooltip(); const padL = 36, padR = 12, padT = 8, padB = 22; const innerW = w - padL - padR; const innerH = height - padT - padB; const max = Math.max(...data.map(d => d.v)); const min = Math.min(...data.map(d => d.v)); const range = (max - min) || 1; const xs = data.map((_, i) => padL + (i / (data.length - 1)) * innerW); const ys = data.map(d => padT + innerH - ((d.v - min) / range) * innerH); const path = xs.map((x, i) => `${i ? "L" : "M"}${x.toFixed(1)},${ys[i].toFixed(1)}`).join(" "); const area = `${path} L${padL+innerW},${padT+innerH} L${padL},${padT+innerH} Z`; const ticks = [0, 0.5, 1].map(t => min + range * t); return (
{Tip} {/* gridlines */} {showAxes && ticks.map((t, i) => ( {formatNum(t)} ))} {/* time labels */} {showAxes && [0, Math.floor(data.length/2), data.length-1].map(i => ( {formatTime(data[i].t)} ))} {/* hover overlay */} {data.map((d, i) => ( show(<>{label || "value"}{formatNum(d.v, {dp:2})} at{formatTime(d.t)}, e)} onMouseLeave={hide}/> ))}
); } // ---------- Donut ---------- function Donut({ data, size = 140, thickness = 22, centerLabel, centerValue }) { const total = data.reduce((s, d) => s + d.value, 0) || 1; const r = size / 2 - thickness / 2 - 2; const c = size / 2; let acc = 0; const { show, hide, Tip } = useTooltip(); return (
{Tip} {data.map((d, i) => { const frac = d.value / total; const start = acc; const end = acc + frac; acc = end; const dash = (end - start) * 2 * Math.PI * r; const gap = 2 * Math.PI * r - dash; const offset = -start * 2 * Math.PI * r; return ( show(<>{d.label}{formatNum(d.value)} · {(frac*100).toFixed(1)}%, e)} onMouseLeave={hide}/> ); })} {centerValue && ( {centerValue} )} {centerLabel && ( {centerLabel} )}
labelvalue
{data.map((d, i) => (
{d.label} {formatNum(d.value)}
))}
); } // ---------- BarRow (Grafana-style heatmap-row, like ref img1 top bars) ---------- // Renders a list of named rows where each row is a sequence of cells whose // color encodes value relative to the row max. Inspired by the dense // Grafana "by event count" heat-bar style — but original layout. function BarRow({ data, cells = 20, height = 20, valueKey = "value", showValue = true, palette = "fire" }) { const max = Math.max(...data.map(d => d[valueKey] || 0), 1); const palettes = { fire: (t) => `oklch(${65 + t*8}% ${0.13 + t*0.06} ${85 - t*60})`, ocean: (t) => `oklch(${55 + t*15}% ${0.08 + t*0.1} ${220 - t*30})`, spectrum: (t) => `oklch(${60 + t*20}% 0.16 ${290 - t*200})`, }; const fn = palettes[palette] || palettes.fire; return (
{data.map((row, i) => { const v = row[valueKey] || 0; const filled = Math.round((v / max) * cells); return (
{row.label || row.name}
{Array.from({ length: cells }).map((_, c) => { if (c < filled) { const t = c / Math.max(cells - 1, 1); return
; } return
; })}
{showValue && ( {formatNum(v)} )}
); })}
); } // ---------- Stacked bar (per-day) ---------- function StackedBar({ data, keys, colors, height = 200, showAxes = true }) { const ref = useRef(null); const [w, setW] = useState(600); useEffect(() => { const ro = new ResizeObserver(() => { if (ref.current) setW(ref.current.clientWidth); }); if (ref.current) ro.observe(ref.current); return () => ro.disconnect(); }, []); const padL = 36, padR = 8, padT = 8, padB = 22; const innerW = w - padL - padR; const innerH = height - padT - padB; const max = Math.max(...data.map(d => keys.reduce((s, k) => s + (d[k]||0), 0)), 1); const colW = innerW / data.length; const { show, hide, Tip } = useTooltip(); return (
{Tip} {showAxes && [0, 0.5, 1].map((t, i) => ( {formatNum(max * t)} ))} {data.map((d, i) => { let acc = 0; return ( {keys.map((k, ki) => { const v = d[k] || 0; const h = (v / max) * innerH; const y = padT + innerH - acc - h; acc += h; return ( show(<>{k}{formatNum(v)}, e)} onMouseLeave={hide}/> ); })} ); })} {showAxes && [0, Math.floor(data.length/2), data.length-1].map(i => ( {data[i].label != null ? data[i].label : `${data[i].hour ?? i}h`} ))}
); } // ---------- Heatmap grid ---------- function HeatmapGrid({ rows, cols, values, scaleMax, color = "oklch(70% 0.16 25)", labelRow, labelCol, cellH = 22, gap = 2 }) { const max = scaleMax ?? Math.max(...values.flat()); const { show, hide, Tip } = useTooltip(); return (
{Tip}
{rows.map(r => (
{r}
))}
{cols.map(c => (
{c}
))}
{rows.map((r, ri) => (
{cols.map((c, ci) => { const v = values[ri][ci]; const t = v / max; const baseColor = color.replace(/oklch\((\d+)%\s+([0-9.]+)\s+(\d+)\)/, (_, l, ch, h) => { return `oklch(${20 + t*60}% ${(parseFloat(ch) * (0.3 + t*0.7)).toFixed(3)} ${h})`; }); return (
0.5 ? "oklch(15% 0.02 250)" : "var(--fg-1)", border: "1px solid oklch(100% 0 0 / 0.04)", }} onMouseEnter={(e) => show(<>{labelRow}{r} {labelCol}{c} · {formatNum(v)}, e)} onMouseLeave={hide}> {v}
); })}
))}
); } // ---------- Gauge (semicircle) ---------- function Gauge({ value, max = 100, label, unit = "", thresholds = [0.5, 0.8], color }) { const size = 160; const r = size / 2 - 14; const c = size / 2; const startAngle = Math.PI; const t = Math.min(1, value / max); const endAngle = startAngle + t * Math.PI; function arc(a0, a1, rr) { const x0 = c + rr * Math.cos(a0); const y0 = c + rr * Math.sin(a0); const x1 = c + rr * Math.cos(a1); const y1 = c + rr * Math.sin(a1); const large = a1 - a0 > Math.PI ? 1 : 0; return `M${x0} ${y0} A${rr} ${rr} 0 ${large} 1 ${x1} ${y1}`; } const auto = color || (t < thresholds[0] ? "var(--green)" : t < thresholds[1] ? "var(--amber)" : "var(--red)"); return (
{typeof value === "number" ? value.toFixed(value < 10 ? 2 : 0) : value}{unit} {label}
); } // ---------- Radial Arc (used for circular flow / dark-matter style infographic) ---------- function RadialArc({ value, max = 100, color = "var(--signal)", label, sublabel, size = 130 }) { const r = size / 2 - 16; const c = size / 2; const t = Math.min(1, value / max); const circ = 2 * Math.PI * r; return ( {typeof value === "number" ? (value < 10 ? value.toFixed(1) : Math.round(value)) : value} {label} {sublabel && {sublabel}} ); } // ---------- Inventory tile (full-color block, ref img1 inventory style) ---------- function TileBlock({ label, value, color }) { return (
{label}
{formatNum(value)}
); } // ---------- Network Graph (force-free, polar layout) ---------- // Used for blast radius, ship-to-ship style risk flow. Original layout. function NetworkGraph({ center, edges, height = 360, accentByRisk = true, onNodeClick }) { const ref = useRef(null); const [w, setW] = useState(600); useEffect(() => { const ro = new ResizeObserver(() => { if (ref.current) setW(ref.current.clientWidth); }); if (ref.current) ro.observe(ref.current); return () => ro.disconnect(); }, []); const cx = w/2, cy = height/2; const r = Math.min(w, height) * 0.36; const { show, hide, Tip } = useTooltip(); const positions = edges.map((_, i) => { const a = (i / edges.length) * 2 * Math.PI - Math.PI / 2; return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) }; }); function riskColor(risk) { if (!accentByRisk) return "var(--signal)"; if (risk > 70) return "var(--red)"; if (risk > 40) return "var(--amber)"; return "var(--green)"; } return (
{Tip} {/* edges */} {edges.map((e, i) => { const p = positions[i]; const curveX = (cx + p.x) / 2 + (p.y - cy) * 0.08; const curveY = (cy + p.y) / 2 - (p.x - cx) * 0.08; const stroke = riskColor(e.risk); const strokeW = 1.2 + (e.risk / 100) * 3; return ( ); })} {/* center node */} {center.label || center.name} {center.note || center.id} {/* edge nodes */} {edges.map((e, i) => { const p = positions[i]; return ( onNodeClick && onNodeClick(e)} onMouseEnter={(ev) => show(<>node{e.node} risk{e.risk}, ev)} onMouseLeave={hide}> {e.flag} {e.node} {e.id} · risk {e.risk} ); })}
); } // ---------- Concentric rings (blast radius) ---------- function BlastRings({ epicenter, rings, height = 360 }) { const ref = useRef(null); const [w, setW] = useState(600); useEffect(() => { const ro = new ResizeObserver(() => { if (ref.current) setW(ref.current.clientWidth); }); if (ref.current) ro.observe(ref.current); return () => ro.disconnect(); }, []); const cx = w / 2, cy = height / 2; const maxR = Math.min(w, height) * 0.46; const colors = ["var(--red)", "var(--amber)", "var(--signal)", "var(--green)"]; return (
{rings.slice().reverse().map((r, i) => { const idx = rings.length - 1 - i; const rr = (idx + 1) / rings.length * maxR; const c = colors[idx] || "var(--signal)"; return ( {r.label.toUpperCase()} · {r.count} ); })} {/* spokes for examples */} {rings.flatMap((ring, ri) => { const rr = (ri + 1) / rings.length * maxR; const prevR = ri / rings.length * maxR; const mid = (rr + prevR) / 2; return ring.examples.slice(0, 3).map((ex, ei) => { const angle = (ei / 3) * Math.PI * 2 / rings.length + (ri * Math.PI / 6) - Math.PI/2; const x = cx + mid * Math.cos(angle); const y = cy + mid * Math.sin(angle); return ( {ex} ); }); })} {/* epicenter */} {epicenter.label} {epicenter.note}
); } // ---------- Circular ribbon (blood pressure / dark matter inspired) ---------- // Sections of a curved arc, used for editorial story-viz like the // "Silent Burden" or "Dark Matter" infographics. Original. function RibbonArc({ buckets, height = 320, accent = "oklch(70% 0.16 290)" }) { const ref = useRef(null); const [w, setW] = useState(600); useEffect(() => { const ro = new ResizeObserver(() => { if (ref.current) setW(ref.current.clientWidth); }); if (ref.current) ro.observe(ref.current); return () => ro.disconnect(); }, []); const cx = w / 2, cy = height / 2; const ringR = Math.min(w, height) * 0.36; const ringW = Math.min(w, height) * 0.07; function arc(a0, a1, rr) { const x0 = cx + rr * Math.cos(a0); const y0 = cy + rr * Math.sin(a0); const x1 = cx + rr * Math.cos(a1); const y1 = cy + rr * Math.sin(a1); const large = a1 - a0 > Math.PI ? 1 : 0; return `M${x0} ${y0} A${rr} ${rr} 0 ${large} 1 ${x1} ${y1}`; } const totalSpan = Math.PI * 1.6; const startA = -Math.PI / 2 - totalSpan / 2; const total = buckets.reduce((s, b) => s + b.count, 0) || 1; let acc = 0; return (
{/* baseline ring */} {buckets.map((b, i) => { const frac = b.count / total; const a0 = startA + (acc / total) * totalSpan + 0.01; const a1 = startA + ((acc + b.count) / total) * totalSpan - 0.01; acc += b.count; const mid = (a0 + a1) / 2; const tx = cx + (ringR + ringW) * Math.cos(mid); const ty = cy + (ringR + ringW) * Math.sin(mid); return ( {b.label} {b.count} ); })} {total} TOTAL
); } // ---------- Sankey-lite (for HITL gates, McKinsey-inspired flow) ---------- function SankeyLite({ left, right, flows, height = 320 }) { const ref = useRef(null); const [w, setW] = useState(600); useEffect(() => { const ro = new ResizeObserver(() => { if (ref.current) setW(ref.current.clientWidth); }); if (ref.current) ro.observe(ref.current); return () => ro.disconnect(); }, []); const padX = 8, lblW = 150; const colW = 14; const innerH = height - 24; const lTotal = left.reduce((s, n) => s + n.value, 0); const rTotal = right.reduce((s, n) => s + n.value, 0); const total = Math.max(lTotal, rTotal); let lAcc = 0, rAcc = 0; const lPos = left.map(n => { const h = (n.value / total) * innerH; const y = lAcc; lAcc += h + 4; return { ...n, h, y }; }); const rPos = right.map(n => { const h = (n.value / total) * innerH; const y = rAcc; rAcc += h + 4; return { ...n, h, y }; }); const { show, hide, Tip } = useTooltip(); return (
{Tip} {/* left bars */} {lPos.map(n => ( {n.label} {formatNum(n.value)} ))} {/* right bars */} {rPos.map(n => { const x = w - padX - lblW - colW; return ( {n.label} {formatNum(n.value)} ); })} {/* flows */} {flows.map((f, i) => { const lN = lPos.find(n => n.id === f.from); const rN = rPos.find(n => n.id === f.to); if (!lN || !rN) return null; const lH = (f.value / lN.value) * lN.h; const rH = (f.value / rN.value) * rN.h; // accumulate per-node offset lN._off = (lN._off || 0); rN._off = (rN._off || 0); const x0 = padX + lblW + colW; const y0 = lN.y + 12 + lN._off; const x1 = w - padX - lblW - colW; const y1 = rN.y + 12 + rN._off; lN._off += lH; rN._off += rH; const mx = (x0 + x1) / 2; return ( show(<>{lN.label} → {rN.label}{formatNum(f.value)}, e)} onMouseLeave={hide}/> ); })}
); } // Expose Object.assign(window, { Sparkline, AreaLine, Donut, BarRow, StackedBar, HeatmapGrid, Gauge, RadialArc, TileBlock, NetworkGraph, BlastRings, RibbonArc, SankeyLite, useTooltip, formatNum, formatPct, formatTime, });