M4: Visualisations and Dashboards

// v1: a React + D3 line chart; the API returns the raw series; every point is an SVG element or a path segment
function Line({ series }: { series: Sample[] }) {              // 3,600 samples for an hour: fine
  const x = scaleTime().domain(extent(series, d => d.t)).range([0, W]), y = scaleLinear().domain([0, max(series, d => d.v)]).range([H, 0])
  const d = line<Sample>().x(s => x(s.t)).y(s => y(s.v))(series)
  return <svg width={W} height={H}><path d={d} fill="none" stroke="currentColor" />{series.map(s => <circle key={s.t} cx={x(s.t)} cy={y(s.v)} r={2} />)}</svg>
}
// 1 hour: 3,600 circles: ok. 30 days: 2.6M samples requested (40 MB), 2.6M circles attempted: the tab dies before the first frame

// v2: a canvas scatter in React: React owns the element and the data; a draw function owns the pixels; a quadtree owns hit testing
function Scatter({ points, width, height, onHover }: Props) {
  const ref = useRef<HTMLCanvasElement>(null)
  const tree = useMemo(() => quadtree(points, p => p.x, p => p.y), [points])          // d3-quadtree: O(n) build, O(log n) find
  useEffect(() => {
    const c = ref.current!; const dpr = devicePixelRatio
    c.width = width * dpr; c.height = height * dpr                                      // backing store at DPR; CSS size stays width×height
    const ctx = c.getContext('2d')!; ctx.scale(dpr, dpr); ctx.clearRect(0, 0, width, height)
    ctx.fillStyle = 'rgba(190,24,93,.6)'; ctx.beginPath()
    for (const p of points) { ctx.moveTo(p.x + 2, p.y); ctx.arc(p.x, p.y, 2, 0, Math.PI * 2) }   // one path for all marks
    ctx.fill()                                                                           // one fill: 20k marks in ~1 ms
  }, [points, width, height])
  return <canvas ref={ref} style={{ width, height }}
    onMouseMove={e => { const r = e.currentTarget.getBoundingClientRect(); onHover(tree.find(e.clientX - r.left, e.clientY - r.top, 6)) }}
    role="img" aria-label={`Scatter of ${points.length} points`} />                      // plus an offscreen table or summary for AT
}
// hit testing alternatives: a picking canvas (each mark drawn in a unique colour; read the pixel under the cursor: O(1), exact shapes);
// the quadtree is simpler and fine for points. for the renderer decision: 20k here; past ~100k, regl/deck.gl

// v3: live updates become frames. a ring per series, one rAF, per-series subscriptions
const buffers = new Map<string, Ring>()                 // latest N samples per series
const subs = new Map<string, Set<() => void>>()
let scheduled = false
socket.onmessage = e => {
  for (const { series, t, v } of decode(e.data)) buffers.get(series)?.push(t, v)      // no render here
  if (!scheduled) { scheduled = true; requestAnimationFrame(flush) }
}
function flush() {
  scheduled = false
  const touched = new Set<string>()
  for (const [s, ring] of buffers) if (ring.dirty) { ring.commit(); touched.add(s) }   // swap into the readable snapshot
  for (const s of touched) subs.get(s)?.forEach(fn => fn())                           // only charts on touched series re-render
}
document.addEventListener('visibilitychange', () => { if (document.hidden) buffers.forEach(r => r.keepLatestOnly()) })   // no rAF while hidden; do not hoard
// a chart: const snap = useSyncExternalStore(cb => subscribe(series, cb), () => buffers.get(series)!.snapshot)
// streaming canvas line: ctx.drawImage(canvas, -1, 0); draw the new column at the right edge; axes on a second canvas layer that redraws on scale change only