Go to file
Anton Volnuhin 51a5d39c45 Reduce landscape side padding: 8px base (safe-area-inset handles the rest)
20px + safe-area was too much — the inset alone provides Dynamic Island
clearance, only need minimal base padding.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-07 23:43:12 +03:00
.dockerignore Add Docker support for home server deployment 2026-02-07 18:15:32 +03:00
altcats-2025-01.csv drill-down and animation restored 2025-03-22 00:49:27 +03:00
app.js Hide level 3 outside labels in compact donut mode 2026-02-07 23:33:24 +03:00
DEV.md Initial 2025-03-19 20:41:30 +03:00
docker-compose.yml Add Docker support for home server deployment 2026-02-07 18:15:32 +03:00
index.html Landscape phone layout: compact donut, PWA support, safe-area insets 2026-02-07 23:25:35 +03:00
manifest.json Landscape phone layout: compact donut, PWA support, safe-area insets 2026-02-07 23:25:35 +03:00
package.json Initial 2025-03-19 20:41:30 +03:00
README.md Initial 2025-03-19 20:41:30 +03:00
server.js Add Docker support for home server deployment 2026-02-07 18:15:32 +03:00
styles.css Reduce landscape side padding: 8px base (safe-area-inset handles the rest) 2026-02-07 23:43:12 +03:00

Visual Spending

A visualization tool for family spending data using Apache ECharts.

Features

  • Visualize spending per categories, subcategories, and microcategories as a sunburst graph
  • Display spending data for different months
  • Interactive visualization with hover details and click navigation

Usage

  1. Ensure you have Node.js installed on your system
  2. Place your spending data CSV files in the root directory with the naming convention altcats-YYYY-MM.csv
  3. Run the server:
npm start
  1. Open your browser and navigate to http://localhost:3000

Data Format

The CSV file should have the following columns:

  • transaction_date
  • category
  • subcategory
  • microcategory
  • amount_rub

Technologies Used

  • Apache ECharts
  • Node.js