[FEATURE]: Implement Graphical Visualizations for the Summary View

[usamazansari]

Feature Description

Implement these types of visualizations:

• [ ] Bar Plot

  • [ ] X Axis should be the dates

  • [ ] Y Axis should be either grouped or stacked bar plots of the expenditure

    • [ ] The group or stack should be differentiated by transactionType: 'income' | 'expense'

  • [ ] Make it configurable

    • [ ] The references in the X and the Y axes should be configurable
    • [ ] X and Y axes could be any parameter of the transaction list except the obvious ones
      • [ ] Transaction Categories
      • [ ] Transaction Type
      • [ ] Payment Mode

  • [ ] Make it interactive

    • [ ] The user should be able to select or deselect an item in the legend to toggle it's visibility in the graph
    • [ ] The user should be able to perform sorting of the data in the axes
    • [ ] When the user click on a data point it should redirect the user to the appropriate route of the transaction list
    • [ ] Use Animations when the user interacts
    • [ ] The plot should be responsive
• [ ] Pie Chart
• [ ] Heatmap
• [ ] Others

Rationale

This would give a better experience of the monetary insights

Use Case

Every pocketbook would need a view which would allow the user to see the insights of their monetary trends

Benefits

App will be much more usable and the users would get a glimpse of their monetary state without much hassle

Implementation Ideas

• Use d3 but only for calculations of the <svg> elements
• Make the color scheme of the graphs consistent with the primer colors
• Use Angular animations
  • Only simple animations like fade or translate
  • Avoid using scaling animations unless the animation on the element follows only one axis
• Research about the tooltips (if the existing ones can be used)

Checklist

• [X] I have reviewed existing features and confirmed that this is not a duplicate request.
• [X] This feature is aligned with the project's goals and objectives.
• [X] I am willing to provide additional information or collaborate on the implementation if needed.