anton/visual-spending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
38 Commits 1 Branch 0 Tags 735 KiB
JavaScript 86.1%
CSS 11.5%
HTML 2.4%
f6ae4aa3de
Go to file
Anton Volnuhin f6ae4aa3de Add mobile optimizations: smaller/bolder fonts, hide eye icon, center chart 
- Smaller font sizes on mobile (10px/9px vs 13px/11px on desktop)
- Bolder font weight on mobile (600) for better readability
- Hide chart eye icon on narrow/stacked layouts (≤850px)
- Center chart at 50% when layout is stacked (≤850px)
- Dynamic font size/weight updates on resize

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-01 16:12:20 +03:00
altcats-2025-01.csv drill-down and animation restored 2025-03-22 00:49:27 +03:00
app.js Add mobile optimizations: smaller/bolder fonts, hide eye icon, center chart 2026-02-01 16:12:20 +03:00
DEV.md Initial 2025-03-19 20:41:30 +03:00
index.html Fix center label positioning in responsive layout 2026-02-01 15:11:08 +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 mobile optimizations: smaller/bolder fonts, hide eye icon, center chart 2026-02-01 16:12:20 +03:00

README.md

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