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

pigpt-5.5 · 28 steps · 3m 21s · 6 filessession b31168a5-ff0@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 · 77 steps codex · 49 steps opencode · 44 steps pi · 28 steps antigravity · 28 steps

compare in arena

step 10 / 28

charts.jschange 1/1

/* Canvas chart helpers. */
(function (global) {
  'use strict';
 
  function cumulativeSeries(transactions) {
    let running = 0;
    return [...transactions]
      .sort((a, b) => a.date.localeCompare(b.date))
      .map(tx => ({ date: tx.date, value: Math.round((running += Number(tx.amount || 0)) * 100) / 100 }));
  }
 
  function scalePoints(series, width, height, padding) {
    const pad = padding == null ? 28 : padding;
    if (!series.length) return [];
    const values = series.map(p => p.value);
    const min = Math.min(...values, 0);
    const max = Math.max(...values, 0);
    const range = max - min || 1;
    return series.map((p, i) => ({
      ...p,
      x: pad + (series.length === 1 ? 0 : (i / (series.length - 1)) * (width - pad * 2)),
      y: height - pad - ((p.value - min) / range) * (height - pad * 2)
    }));
  }
 
  function drawSpendingChart(canvas, transactions, options) {
    if (!canvas || !canvas.getContext) return;
    const opts = options || {};
    const ctx = canvas.getContext('2d');
    const dpr = global.devicePixelRatio || 1;
    const rect = canvas.getBoundingClientRect();
    const width = Math.max(320, rect.width || canvas.clientWidth || 640);
    const height = Math.max(220, rect.height || canvas.clientHeight || 260);
    canvas.width = width * dpr;
    canvas.height = height * dpr;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    ctx.clearRect(0, 0, width, height);
 
    const dark = opts.dark;
    const fg = dark ? '#dbeafe' : '#172033';
    const muted = dark ? '#64748b' : '#94a3b8';
    const line = dark ? '#38bdf8' : '#2563eb';
    const fill = dark ? 'rgba(56, 189, 248, .16)' : 'rgba(37, 99, 235, .12)';
    const series = cumulativeSeries(transactions);
    const points = scalePoints(series, width, height, 34);
 
    ctx.strokeStyle = muted;
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(34, height - 34);
    ctx.lineTo(width - 16, height - 34);
    ctx.moveTo(34, 14);
    ctx.lineTo(34, height - 34);
    ctx.stroke();
 
    if (!points.length) {
      ctx.fillStyle = fg;
      ctx.font = '14px system-ui';
      ctx.fillText('No transactions to chart', 48, 64);
      return;
    }
 
    ctx.beginPath();
    points.forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y));
    ctx.strokeStyle = line;
    ctx.lineWidth = 3;
    ctx.stroke();
 
    ctx.lineTo(points[points.length - 1].x, height - 34);
    ctx.lineTo(points[0].x, height - 34);
    ctx.closePath();
    ctx.fillStyle = fill;
    ctx.fill();
 
    ctx.fillStyle = fg;
    ctx.font = '12px system-ui';
    ctx.fillText('Balance over time', 42, 28);
    ctx.fillText('$' + points[points.length - 1].value.toLocaleString(), width - 110, 28);
  }
 
  const api = { cumulativeSeries, scalePoints, drawSpendingChart };
  if (typeof module !== 'undefined' && module.exports) module.exports = api;
  global.FinanceCharts = api;
})(typeof window !== 'undefined' ? window : globalThis);
 

85 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 #ui

i2-r4-pi

← all sessions