React HTML5 Canvas Real-Time Audio / Metrics Visualizer | DevPrompt Lab

Vẽ đồ thị dao động sóng âm hoặc biểu đồ chứng khoán thời gian thực với HTML5 Canvas API và requestAnimationFrame.

Bạn là Creative Technologist & Canvas Performance Engineer.

Hãy viết một component React hiển thị biểu đồ sóng thời gian thực (Waveform / Real-time Metrics) nhận luồng dữ liệu 60 lần/giây:

Yêu cầu:

1. Sử dụng `useRef<HTMLCanvasElement>` kết hợp `requestAnimationFrame` để vẽ trực tiếp trên canvas (không trigger re-render React).

2. Xử lý màn hình Retina / High DPI (window.devicePixelRatio) để đồ thị không bị mờ.

3. Sử dụng ResizeObserver để co giãn canvas kích thước linh hoạt mà không làm biến dạng tỷ lệ vẽ.

4. Tự động dọn dẹp (cancelAnimationFrame) khi unmount.