Repository navigation
Refactor Graph page with Chart.js for current month daily spending #13
Description
Overview
Refactor the Graph page to use Chart.js library for better visualization. Replace the existing custom bar chart with a Chart.js implementation that shows current month daily spending with category-based visualization.
Requirements
Chart.js Integration
- Replace custom bar chart with Chart.js bar chart component
- Focus on current month data - show daily spending for the current month only
- Dynamic title showing current month and year (e.g., "June 2025")
- Category-based visualization - different colors for spending categories
- Interactive features - tooltips, hover effects, responsive design
Chart Features
- X-axis: Days of the current month (1-31 based on month)
- Y-axis: Spending amounts with proper currency formatting
- Categories: Visual distinction through colors/stacking for different spending categories
- Responsive design: Works seamlessly on mobile and desktop
- Empty state: Graceful handling when no data exists for the month
Technical Implementation
- Install Chart.js and Chart.js Vue adapter if not present
- Replace existing bar chart logic in Graph.vue
- Aggregate spending data by day within current month
- Group and color-code by categories
- Maintain existing category colors from chartColors array
- Keep existing segment controls but focus bar chart on current month
Data Processing
- Filter entries to current month only
- Group by date and category
- Calculate daily totals and category breakdowns
- Format currency amounts in tooltips and axes
- Handle edge cases (no data, partial month data)
Acceptance Criteria
- Chart.js library properly integrated
- Bar chart shows current month daily spending only
- Chart title dynamically shows current month/year
- Categories are visually distinguished with colors
- Chart is fully responsive
- Interactive tooltips show detailed information
- Empty state handled appropriately
- Existing segment controls remain functional
- Performance is maintained or improved
Technical Notes
- Keep existing pie chart (categories) functionality unchanged
- Maintain current color scheme from chartColors array
- Ensure chart updates when new spending entries are added
- Consider Chart.js plugins for enhanced functionality
Activity
laminko commentedon Jun 14, 2025
📋 Related to ion-tabs implementation
This issue is partially addressed in the
feat/ion-tabs-navigationbranch, which restructures the app layout but maintains the current 2-card statistics layout.Current State in Branch
Next Steps
This could be:
The infrastructure is ready for this change in the current implementation.
[-]Update statistics cards layout to 3 horizontal cards[/-][+]Refactor Graph page with Chart.js for current month daily spending[/+]feat: complete Graph page redesign with Apple-style dual charts and m…
feat: complete Graph page redesign with Apple-style dual charts and m…
feat: Add Settings page with authentication UI and improved components (
Release: Major authentication and user management features (#50)
Release v1.3.0: Facebook OAuth UI removal and version bump (#51)