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

antigravitygemini · 33 steps · 47s · 7 filessession 80eb4a24-374@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 14 / 33
charts.jschange 1/1
/**
 * charts.js - HTML5 Canvas Custom Chart Renderer
 * Handles Spending-over-time trend line/area chart & Category donut chart
 */
 
(function (exports) {
  'use strict';
 
  /**
   * Helper to set up high-DPI crisp canvas
   */
  function setupCanvas(canvas) {
    if (!canvas) return null;
    const ctx = canvas.getContext('2d');
    const dpr = window.devicePixelRatio || 1;
    const rect = canvas.getBoundingClientRect();
    
    // Set actual display size
    const width = rect.width || canvas.width || 600;
    const height = rect.height || canvas.height || 260;
 
    canvas.width = width * dpr;
    canvas.height = height * dpr;
    ctx.scale(dpr, dpr);
 
    return { ctx, width, height };
  }
 
  /**
   * Render Spending Over Time Line/Area Chart on Canvas
   * @param {HTMLCanvasElement} canvas
   * @param {Array} trendData Array of { date, label, income, expense, net, cumulative }
   * @param {Object} options { isDark, hoveredIndex }
   */
  function renderSpendingChart(canvas, trendData, options = {}) {
    if (!canvas) return;
    const setup = setupCanvas(canvas);
    if (!setup) return;
 
    const { ctx, width, height } = setup;
    const isDark = options.isDark || false;
    const hoveredIdx = options.hoveredIndex !== undefined ? options.hoveredIndex : -1;
 
    // Theme color palette
    const colors = {
      grid: isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.06)',
      text: isDark ? '#94a3b8' : '#64748b',
      lineExpense: '#f43f5e',
      lineIncome: '#10b981',
      gradExpenseStart: isDark ? 'rgba(244, 63, 94, 0.35)' : 'rgba(244, 63, 94, 0.25)',
      gradExpenseEnd: isDark ? 'rgba(244, 63, 94, 0.0)' : 'rgba(244, 63, 94, 0.0)',
      gradIncomeStart: isDark ? 'rgba(16, 185, 129, 0.35)' : 'rgba(16, 185, 129, 0.25)',
      gradIncomeEnd: isDark ? 'rgba(16, 185, 129, 0.0)' : 'rgba(16, 185, 129, 0.0)',
      tooltipBg: isDark ? '#1e293b' : '#ffffff',
      tooltipText: isDark ? '#f8fafc' : '#0f172a',
      tooltipBorder: isDark ? '#334155' : '#e2e8f0'
    };
 
    // Clear canvas
    ctx.clearRect(0, 0, width, height);
 
    if (!trendData || trendData.length === 0) {
      ctx.fillStyle = colors.text;
      ctx.font = '500 14px sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('No transaction data available for chart', width / 2, height / 2);
      return;
    }
 
    // Canvas padding
    const paddingLeft = 55;
    const paddingRight = 20;
    const paddingTop = 30;
    const paddingBottom = 40;
 
    const plotWidth = width - paddingLeft - paddingRight;
    const plotHeight = height - paddingTop - paddingBottom;
 
    // Find max value for Y axis scaling
    const maxVal = Math.max(
      ...trendData.map(d => Math.max(d.expense, d.income)),
      100 // minimum scale cap
    );
 
    // Round up maxVal to clean tick interval
    const yTicks = 4;
    const tickInterval = Math.ceil(maxVal / yTicks / 50) * 50 || 50;
    const yMax = tickInterval * yTicks;
 
    // Draw Y grid lines and labels
    ctx.font = '500 11px sans-serif';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
 
    for (let i = 0; i <= yTicks; i++) {
      const val = (yMax / yTicks) * i;
      const y = paddingTop + plotHeight - (i / yTicks) * plotHeight;
 
      // Grid line
      ctx.beginPath();
      ctx.strokeStyle = colors.grid;
      ctx.lineWidth = 1;
      ctx.moveTo(paddingLeft, y);
      ctx.lineTo(width - paddingRight, y);
      ctx.stroke();
 
      // Label
      ctx.fillStyle = colors.text;
      ctx.fillText('$' + val.toLocaleString(), paddingLeft - 8, y);
    }
 
    // Map data points to canvas coordinates
    const points = trendData.map((d, idx) => {
      const x = paddingLeft + (idx / Math.max(trendData.length - 1, 1)) * plotWidth;
      const yExp = paddingTop + plotHeight - (d.expense / yMax) * plotHeight;
      const yInc = paddingTop + plotHeight - (d.income / yMax) * plotHeight;
      return { x, yExp, yInc, data: d };
    });
 
    // Helper for drawing area gradient and line
    function drawTrendLine(yKey, strokeColor, gradStart, gradEnd) {
      if (points.length < 1) return;
 
      // Area fill
      const grad = ctx.createLinearGradient(0, paddingTop, 0, paddingTop + plotHeight);
      grad.addColorStop(0, gradStart);
      grad.addColorStop(1, gradEnd);
 
      ctx.beginPath();
      ctx.moveTo(points[0].x, paddingTop + plotHeight);
      points.forEach(p => ctx.lineTo(p.x, p[yKey]));
      ctx.lineTo(points[points.length - 1].x, paddingTop + plotHeight);
      ctx.closePath();
      ctx.fillStyle = grad;
      ctx.fill();
 
      // Line
      ctx.beginPath();
      ctx.strokeStyle = strokeColor;
      ctx.lineWidth = 2.5;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
 
      points.forEach((p, idx) => {
        if (idx === 0) ctx.moveTo(p.x, p[yKey]);
        else ctx.lineTo(p.x, p[yKey]);
      });
      ctx.stroke();
    }
 
    // Draw Income (green line/fill)
    drawTrendLine('yInc', colors.lineIncome, colors.gradIncomeStart, colors.gradIncomeEnd);
    // Draw Expense (red line/fill)
    drawTrendLine('yExp', colors.lineExpense, colors.gradExpenseStart, colors.gradExpenseEnd);
 
    // Draw X Axis labels
    ctx.fillStyle = colors.text;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
 
    const step = Math.max(1, Math.floor(trendData.length / 6));
    points.forEach((p, idx) => {
      if (idx % step === 0 || idx === points.length - 1) {
        ctx.fillText(p.data.label, p.x, height - paddingBottom + 8);
      }
    });
 
    // Draw Points & Active Hovered Tooltip
    points.forEach((p, idx) => {
      const isHovered = idx === hoveredIdx;
 
      // Expense point dot
      if (p.data.expense > 0 || isHovered) {
        ctx.beginPath();
        ctx.arc(p.x, p.yExp, isHovered ? 6 : 3.5, 0, Math.PI * 2);
        ctx.fillStyle = colors.lineExpense;
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = isDark ? '#0f172a' : '#ffffff';
        ctx.stroke();
      }
 
      // Income point dot
      if (p.data.income > 0 || isHovered) {
        ctx.beginPath();
        ctx.arc(p.x, p.yInc, isHovered ? 6 : 3.5, 0, Math.PI * 2);
        ctx.fillStyle = colors.lineIncome;
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = isDark ? '#0f172a' : '#ffffff';
        ctx.stroke();
      }
 
      // Vertical guide line for hovered point
      if (isHovered) {
        ctx.beginPath();
        ctx.strokeStyle = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.2)';
        ctx.setLineDash([4, 4]);
        ctx.moveTo(p.x, paddingTop);
        ctx.lineTo(p.x, paddingTop + plotHeight);
        ctx.stroke();
        ctx.setLineDash([]);
      }
    });
 
    // Render Hover Tooltip Box if a point is hovered
    if (hoveredIdx >= 0 && hoveredIdx < points.length) {
      const hp = points[hoveredIdx];
      const d = hp.data;
 
      const title = d.label + ' (' + d.date + ')';
      const incText = 'Income: $' + d.income.toFixed(2);
      const expText = 'Expense: $' + d.expense.toFixed(2);
 
      ctx.font = '600 12px sans-serif';
      const w1 = ctx.measureText(title).width;
      ctx.font = '500 11px sans-serif';
      const w2 = ctx.measureText(incText).width;
      const w3 = ctx.measureText(expText).width;
 
      const tooltipW = Math.max(w1, w2, w3) + 24;
      const tooltipH = 68;
 
      let ttX = hp.x + 12;
      if (ttX + tooltipW > width - 10) ttX = hp.x - tooltipW - 12;
      let ttY = Math.min(hp.yExp, hp.yInc) - 40;
      if (ttY < 10) ttY = 10;
      if (ttY + tooltipH > height - 10) ttY = height - tooltipH - 10;
 
      // Tooltip Card Background
      ctx.fillStyle = colors.tooltipBg;
      ctx.shadowColor = 'rgba(0,0,0,0.15)';
      ctx.shadowBlur = 10;
      ctx.shadowOffsetY = 4;
      ctx.beginPath();
      ctx.roundRect ? ctx.roundRect(ttX, ttY, tooltipW, tooltipH, 8) : ctx.rect(ttX, ttY, tooltipW, tooltipH);
      ctx.fill();
      ctx.shadowColor = 'transparent';
 
      ctx.strokeStyle = colors.tooltipBorder;
      ctx.lineWidth = 1;
      ctx.stroke();
 
      // Tooltip Text
      ctx.textAlign = 'left';
      ctx.textBaseline = 'top';
 
      // Header
      ctx.fillStyle = colors.tooltipText;
      ctx.font = '600 12px sans-serif';
      ctx.fillText(title, ttX + 12, ttY + 8);
 
      // Income line
      ctx.font = '500 11px sans-serif';
      ctx.fillStyle = colors.lineIncome;
      ctx.fillText(incText, ttX + 12, ttY + 28);
 
      // Expense line
      ctx.fillStyle = colors.lineExpense;
      ctx.fillText(expText, ttX + 12, ttY + 46);
    }
  }
 
  /**
   * Render Category Spending Donut Chart on Canvas
   * @param {HTMLCanvasElement} canvas
   * @param {Array} categoryData Output from calculateCategorySpending
   * @param {Object} options { isDark, hoveredIndex }
   */
  function renderCategoryDonutChart(canvas, categoryData, options = {}) {
    if (!canvas) return;
    const setup = setupCanvas(canvas);
    if (!setup) return;
 
    const { ctx, width, height } = setup;
    const isDark = options.isDark || false;
    const hoveredIdx = options.hoveredIndex !== undefined ? options.hoveredIndex : -1;
 
    ctx.clearRect(0, 0, width, height);
 
    // Filter out categories with 0 spent
    const activeCats = (categoryData || []).filter(c => c.spent > 0);
    const totalSpent = activeCats.reduce((acc, c) => acc + c.spent, 0);
 
    if (activeCats.length === 0 || totalSpent === 0) {
      ctx.fillStyle = isDark ? '#94a3b8' : '#64748b';
      ctx.font = '500 14px sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('No expense data available for chart', width / 2, height / 2);
      return;
    }
 
    const centerX = width / 2;
    const centerY = height / 2;
    const outerRadius = Math.min(width, height) / 2 - 20;
    const innerRadius = outerRadius * 0.62;
 
    let startAngle = -Math.PI / 2;
 
    activeCats.forEach((cat, idx) => {
      const sliceAngle = (cat.spent / totalSpent) * (Math.PI * 2);
      const endAngle = startAngle + sliceAngle;
      const isHovered = idx === hoveredIdx;
 
      ctx.beginPath();
      ctx.arc(centerX, centerY, isHovered ? outerRadius + 6 : outerRadius, startAngle, endAngle);
      ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
      ctx.closePath();
 
      ctx.fillStyle = cat.color || '#6366f1';
      ctx.fill();
 
      ctx.lineWidth = 2;
      ctx.strokeStyle = isDark ? '#0f172a' : '#ffffff';
      ctx.stroke();
 
      startAngle = endAngle;
    });
 
    // Center text total
    ctx.fillStyle = isDark ? '#f8fafc' : '#0f172a';
    ctx.font = 'bold 16px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('$' + totalSpent.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }), centerX, centerY - 6);
 
    ctx.fillStyle = isDark ? '#94a3b8' : '#64748b';
    ctx.font = '500 11px sans-serif';
    ctx.fillText('Total Expenses', centerX, centerY + 14);
  }
 
  exports.renderSpendingChart = renderSpendingChart;
  exports.renderCategoryDonutChart = renderCategoryDonutChart;
 
})(typeof exports !== 'undefined' ? exports : (window.FinanceCharts = {}));
 
338 linesjs
Writes …/style.css
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#antigravity #css #gemini #graphics #html #javascript #quick
r5-agy
← all sessions