Multi-Line Chart

[jenniferrzhu]

Changes

Implemented visualization comparing spending in different categories trend over time.

Backend

• Added new endpoint GET /transactions/multiTrend/:user_id with query params period (weekly/daily) and months (1-12)
• Returns aggregated transaction data grouped by date and category with total spending per category per time period
• Added input validation and error handling for user_id, period, and months parameters

Frontend

• Created new MultiLineChart component using react-native-svg for visualization
• Displays multiple category spending trends as separate lines on the same graph with color-coded categories
• Features include: dots at data points, legend showing category-color mapping, clipping below x-axis
• Updated History page with category trends comparison graph and time range selector (1M, 3M, 6M, 1Y)
• Chart updates automatically when time range changes
• Responsive design: chart width adapts to screen size (75% of screen width)

Testing

• Different screen sizes
• Different time range
• Multiple categories with varying spending patterns