Detail Budget Overview

[rachelrring]

At the moment when a budget is saved, the user is rerouted to a page that they can view a summary of their budget.

This summery should have the following section breakdowns:

• income
• houseHoldBills
• houseHoldUtilies
• livingCosts
• friendsandFamily
• pets
• insurance
• bankingandInvestments
• travelandLeisure
• otherExpenses

Each of these section should:

• at the top : total spent in this category
• barchart showing each expense
  • make sure to not include categories that have 0

This page should have a button at the end of the page to allow users to go edit their budget

This page should also have a button for the user to be routed to the data visualisations tab where they can view their personalised recommendations

[rachelrring]

I think it would be a good idea to create a new component specifically for the user-budget component to use.

this new component should take in:

• graphData: budgetData[]
  • budgetData is an interface
  • interface budgetData { key: string; value: number; }
• expense category name

onInit:

• create doughnut graph
• calculate total expenses for that budget
• percentage that this category takes up of the total expenses

This needs to be done using the @ Input decorator: https://angular.io/guide/inputs-outputs