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

antigravitygemini · 28 steps · 48s · 7 filessession e9822963-894@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 11 / 28
charts.jschange 1/1
/**
 * Personal Finance Dashboard - HTML5 Canvas Chart Renderer
 */
 
(function (root, factory) {
  if (typeof exports === 'object' && typeof module !== 'undefined') {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
  } else {
    root.FinanceCharts = factory();
  }
})(typeof self !== 'undefined' ? self : this, function () {
  'use strict';
 
  class SpendingChart {
    constructor(canvasElement, options = {}) {
      this.canvas = canvasElement;
      this.ctx = canvasElement ? canvasElement.getContext('2d') : null;
      this.options = Object.assign({
        isDark: true,
        showIncome: true,
        showExpense: true,
        padding: { top: 30, right: 30, bottom: 40, left: 60 },
        incomeColor: '#10b981',   // Emerald
        expenseColor: '#f43f5e',  // Rose
        accentColor: '#6366f1',   // Indigo
        gridColorDark: '#334155',
        gridColorLight: '#e2e8f0',
        textColorDark: '#94a3b8',
        textColorLight: '#64748b'
      }, options);
 
      this.data = { labels: [], incomeValues: [], expenseValues: [] };
      this.hoverIndex = -1;
      this._mousePos = null;
 
      if (this.canvas) {
        this.initListeners();
      }
    }
 
    initListeners() {
      this.handleMouseMove = this.handleMouseMove.bind(this);
      this.handleMouseLeave = this.handleMouseLeave.bind(this);
 
      this.canvas.addEventListener('mousemove', this.handleMouseMove);
      this.canvas.addEventListener('mouseleave', this.handleMouseLeave);
    }
 
    destroy() {
      if (this.canvas) {
        this.canvas.removeEventListener('mousemove', this.handleMouseMove);
        this.canvas.removeEventListener('mouseleave', this.handleMouseLeave);
      }
    }
 
    handleMouseMove(e) {
      const rect = this.canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      this._mousePos = { x, y };
 
      if (!this.data.labels || this.data.labels.length === 0) return;
 
      const { padding } = this.options;
      const displayWidth = this.canvas.width / (window.devicePixelRatio || 1);
      const graphWidth = displayWidth - padding.left - padding.right;
 
      const step = graphWidth / Math.max(1, this.data.labels.length - 1);
      let closestIdx = Math.round((x - padding.left) / step);
      closestIdx = Math.max(0, Math.min(this.data.labels.length - 1, closestIdx));
 
      if (this.hoverIndex !== closestIdx) {
        this.hoverIndex = closestIdx;
        this.render();
      }
    }
 
    handleMouseLeave() {
      this._mousePos = null;
      if (this.hoverIndex !== -1) {
        this.hoverIndex = -1;
        this.render();
      }
    }
 
    setData(chartData) {
      this.data = chartData || { labels: [], incomeValues: [], expenseValues: [] };
      this.render();
    }
 
    setTheme(isDark) {
      this.options.isDark = isDark;
      this.render();
    }
 
    setupCanvasScaling() {
      if (!this.canvas || !this.ctx) return;
      const dpr = window.devicePixelRatio || 1;
      const rect = this.canvas.parentElement ? this.canvas.parentElement.getBoundingClientRect() : this.canvas.getBoundingClientRect();
      const width = rect.width || 600;
      const height = rect.height || 320;
 
      this.canvas.width = width * dpr;
      this.canvas.height = height * dpr;
      this.canvas.style.width = width + 'px';
      this.canvas.style.height = height + 'px';
 
      this.ctx.resetTransform ? this.ctx.resetTransform() : this.ctx.setTransform(1, 0, 0, 1, 0, 0);
      this.ctx.scale(dpr, dpr);
 
      return { width, height };
    }
 
    render() {
      if (!this.canvas || !this.ctx) return;
      const dims = this.setupCanvasScaling();
      if (!dims) return;
 
      const { width, height } = dims;
      const { padding, isDark, incomeColor, expenseColor, gridColorDark, gridColorLight, textColorDark, textColorLight } = this.options;
      const ctx = this.ctx;
 
      // Clear canvas
      ctx.clearRect(0, 0, width, height);
 
      const labels = this.data.labels || [];
      const incVals = this.data.incomeValues || [];
      const expVals = this.data.expenseValues || [];
 
      if (labels.length === 0) {
        ctx.fillStyle = isDark ? textColorDark : textColorLight;
        ctx.font = '14px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('No transaction data for chart visualization', width / 2, height / 2);
        return;
      }
 
      // Compute Y bounds
      let maxVal = 0;
      labels.forEach((_, i) => {
        if (this.options.showIncome) maxVal = Math.max(maxVal, incVals[i] || 0);
        if (this.options.showExpense) maxVal = Math.max(maxVal, expVals[i] || 0);
      });
      if (maxVal === 0) maxVal = 100;
      maxVal = Math.ceil(maxVal * 1.15); // headroom
 
      const graphWidth = width - padding.left - padding.right;
      const graphHeight = height - padding.top - padding.bottom;
 
      // Grid Lines & Y Labels
      const gridColor = isDark ? gridColorDark : gridColorLight;
      const textColor = isDark ? textColorDark : textColorLight;
      const yTicks = 4;
 
      ctx.strokeStyle = gridColor;
      ctx.lineWidth = 1;
      ctx.fillStyle = textColor;
      ctx.font = '11px sans-serif';
      ctx.textAlign = 'right';
      ctx.textBaseline = 'middle';
 
      for (let i = 0; i <= yTicks; i++) {
        const val = (maxVal / yTicks) * i;
        const y = height - padding.bottom - (i / yTicks) * graphHeight;
 
        ctx.beginPath();
        ctx.moveTo(padding.left, y);
        ctx.lineTo(width - padding.right, y);
        ctx.stroke();
 
        ctx.fillText('$' + Math.round(val).toLocaleString(), padding.left - 8, y);
      }
 
      // X Axis Labels
      ctx.textAlign = 'center';
      ctx.textBaseline = 'top';
      const labelStep = Math.max(1, Math.ceil(labels.length / 8));
 
      labels.forEach((lbl, i) => {
        if (i % labelStep === 0 || i === labels.length - 1) {
          const x = padding.left + (i / Math.max(1, labels.length - 1)) * graphWidth;
          // Format short date (e.g. MM-DD)
          const displayLabel = lbl.length > 5 ? lbl.substring(5) : lbl;
          ctx.fillText(displayLabel, x, height - padding.bottom + 10);
        }
      });
 
      // Helper function to plot line and gradient fill
      const drawLineSeries = (values, color, strokeWidth = 2.5) => {
        if (values.length === 0) return;
 
        const points = values.map((val, i) => {
          const x = padding.left + (i / Math.max(1, labels.length - 1)) * graphWidth;
          const y = height - padding.bottom - (val / maxVal) * graphHeight;
          return { x, y, val };
        });
 
        // Area Gradient Fill
        const gradient = ctx.createLinearGradient(0, padding.top, 0, height - padding.bottom);
        gradient.addColorStop(0, color + '33'); // 20% opacity hex
        gradient.addColorStop(1, color + '00'); // 0% opacity hex
 
        ctx.beginPath();
        ctx.moveTo(points[0].x, height - padding.bottom);
        points.forEach(p => ctx.lineTo(p.x, p.y));
        ctx.lineTo(points[points.length - 1].x, height - padding.bottom);
        ctx.closePath();
        ctx.fillStyle = gradient;
        ctx.fill();
 
        // Stroke Line
        ctx.beginPath();
        ctx.moveTo(points[0].x, points[0].y);
        for (let i = 1; i < points.length; i++) {
          ctx.lineTo(points[i].x, points[i].y);
        }
        ctx.strokeStyle = color;
        ctx.lineWidth = strokeWidth;
        ctx.stroke();
 
        // Data Points
        points.forEach((p, idx) => {
          ctx.beginPath();
          ctx.arc(p.x, p.y, idx === this.hoverIndex ? 6 : 3.5, 0, Math.PI * 2);
          ctx.fillStyle = isDark ? '#0f172a' : '#ffffff';
          ctx.fill();
          ctx.strokeStyle = color;
          ctx.lineWidth = 2;
          ctx.stroke();
        });
 
        return points;
      };
 
      let incPoints = null;
      let expPoints = null;
 
      if (this.options.showIncome) {
        incPoints = drawLineSeries(incVals, incomeColor);
      }
 
      if (this.options.showExpense) {
        expPoints = drawLineSeries(expVals, expenseColor);
      }
 
      // Hover Crosshair & Tooltip Box
      if (this.hoverIndex >= 0 && this.hoverIndex < labels.length) {
        const idx = this.hoverIndex;
        const x = padding.left + (idx / Math.max(1, labels.length - 1)) * graphWidth;
 
        // Vertical Guide Line
        ctx.beginPath();
        ctx.setLineDash([4, 4]);
        ctx.moveTo(x, padding.top);
        ctx.lineTo(x, height - padding.bottom);
        ctx.strokeStyle = isDark ? '#64748b' : '#94a3b8';
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.setLineDash([]);
 
        // Tooltip Info
        const dateStr = labels[idx];
        const incVal = incVals[idx] || 0;
        const expVal = expVals[idx] || 0;
 
        const ttLines = [
          `Date: ${dateStr}`,
          this.options.showIncome ? `Income: +$${incVal.toFixed(2)}` : null,
          this.options.showExpense ? `Expense: -$${expVal.toFixed(2)}` : null
        ].filter(Boolean);
 
        ctx.font = '12px sans-serif';
        const ttWidth = 140;
        const ttHeight = ttLines.length * 18 + 12;
 
        let ttX = x + 12;
        if (ttX + ttWidth > width - padding.right) {
          ttX = x - ttWidth - 12;
        }
        const ttY = padding.top + 10;
 
        // Tooltip Card Background
        ctx.fillStyle = isDark ? 'rgba(15, 23, 42, 0.92)' : 'rgba(255, 255, 255, 0.95)';
        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 4;
        
        ctx.beginPath();
        ctx.roundRect ? ctx.roundRect(ttX, ttY, ttWidth, ttHeight, 6) : ctx.rect(ttX, ttY, ttWidth, ttHeight);
        ctx.fill();
 
        ctx.shadowColor = 'transparent';
        ctx.strokeStyle = isDark ? '#334155' : '#cbd5e1';
        ctx.lineWidth = 1;
        ctx.stroke();
 
        // Tooltip Text Lines
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';
 
        ttLines.forEach((line, i) => {
          if (line.startsWith('Income:')) {
            ctx.fillStyle = incomeColor;
          } else if (line.startsWith('Expense:')) {
            ctx.fillStyle = expenseColor;
          } else {
            ctx.fillStyle = isDark ? '#f8fafc' : '#0f172a';
          }
          ctx.fillText(line, ttX + 10, ttY + 8 + i * 18);
        });
      }
    }
  }
 
  // Category Donut Chart
  class CategoryDonutChart {
    constructor(canvasElement, options = {}) {
      this.canvas = canvasElement;
      this.ctx = canvasElement ? canvasElement.getContext('2d') : null;
      this.options = Object.assign({
        isDark: true,
        colors: [
          '#6366f1', '#10b981', '#f59e0b', '#f43f5e', '#8b5cf6',
          '#06b6d4', '#ec4899', '#14b8a6', '#f97316', '#64748b'
        ]
      }, options);
      this.data = {}; // { 'Food': 300, 'Housing': 1200 }
    }
 
    setData(categoryData) {
      this.data = categoryData || {};
      this.render();
    }
 
    setTheme(isDark) {
      this.options.isDark = isDark;
      this.render();
    }
 
    render() {
      if (!this.canvas || !this.ctx) return;
      const dpr = window.devicePixelRatio || 1;
      const rect = this.canvas.parentElement ? this.canvas.parentElement.getBoundingClientRect() : this.canvas.getBoundingClientRect();
      const width = rect.width || 300;
      const height = rect.height || 260;
 
      this.canvas.width = width * dpr;
      this.canvas.height = height * dpr;
      this.canvas.style.width = width + 'px';
      this.canvas.style.height = height + 'px';
 
      const ctx = this.ctx;
      ctx.resetTransform ? ctx.resetTransform() : ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.scale(dpr, dpr);
 
      ctx.clearRect(0, 0, width, height);
 
      const entries = Object.entries(this.data).filter(([_, val]) => val > 0);
      const total = entries.reduce((sum, [_, val]) => sum + val, 0);
 
      if (total === 0) {
        ctx.fillStyle = this.options.isDark ? '#94a3b8' : '#64748b';
        ctx.font = '13px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('No expenses to display', width / 2, height / 2);
        return;
      }
 
      const centerX = width / 2;
      const centerY = height / 2;
      const radius = Math.min(width, height) / 2 - 20;
      const innerRadius = radius * 0.62;
 
      let startAngle = -Math.PI / 2;
 
      entries.forEach(([cat, val], idx) => {
        const sliceAngle = (val / total) * Math.PI * 2;
        const color = this.options.colors[idx % this.options.colors.length];
 
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
        ctx.arc(centerX, centerY, innerRadius, startAngle + sliceAngle, startAngle, true);
        ctx.closePath();
 
        ctx.fillStyle = color;
        ctx.fill();
 
        startAngle += sliceAngle;
      });
 
      // Donut Center Text
      ctx.fillStyle = this.options.isDark ? '#f8fafc' : '#0f172a';
      ctx.font = 'bold 16px sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('$' + Math.round(total).toLocaleString(), centerX, centerY - 6);
 
      ctx.fillStyle = this.options.isDark ? '#94a3b8' : '#64748b';
      ctx.font = '11px sans-serif';
      ctx.fillText('Total Spent', centerX, centerY + 14);
    }
  }
 
  return {
    SpendingChart,
    CategoryDonutChart
  };
});
 
412 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
i2-r5-agy
← all sessions