What would be the best way to display this? (Firebase + Angular 7)

So I'm working on a budget app that has transactions and categories and each transaction is associated with a category and a month.

On the front page I want to display something like this (and be able to show the same thing for different months):

Category name: Groceries

Expected amount: 1000$

Real amount (sum of all transactions from that category): 1000$

enter image description here

My data looks something like this:

enter image description here enter image description here

I tried looping over each categories and then sum up the transactions associated with it, but that's not efficient. I think the best would be to aggregate the sum to the categories collection when adding a transaction and store it in a field like "totalAmount" but then how would I know which month is that totalAmount from? Do I need to rethink my data structure? I'm at a loss here... any help would be very appreciated! :)

Tags: