/* ============================================================ VITALS PANEL — pulse, BP, RR, SpO2, pain, AVPU + ECG ============================================================ */ /* Animated ECG waveform — driven by current HR */ function ECG({ hr, color = "#f4c243", height = 36 }) { const canvasRef = React.useRef(null); const stateRef = React.useRef({ phase: 0, points: [] }); React.useEffect(() => { const cv = canvasRef.current; if (!cv) return; const ctx = cv.getContext("2d"); let raf = 0; const W = cv.width = cv.clientWidth * 2; const H = cv.height = height * 2; ctx.scale(1, 1); // beats per second let last = performance.now(); function pqrst(x) { // returns y in [-1, 1.6] across a single beat, x in [0,1] if (x < 0.10) return Math.sin(x * Math.PI / 0.10) * 0.10; // P if (x < 0.18) return 0; if (x < 0.21) return -0.25; // Q if (x < 0.24) return 1.6; // R if (x < 0.27) return -0.45; // S if (x < 0.34) return 0; if (x < 0.50) return Math.sin((x - 0.34) * Math.PI / 0.16) * 0.30; // T return 0; } function frame(t) { const dt = (t - last) / 1000; last = t; const beatPerSec = (hr || 60) / 60; stateRef.current.phase += dt * beatPerSec; const phase = stateRef.current.phase; // shift existing — fade colour follows the active theme so the trail // doesn't leave dark smudges on the light variant. const isLight = document.documentElement.dataset.theme === "light"; ctx.fillStyle = isLight ? "rgba(255,255,255,0.32)" : "rgba(7,9,10,0.25)"; ctx.fillRect(0, 0, W, H); // Asystole: HR has ceased. Render a flat trace — no PQRST — with a // faint baseline noise so it reads as a live (dead) signal, not a // disconnected lead. if (!hr || hr <= 0) { ctx.beginPath(); ctx.strokeStyle = color; ctx.lineWidth = 1.6; ctx.shadowColor = color; ctx.shadowBlur = 6; const baseY = H * 0.55; const N = 240; for (let i = 0; i < N; i++) { const px = i / N * W; const py = baseY + (Math.random() - 0.5) * 0.6; if (i === 0) ctx.moveTo(px, py);else ctx.lineTo(px, py); } ctx.stroke(); ctx.shadowBlur = 0; raf = requestAnimationFrame(frame); return; } // draw the recent ~3 seconds of waveform const winSec = 3; const N = 240; ctx.beginPath(); ctx.strokeStyle = color; ctx.lineWidth = 1.6; ctx.shadowColor = color; ctx.shadowBlur = 6; for (let i = 0; i < N; i++) { const tt = i / N * winSec; // seconds before now const beat = phase - (winSec - tt) * beatPerSec; // beat index at this past moment const frac = beat - Math.floor(beat); const y = pqrst(frac); const px = i / N * W; const py = H * 0.55 - y * H * 0.32; if (i === 0) ctx.moveTo(px, py);else ctx.lineTo(px, py); } ctx.stroke(); ctx.shadowBlur = 0; raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, [hr, color, height]); return