Expense Chart

[E-LeeSchaffer]

Value Proposition

As a user I want to generate a detailed expense chart by category In order to analyse my spending patterns.

Description

Acceptance Criteria

• Users can select a category for the chart view of all expenses.
• Categories in the chart are toggleable, allowing users to activate or deactivate specific categories.
• When a category is selected, it is visually highlighted to indicate it is active.
• An "X" button is displayed within the selected category, enabling users to reset or deselect their choice easily.
• The report includes a breakdown of:
• The chart illustrates all spending transactions by category over the whole time period.
• The chart updates in real-time as new transactions are added, edited, or deleted.
• The chart can be accessed through a button on the homepage.
• If no transactions exist for the selected category a message is displayed indicating that there is no data to show.
• The interface is intuitive, ensuring that new users can easily generate and understand their expenses.

  Tasks

• [ ] Create feature branch feature/expense-chart-by-category.
• [ ] Add a button on the homepage to access the expense chart view on a new page (report.js).
• [ ] Show each category separately in the chart.
• [ ] Add toggle functionality to activate or deactivate specific categories.
• [ ] Ensure selected categories are visually highlighted.
• [ ] Include an "X" button within the selected categories to allow resetting the selection.
• [ ] Implement the logic to load expenses by selected category.
• [ ] Use a chart library (e.g., Chart.js or D3) to visualise spending per category over the selected period.
• [ ] Add real-time updates to the chart when transactions are added, edited, or deleted, using a global state management.
• [ ] Implement logic to display a message if no data is available for the selected category.
• [ ] Ensure accessibility by adding clear labels and descriptions to the chart.