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

claude-codeclaude-fable-5 · 77 steps · 13m 51s · 8 filessession a217294b-d60@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 18 / 77

charts.jschange 1/2

/*
 * charts.js — rendering only. Reads data shaped by data.js, draws the
 * canvas spending-over-time chart and the DOM budget meters.
 */
(function (root) {
  'use strict';
 
  var COLORS = {
    surface: '#1a1a19',
    grid: '#2c2c2a',
    baseline: '#383835',
    muted: '#898781',
    secondary: '#c3c2b7',
    primary: '#ffffff',
    series: '#3987e5',      // categorical slot 1, dark step
    seriesWash: 'rgba(57, 135, 229, 0.10)',
    warning: '#fab219',
    critical: '#d03b3b'
  };
 
  function setupCanvas(canvas) {
    var dpr = root.devicePixelRatio || 1;
    var rect = canvas.getBoundingClientRect();
    var w = Math.max(10, Math.round(rect.width));
    var h = Math.max(10, Math.round(rect.height));
    canvas.width = w * dpr;
    canvas.height = h * dpr;
    var ctx = canvas.getContext('2d');
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    return { ctx: ctx, w: w, h: h };
  }
 
  // Clean y-axis: step from the 1/2/5 ladder, ~4 divisions.
  function niceScale(maxValue) {
    if (maxValue <= 0) return { max: 100, step: 25 };
    var rough = maxValue / 4;
    var mag = Math.pow(10, Math.floor(Math.log(rough) / Math.LN10));
    var step = 10 * mag;
    var ladder = [1, 2, 2.5, 5, 10];
    for (var i = 0; i < ladder.length; i++) {
      if (ladder[i] * mag >= rough) { step = ladder[i] * mag; break; }
    }
    return { max: Math.ceil(maxValue / step) * step, step: step };
  }
 
  /*
   * Line chart of monthly spending. series: [{month, spent}], oldest first.
   * Draws once, then re-draws with a crosshair as the pointer moves.
   * tooltipEl is an HTML element repositioned near the hovered point.
   */
  function spendingChart(canvas, tooltipEl, series, opts) {
    opts = opts || {};
    var fmtShort = opts.formatShort || function (n) { return '$' + Math.round(n); };
    var fmtLong = opts.formatLong || fmtShort;
    var labelFor = opts.monthLabel || function (m) { return m; };
 
    var pad = { top: 16, right: 20, bottom: 28, left: 48 };
    var points = [];
    var geom = null;
 
    function draw(hoverIndex) {
      var s = setupCanvas(canvas);
      var ctx = s.ctx;
      var plotW = s.w - pad.left - pad.right;
      var plotH = s.h - pad.top - pad.bottom;
      var maxSpent = 0;
      series.forEach(function (d) { if (d.spent > maxSpent) maxSpent = d.spent; });
      var scale = niceScale(maxSpent);
 
      ctx.clearRect(0, 0, s.w, s.h);
      ctx.font = '11px system-ui, -apple-system, "Segoe UI", sans-serif';
 
      // gridlines + y ticks (hairline, solid, recessive)
      ctx.textAlign = 'right';
      ctx.textBaseline = 'middle';
      for (var v = 0; v <= scale.max; v += scale.step) {
        var y = pad.top + plotH - (v / scale.max) * plotH;
        ctx.strokeStyle = v === 0 ? COLORS.baseline : COLORS.grid;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(pad.left, Math.round(y) + 0.5);
        ctx.lineTo(pad.left + plotW, Math.round(y) + 0.5);
        ctx.stroke();
        ctx.fillStyle = COLORS.muted;
        ctx.fillText(fmtShort(v), pad.left - 8, y);
      }
 
      // x positions + labels
      points = series.map(function (d, i) {
        var x = series.length === 1
          ? pad.left + plotW / 2
          : pad.left + (i / (series.length - 1)) * plotW;
        var y = pad.top + plotH - (d.spent / scale.max) * plotH;
        return { x: x, y: y, d: d };
      });
      ctx.textAlign = 'center';
      ctx.textBaseline = 'top';
      var labelEvery = Math.ceil(series.length / Math.max(1, Math.floor(plotW / 56)));
      points.forEach(function (p, i) {
        if (i % labelEvery !== 0 && i !== points.length - 1) return;
        if (i !== points.length - 1 && points.length - 1 - i < labelEvery && labelEvery > 1) return;
        ctx.fillStyle = COLORS.muted;
        ctx.fillText(labelFor(p.d.month).split(' ')[0], p.x, pad.top + plotH + 8);
      });
 
      // area wash (~10% opacity) under the line
      if (points.length > 1) {
        ctx.beginPath();
        ctx.moveTo(points[0].x, pad.top + plotH);
        points.forEach(function (p) { ctx.lineTo(p.x, p.y); });
        ctx.lineTo(points[points.length - 1].x, pad.top + plotH);
        ctx.closePath();
        ctx.fillStyle = COLORS.seriesWash;
        ctx.fill();
      }
 
      // crosshair under the line
      if (hoverIndex != null && points[hoverIndex]) {
        var hp = points[hoverIndex];
        ctx.strokeStyle = COLORS.baseline;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(Math.round(hp.x) + 0.5, pad.top);
        ctx.lineTo(Math.round(hp.x) + 0.5, pad.top + plotH);
        ctx.stroke();
      }
 
      // the line: 2px, round joins
      if (points.length > 1) {
        ctx.beginPath();
        points.forEach(function (p, i) { i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y); });
        ctx.strokeStyle = COLORS.series;
        ctx.lineWidth = 2;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.stroke();
      }
 
      // end marker + hovered marker: >=8px dot with 2px surface ring
      function marker(p, r) {
        ctx.beginPath();
        ctx.arc(p.x, p.y, r + 2, 0, Math.PI * 2);
        ctx.fillStyle = COLORS.surface;
        ctx.fill();
        ctx.beginPath();
        ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
        ctx.fillStyle = COLORS.series;
        ctx.fill();
      }
      if (points.length) marker(points[points.length - 1], 4);
      if (hoverIndex != null && points[hoverIndex]) marker(points[hoverIndex], 5);
 
      // direct label on the endpoint only; the rest live in axis + tooltip
      if (points.length) {
        var last = points[points.length - 1];
        ctx.fillStyle = COLORS.secondary;
        ctx.textAlign = last.x > pad.left + plotW - 40 ? 'right' : 'left';
        ctx.textBaseline = 'bottom';
        ctx.fillText(fmtShort(last.d.spent), last.x + (ctx.textAlign === 'right' ? -8 : 8), last.y - 8);
      }
 
      geom = { padLeft: pad.left, plotW: plotW };
    }
 
    function nearestIndex(clientX) {
      if (!points.length) return null;
      var rect = canvas.getBoundingClientRect();
      var x = clientX - rect.left;
      var best = 0;
      var bestDist = Infinity;
      points.forEach(function (p, i) {
        var d = Math.abs(p.x - x);
        if (d < bestDist) { bestDist = d; best = i; }
      });
      return best;
    }
 
    function onMove(e) {
      var idx = nearestIndex(e.clientX);
      draw(idx);
      if (idx == null) return;
      var p = points[idx];
      tooltipEl.hidden = false;
      tooltipEl.innerHTML = '<span class="tt-title">' + labelFor(p.d.month) + '</span>' +
        '<span class="tt-row"><span class="tt-key"></span>Spent <b>' + fmtLong(p.d.spent) + '</b></span>' +
        '<span class="tt-row tt-dim">Income ' + fmtLong(p.d.income || 0) + '</span>';
      var rect = canvas.getBoundingClientRect();
      var host = canvas.parentElement.getBoundingClientRect();
      var left = rect.left - host.left + p.x + 12;
      if (p.x > rect.width * 0.62) left = rect.left - host.left + p.x - tooltipEl.offsetWidth - 12;
      tooltipEl.style.left = left + 'px';
      tooltipEl.style.top = (rect.top - host.top + Math.max(4, p.y - 40)) + 'px';
    }
 
    function onLeave() {
      tooltipEl.hidden = true;
      draw(null);
    }
 
    if (canvas._chartCleanup) canvas._chartCleanup();
    canvas.addEventListener('mousemove', onMove);
    canvas.addEventListener('mouseleave', onLeave);
    canvas._chartCleanup = function () {
      canvas.removeEventListener('mousemove', onMove);
      canvas.removeEventListener('mouseleave', onLeave);
    };
 
    draw(null);
    return { redraw: function () { draw(null); } };
  }
 
  /*
   * Budget meters: one row per category. The fill carries severity
   * (series blue -> warning -> critical); state is never color alone —
   * the text label and the over marker repeat it.
   */
  function renderBudgetBars(container, rows, opts) {
    opts = opts || {};
    var fmt = opts.formatMoney || function (n) { return '$' + n; };
    container.innerHTML = '';
    if (!rows.length) {
      var empty = document.createElement('p');
      empty.className = 'empty-note';
      empty.textContent = 'No budgets configured.';
      container.appendChild(empty);
      return;
    }
    rows.forEach(function (r) {
      var pct = Math.min(1, r.pct);
      var state = r.over ? 'over' : (r.pct >= 0.8 ? 'near' : 'ok');
      var row = document.createElement('div');
      row.className = 'budget-row budget-' + state;
      row.setAttribute('role', 'group');
      row.setAttribute('aria-label',
        r.category + ': ' + fmt(r.spent) + ' of ' + fmt(r.budget) + (r.over ? ', over budget' : ''));
 
      var head = document.createElement('div');
      head.className = 'budget-head';
      var name = document.createElement('span');
      name.className = 'budget-name';
      name.textContent = r.category;
      var val = document.createElement('span');
      val.className = 'budget-val';
      var pctText = Math.round(r.pct * 100) + '%';
      if (r.over) {
        val.innerHTML = '<span class="badge-over" title="Over budget">! over by ' +
          fmt(Math.round((r.spent - r.budget) * 100) / 100) + '</span> ' +
          '<b>' + fmt(r.spent) + '</b> / ' + fmt(r.budget);
      } else {
        val.innerHTML = '<span class="budget-pct">' + pctText + '</span> <b>' +
          fmt(r.spent) + '</b> / ' + fmt(r.budget);
      }
      head.appendChild(name);
      head.appendChild(val);
 
      var track = document.createElement('div');
      track.className = 'budget-track';
      var fill = document.createElement('div');
      fill.className = 'budget-fill';
      fill.style.width = (pct * 100).toFixed(1) + '%';
      track.appendChild(fill);
 
      row.appendChild(head);
      row.appendChild(track);
 
      row.title = r.category + ' — spent ' + fmt(r.spent) + ' of ' + fmt(r.budget) +
        (r.over ? ' (over by ' + fmt(r.spent - r.budget) + ')' : ' (' + fmt(r.remaining) + ' left)');
      if (opts.onEdit) {
        row.classList.add('budget-editable');
        row.addEventListener('click', function () { opts.onEdit(r); });
      }
      container.appendChild(row);
    });
  }
 
  root.Charts = {
    COLORS: COLORS,
    niceScale: niceScale,
    spendingChart: spendingChart,
    renderBudgetBars: renderBudgetBars
  };
})(typeof self !== 'undefined' ? self : this);
 

283 linesjs

Writes …/charts.js

Files at this step

drag the rail to scrub

Discussion

1 comment on this trajectory. Recorded by @patrick-toulme.

@patrick-toulme7/28/2026, 5:09:30 PM

Dogfood iteration 2 — first true 5-way head-to-head, uploaded after fixing the capture-scaffolding leak, the 4-session cap, and the live agent badges. All five harnesses, same prompt, exact captures. Safe to delete.

#claude #claude-code #claude-fable-5 #css #graphics #html #javascript #medium #skills #subagents #testing

i2-r1-claude

← all sessions