Build a personal finance dashboard as a static web app in this directory: index.html, s…

pigpt-5.5 · 22 steps · 2m 52s · 6 filessession 0fc0b110-d05@patrick-toulme

Build a personal finance dashboard as a static web app in this directory: index.html, style.css, app.js, data.js, charts.js. Transactions table with add/edit/delete + localStorage, monthly budget bars, a canvas spending-over-time chart, category filters, CSV import/export, dark theme, keyboard shortcuts, and a self-test page (tests.html) that exercises the core logic. Run your tests with a headless check (node) and fix what fails.

same matchclaude-code · 113 steps codex · 56 steps pi · 22 steps antigravity · 33 steps

compare in arena

step 10 / 22

charts.jschange 1/1

/* Lightweight canvas charts for the finance dashboard. */
(function (root) {
  function money(n) { return '$' + Math.round(n).toLocaleString(); }
 
  function drawSpendingChart(canvas, points, dark) {
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const dpr = window.devicePixelRatio || 1;
    const rect = canvas.getBoundingClientRect();
    canvas.width = Math.max(320, rect.width) * dpr;
    canvas.height = 260 * dpr;
    ctx.scale(dpr, dpr);
    const w = canvas.width / dpr, h = canvas.height / dpr;
    const pad = 42;
    ctx.clearRect(0, 0, w, h);
    ctx.fillStyle = dark ? '#0f172a' : '#ffffff';
    ctx.fillRect(0, 0, w, h);
    ctx.strokeStyle = dark ? '#334155' : '#dbe3ef';
    ctx.lineWidth = 1;
    for (let i = 0; i < 5; i++) {
      const y = pad + (h - pad * 1.6) * (i / 4);
      ctx.beginPath(); ctx.moveTo(pad, y); ctx.lineTo(w - 16, y); ctx.stroke();
    }
    ctx.fillStyle = dark ? '#cbd5e1' : '#475569';
    ctx.font = '12px system-ui, sans-serif';
    if (!points.length) {
      ctx.fillText('No spending data yet', pad, h / 2);
      return;
    }
    const max = Math.max(...points.map(p => p.amount), 10);
    const xFor = i => pad + (points.length === 1 ? 0 : i * (w - pad - 24) / (points.length - 1));
    const yFor = v => h - pad - (v / max) * (h - pad * 1.8);
    ctx.strokeStyle = '#6366f1';
    ctx.lineWidth = 3;
    ctx.beginPath();
    points.forEach((p, i) => { const x = xFor(i), y = yFor(p.amount); i ? ctx.lineTo(x, y) : ctx.moveTo(x, y); });
    ctx.stroke();
    ctx.fillStyle = '#22c55e';
    points.forEach((p, i) => { ctx.beginPath(); ctx.arc(xFor(i), yFor(p.amount), 4, 0, Math.PI * 2); ctx.fill(); });
    ctx.fillStyle = dark ? '#e2e8f0' : '#1e293b';
    ctx.fillText(money(max), 6, yFor(max) + 4);
    ctx.fillText('$0', 14, h - pad + 4);
    ctx.fillText(points[0].date.slice(5), pad, h - 12);
    ctx.fillText(points[points.length - 1].date.slice(5), w - 58, h - 12);
  }
 
  root.FinanceCharts = { drawSpendingChart };
})(typeof globalThis !== 'undefined' ? globalThis : this);
 

49 linesjs

Writes index.html

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.

#css #gpt #gpt-5.5 #graphics #html #javascript #pi #quick #testing #ui

r4-pi

← all sessions