Go to file
Anton Volnuhin 9a0589d3f9 Add visual month navigator with mini donut chart previews
Replace dropdown selector with a visual navigator featuring:
- Left/right arrow buttons for month navigation
- Clickable month buttons with mini donut chart previews
- Russian month labels (e.g., "Январь'25")
- Responsive layout for mobile screens
- Arrows disable at navigation boundaries

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-29 14:05:30 +03:00
altcats-2025-01.csv drill-down and animation restored 2025-03-22 00:49:27 +03:00
app.js Add visual month navigator with mini donut chart previews 2026-01-29 14:05:30 +03:00
DEV.md Initial 2025-03-19 20:41:30 +03:00
index.html Add visual month navigator with mini donut chart previews 2026-01-29 14:05:30 +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 automatic months 2026-01-29 13:44:41 +03:00
styles.css Add visual month navigator with mini donut chart previews 2026-01-29 14:05:30 +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