chart_utils.js

class Chart {
    constructor(canvas, label) {
        this.ctx = canvas.getContext("2d");
        this.canvas = canvas;
        this.data = [];
        this.label = label;
        this.maxData = 0;
        this.generation = 0;
    }

    push(value) {
        this.data.push(value);
        this.generation++;
        if (value > this.maxData) this.maxData = value;
        this.draw();
    }

    draw() {
        const ctx = this.ctx;
        const w = this.canvas.width;
        const h = this.canvas.height;
        const margin = 20;

        ctx.clearRect(0, 0, w, h);
        
        // Draw axes
        ctx.beginPath();
        ctx.strokeStyle = "rgba(230, 225, 229, 0.2)"; // OnSurface Variant
        ctx.lineWidth = 1;
        ctx.moveTo(margin, margin);
        ctx.lineTo(margin, h - margin);
        ctx.lineTo(w - margin, h - margin);
        ctx.stroke();

        // Draw Label
        ctx.fillStyle = "#E6E1E5"; // OnSurface
        ctx.textAlign = "center";
        ctx.font = "500 11px 'Google Sans', 'Roboto', sans-serif";
        ctx.fillText(this.label, w / 2, margin / 2 + 5);

        // Draw Data
        if (this.data.length < 2) return;

        ctx.beginPath();
        ctx.strokeStyle = "#A8C7FA"; // MD3 Primary (Blue Light)
        ctx.lineWidth = 2;

        const xStep = (w - 2 * margin) / (this.data.length - 1);
        const yScale = (h - 2 * margin) / this.maxData;

        for (let i = 0; i < this.data.length; i++) {
            const x = margin + i * xStep;
            const y = h - margin - this.data[i] * yScale;
            if (i === 0) ctx.moveTo(x, y);
            else ctx.lineTo(x, y);
        }
        ctx.stroke();
    }
}