// Hospital Dashboard — reusable components // Vitals waveforms, KPI cards, status badges, toasts, etc. const { useState, useEffect, useRef, useMemo, useCallback } = React; // ─── Smooth animated number ───────────────────────────── function Ticker({ value, decimals = 0, duration = 600, prefix = '', suffix = '', className }) { const [display, setDisplay] = useState(value); const fromRef = useRef(value); const startRef = useRef(0); const rafRef = useRef(0); useEffect(() => { fromRef.current = display; startRef.current = performance.now(); const tick = (now) => { const t = Math.min(1, (now - startRef.current) / duration); const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic const v = fromRef.current + (value - fromRef.current) * eased; setDisplay(v); if (t < 1) rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [value, duration]); return {prefix}{display.toFixed(decimals)}{suffix}; } // ─── Live ECG waveform — scrolling ────────────────────── function ECGWave({ bpm = 80, color = '#10b981', height = 60, width = '100%', running = true }) { const ref = useRef(null); const offsetRef = useRef(0); useEffect(() => { const canvas = ref.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const dpr = window.devicePixelRatio || 1; let w = canvas.clientWidth, h = canvas.clientHeight; if (w === 0 || h === 0) return; canvas.width = w * dpr; canvas.height = h * dpr; ctx.scale(dpr, dpr); const samplesPerSec = 200; const beatsPerSec = bpm / 60; const wave = window.ecgWaveform(Math.floor(samplesPerSec * 4), Math.max(1, Math.round(beatsPerSec * 4)), 1, 0.04); const speed = 1.4; const drawFrame = () => { ctx.clearRect(0, 0, w, h); // Subtle grid ctx.strokeStyle = 'rgba(120, 120, 140, 0.08)'; ctx.lineWidth = 1; for (let x = 0; x < w; x += 12) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke(); } for (let y = 0; y < h; y += 12) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke(); } // Waveform ctx.lineWidth = 1.8; ctx.strokeStyle = color; ctx.shadowColor = color; ctx.shadowBlur = 6; ctx.beginPath(); for (let x = 0; x < w; x++) { const idx = Math.floor(offsetRef.current + x) % wave.length; const v = wave[idx]; const y = h * 0.55 - v * h * 0.35; if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); ctx.shadowBlur = 0; // Leading dot const idx = Math.floor(offsetRef.current + w - 1) % wave.length; const v = wave[idx]; ctx.fillStyle = color; ctx.beginPath(); ctx.arc(w - 2, h * 0.55 - v * h * 0.35, 2.2, 0, Math.PI * 2); ctx.fill(); }; // Paint one frame immediately (visible even when rAF is paused) drawFrame(); if (!running) return; let raf; const tick = () => { drawFrame(); offsetRef.current += speed; raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [bpm, color, running]); return