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

claude-codeclaude-fable-5 · 113 steps · 23m 10s · 8 filessession aaf47577-736@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 96 / 113

charts.jschange 2/2

/*
 * charts.js — canvas spending-over-time line chart.
 * Rendering follows the house mark specs: 2px round-joined line, ~10% area
 * wash, >=8px markers with a 2px surface ring, hairline solid gridlines,
 * selective direct label on the last point only, crosshair + tooltip on hover.
 * Pure math helpers (niceTicks, monthTickLabel) are exported for node tests;
 * drawSpendingChart no-ops safely when there is no canvas 2D context.
 */
(function (global, factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    global.FinanceCharts = factory();
  }
})(typeof self !== 'undefined' ? self : this, function () {
  'use strict';
 
  var MONTH_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
  // Round an axis up to clean money ticks: 1/2/2.5/5 × 10^k steps.
  function niceTicks(maxValue, targetCount) {
    targetCount = targetCount || 4;
    if (typeof maxValue !== 'number' || !isFinite(maxValue) || maxValue <= 0) {
      return { top: 100, step: 25, ticks: [0, 25, 50, 75, 100] };
    }
    var raw = maxValue / targetCount;
    var mag = Math.pow(10, Math.floor(Math.log10(raw)));
    var norm = raw / mag;
    var stepN = norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 2.5 ? 2.5 : norm <= 5 ? 5 : 10;
    var step = stepN * mag;
    var top = Math.ceil(maxValue / step - 1e-9) * step;
    // Snap away float dust (0.30000000000000004 etc.)
    top = Math.round(top * 1e6) / 1e6;
    step = Math.round(step * 1e6) / 1e6;
    var ticks = [];
    for (var v = 0; v <= top + step / 1e6; v += step) {
      ticks.push(Math.round(v * 1e6) / 1e6);
    }
    return { top: top, step: step, ticks: ticks };
  }
 
  // '2026-07' → 'Jul' (or "Jul '26" when the year matters).
  function monthTickLabel(key, withYear) {
    var m = parseInt(String(key).slice(5, 7), 10);
    var name = MONTH_NAMES[m - 1] || '?';
    return withYear ? name + ' ’' + String(key).slice(2, 4) : name;
  }
 
  var DEFAULT_COLORS = {
    line: '#3987e5',
    surface: '#1a1a19',
    grid: '#2c2c2a',
    axis: '#383835',
    text: '#ffffff',
    muted: '#898781'
  };
 
  var FONT = '11px system-ui, -apple-system, "Segoe UI", sans-serif';
  var LABEL_FONT = '600 12px system-ui, -apple-system, "Segoe UI", sans-serif';
 
  // data: [{ month: 'YYYY-MM', total: number }] in month order.
  // opts: { colors, hoverIndex, formatValue, formatTick }
  function drawSpendingChart(canvas, data, opts) {
    if (!canvas || typeof canvas.getContext !== 'function') { return null; }
    var ctx = canvas.getContext('2d');
    if (!ctx) { return null; }
    opts = opts || {};
    var colors = {};
    for (var k in DEFAULT_COLORS) {
      colors[k] = (opts.colors && opts.colors[k]) || DEFAULT_COLORS[k];
    }
    var formatValue = opts.formatValue || function (v) { return String(v); };
    var formatTick = opts.formatTick || formatValue;
    var hoverIndex = typeof opts.hoverIndex === 'number' ? opts.hoverIndex : null;
 
    var dpr = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
    var cssW = canvas.clientWidth || canvas.width || 600;
    var cssH = canvas.clientHeight || canvas.height || 280;
    var pxW = Math.max(1, Math.round(cssW * dpr));
    var pxH = Math.max(1, Math.round(cssH * dpr));
    if (canvas.width !== pxW || canvas.height !== pxH) {
      canvas.width = pxW;
      canvas.height = pxH;
    }
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    ctx.clearRect(0, 0, cssW, cssH);
 
    if (!data || !data.length) {
      ctx.font = FONT;
      ctx.fillStyle = colors.muted;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('No transactions in this range', cssW / 2, cssH / 2);
      canvas.__chart = { points: [] };
      canvas.__redraw = null; // drop any stale closure from a previous draw
      return { points: [] };
    }
 
    var n = data.length;
    var maxVal = 0;
    for (var i = 0; i < n; i++) {
      if (data[i].total > maxVal) { maxVal = data[i].total; }
    }
    var axis = niceTicks(maxVal, 4);
 
    ctx.font = FONT;
    var tickLabels = axis.ticks.map(formatTick);
    var tickW = 0;
    tickLabels.forEach(function (t) {
      var w = ctx.measureText(t).width;
      if (w > tickW) { tickW = w; }
    });
    var padL = Math.ceil(tickW) + 14;
    var padR = 20;
    var padT = 26;
    var padB = 26;
    var plotW = Math.max(10, cssW - padL - padR);
    var plotH = Math.max(10, cssH - padT - padB);
 
    function x(i) {
      return n === 1 ? padL + plotW / 2 : padL + (i * plotW) / (n - 1);
    }
    function y(v) {
      return padT + plotH * (1 - v / axis.top);
    }
 
    // Gridlines: hairline, solid, recessive; baseline slightly stronger.
    axis.ticks.forEach(function (tv, ti) {
      var yy = Math.round(y(tv)) + 0.5;
      ctx.strokeStyle = tv === 0 ? colors.axis : colors.grid;
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(padL, yy);
      ctx.lineTo(cssW - padR, yy);
      ctx.stroke();
      ctx.fillStyle = colors.muted;
      ctx.textAlign = 'right';
      ctx.textBaseline = 'middle';
      ctx.fillText(tickLabels[ti], padL - 8, yy);
    });
 
    // X labels: thinned so they never collide; anchored to the last month.
    var step = Math.max(1, Math.ceil(n / 7));
    var firstShown = null;
    for (var s = 0; s < n; s++) {
      if ((n - 1 - s) % step === 0) { firstShown = s; break; }
    }
    ctx.textAlign = 'center';
    ctx.textBaseline = 'alphabetic';
    ctx.fillStyle = colors.muted;
    for (var xi = 0; xi < n; xi++) {
      if ((n - 1 - xi) % step !== 0) { continue; }
      var withYear = xi === firstShown || data[xi].month.slice(5, 7) === '01';
      ctx.fillText(monthTickLabel(data[xi].month, withYear), x(xi), cssH - 8);
    }
 
    // Crosshair under the data marks.
    if (hoverIndex !== null && hoverIndex >= 0 && hoverIndex < n) {
      var hx = Math.round(x(hoverIndex)) + 0.5;
      ctx.strokeStyle = colors.axis;
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(hx, padT);
      ctx.lineTo(hx, padT + plotH);
      ctx.stroke();
    }
 
    // Area wash (~10% of the series hue).
    if (n >= 2) {
      ctx.beginPath();
      ctx.moveTo(x(0), y(data[0].total));
      for (var ai = 1; ai < n; ai++) {
        ctx.lineTo(x(ai), y(data[ai].total));
      }
      ctx.lineTo(x(n - 1), y(0));
      ctx.lineTo(x(0), y(0));
      ctx.closePath();
      ctx.globalAlpha = 0.1;
      ctx.fillStyle = colors.line;
      ctx.fill();
      ctx.globalAlpha = 1;
    }
 
    // The line: 2px, round joins and caps.
    if (n >= 2) {
      ctx.beginPath();
      ctx.moveTo(x(0), y(data[0].total));
      for (var li = 1; li < n; li++) {
        ctx.lineTo(x(li), y(data[li].total));
      }
      ctx.strokeStyle = colors.line;
      ctx.lineWidth = 2;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.stroke();
    }
 
    // Markers: 8px dot with a 2px surface ring so they read over the line.
    if (n <= 24) {
      for (var mi = 0; mi < n; mi++) {
        var mx = x(mi);
        var my = y(data[mi].total);
        ctx.beginPath();
        ctx.arc(mx, my, 6, 0, Math.PI * 2);
        ctx.fillStyle = colors.surface;
        ctx.fill();
        ctx.beginPath();
        ctx.arc(mx, my, 4, 0, Math.PI * 2);
        ctx.fillStyle = colors.line;
        ctx.fill();
      }
    }
 
    // One selective direct label: the latest value.
    var last = data[n - 1];
    ctx.font = LABEL_FONT;
    var labelText = formatValue(last.total);
    var lw = ctx.measureText(labelText).width;
    var lx = x(n - 1) + 8;
    if (lx + lw > cssW - 4) { lx = x(n - 1) - lw - 8; }
    var ly = y(last.total) - 12;
    if (ly < 12) { ly = y(last.total) + 20; }
    ctx.textAlign = 'left';
    ctx.textBaseline = 'alphabetic';
    ctx.fillStyle = colors.text;
    ctx.fillText(labelText, lx, ly);
 
    var layout = {
      points: data.map(function (d, pi) {
        return { x: x(pi), y: y(d.total), month: d.month, total: d.total };
      }),
      padL: padL,
      padR: padR,
      padT: padT,
      plotH: plotH,
      cssW: cssW,
      cssH: cssH
    };
    canvas.__chart = layout;
    canvas.__redraw = function (hi) {
      var nextOpts = {};
      for (var ok in opts) { nextOpts[ok] = opts[ok]; }
      nextOpts.hoverIndex = hi;
      drawSpendingChart(canvas, data, nextOpts);
    };
    return layout;
  }
 
  // Crosshair + tooltip hover layer. Bind once per canvas; the tooltip is an
  // absolutely-positioned element inside the chart wrapper.
  function attachHover(canvas, tooltip, formatters) {
    if (!canvas || canvas.__hoverBound || typeof canvas.addEventListener !== 'function') { return; }
    canvas.__hoverBound = true;
    formatters = formatters || {};
    var labelFor = formatters.label || function (m) { return m; };
    var valueFor = formatters.value || function (v) { return String(v); };
    var activeIndex = null;
 
    function hide() {
      if (tooltip) { tooltip.hidden = true; }
      if (activeIndex !== null) {
        activeIndex = null;
        if (canvas.__redraw) { canvas.__redraw(null); }
      }
    }
 
    canvas.addEventListener('pointermove', function (e) {
      var chart = canvas.__chart;
      if (!chart || !chart.points || !chart.points.length) { hide(); return; }
      var rect = canvas.getBoundingClientRect();
      var mx = e.clientX - rect.left;
      if (mx < chart.padL - 12 || mx > chart.cssW - chart.padR + 12) { hide(); return; }
      var best = 0;
      var bestDist = Infinity;
      chart.points.forEach(function (p, i) {
        var d = Math.abs(p.x - mx);
        if (d < bestDist) { bestDist = d; best = i; }
      });
      if (best !== activeIndex) {
        activeIndex = best;
        if (canvas.__redraw) { canvas.__redraw(best); }
      }
      if (!tooltip) { return; }
      var p = chart.points[best];
      tooltip.innerHTML = '<span class="tt-label"></span><span class="tt-value"></span>';
      tooltip.firstChild.textContent = labelFor(p.month);
      tooltip.lastChild.textContent = valueFor(p.total);
      tooltip.hidden = false;
      var ttW = tooltip.offsetWidth;
      var ttH = tooltip.offsetHeight;
      var left = p.x + 12;
      if (left + ttW > chart.cssW - 4) { left = p.x - ttW - 12; }
      var top = p.y - ttH - 10;
      if (top < 4) { top = p.y + 14; }
      tooltip.style.left = Math.round(left) + 'px';
      tooltip.style.top = Math.round(top) + 'px';
    });
 
    canvas.addEventListener('pointerleave', hide);
  }
 
  return {
    niceTicks: niceTicks,
    monthTickLabel: monthTickLabel,
    drawSpendingChart: drawSpendingChart,
    attachHover: attachHover
  };
});
 

309 linesjs

Edits …/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:35:41 AM

Dogfood artifact — this 4-way comparison was recorded, exported, and uploaded entirely through the agentsage pipeline as part of full-coverage testing. Safe to delete.

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

r1-claude

← all sessions