f99bb963e4
- Move timeline legend from vertical top-right to horizontal bottom on portrait phones (<=850px + portrait) - Landscape phones and tablets use desktop layout (vertical legend on right) - CSS: cap chart-wrapper height with min(Xvw, calc(100dvh - 130px)) to prevent landscape overflow - CSS: timeline-mode fills viewport height in portrait for better space utilization - Rotate x-axis month labels to -90° on mobile for cleaner vertical display - Add debounced resize handler to re-render on orientation/breakpoint changes - Guard zrender click handler with y-bounds to prevent legend-zone false positives Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> |
||
|---|---|---|
| .dockerignore | ||
| altcats-2025-01.csv | ||
| app.js | ||
| DEV.md | ||
| docker-compose.yml | ||
| index.html | ||
| package.json | ||
| README.md | ||
| server.js | ||
| styles.css | ||
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
- Ensure you have Node.js installed on your system
- Place your spending data CSV files in the root directory with the naming convention
altcats-YYYY-MM.csv - Run the server:
npm start
- 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