From 4efba3424d12253962cf08af9e7fddf8e88875d0 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Tue, 24 Dec 2024 11:58:23 -0300
Subject: [PATCH] feat(yearly:account): add percentage bar

---
 app/apps/yearly_overview/views.py             |  9 ++++-
 .../fragments/account_data.html               | 33 +++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/app/apps/yearly_overview/views.py b/app/apps/yearly_overview/views.py
index 2a60052..5a09352 100644
--- a/app/apps/yearly_overview/views.py
+++ b/app/apps/yearly_overview/views.py
@@ -12,6 +12,7 @@ from apps.transactions.models import Transaction
 from apps.transactions.utils.calculations import (
     calculate_account_totals,
     calculate_currency_totals,
+    calculate_percentage_distribution,
 )
 
 
@@ -156,9 +157,15 @@ def yearly_overview_by_account(request, year: int):
     )
 
     data = calculate_account_totals(transactions)
+    percentages = calculate_percentage_distribution(data)
 
     return render(
         request,
         "yearly_overview/fragments/account_data.html",
-        context={"year": year, "totals": data, "single": True if account else False},
+        context={
+            "year": year,
+            "totals": data,
+            "percentages": percentages,
+            "single": True if account else False,
+        },
     )
diff --git a/app/templates/yearly_overview/fragments/account_data.html b/app/templates/yearly_overview/fragments/account_data.html
index 107fef2..6ebc46b 100644
--- a/app/templates/yearly_overview/fragments/account_data.html
+++ b/app/templates/yearly_overview/fragments/account_data.html
@@ -1,3 +1,4 @@
+{% load tools %}
 {% load i18n %}
 <div class="row row-cols-1 g-4 mb-3">
     <div class="col">
@@ -173,6 +174,38 @@
             </div>
           {% endif %}
         </div>
+        {% with p=percentages|get_dict_item:account_id %}
+        <div class="progress-stacked mt-3">
+          <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Income' %} ({{ p.percentages.income_projected|floatformat:2 }}%)" aria-valuenow="{{ p.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ p.percentages.income_projected|floatformat:0 }}%">
+            <div class="progress-bar progress-bar-striped !tw-bg-green-400"
+                 data-bs-toggle="tooltip"
+                 data-bs-placement="top"
+                 title="{% trans 'Projected Income' %} ({{ p.percentages.income_projected|floatformat:2 }}%)">
+            </div>
+          </div>
+          <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Current Income' %} ({{ percentage.income_current|floatformat:2 }}%)" aria-valuenow="{{ p.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ p.percentages.income_current|floatformat:0 }}%">
+            <div class="progress-bar !tw-bg-green-400"
+                 data-bs-toggle="tooltip"
+                 data-bs-placement="top"
+                 title="{% trans 'Current Income' %} ({{ p.percentages.income_current|floatformat:2 }}%)">
+            </div>
+          </div>
+          <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Expenses' %} ({{ percentage.expense_projected|floatformat:2 }}%)" aria-valuenow="{{ p.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ p.percentages.expense_projected|floatformat:0 }}%">
+            <div class="progress-bar progress-bar-striped !tw-bg-red-400"
+                 data-bs-toggle="tooltip"
+                 data-bs-placement="top"
+                 title="{% trans 'Projected Expenses' %} ({{ p.percentages.expense_projected|floatformat:2 }}%)">
+            </div>
+          </div>
+          <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Current Expenses' %} ({{ percentage.expense_current|floatformat:2 }}%)" aria-valuenow="{{ p.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ p.percentages.expense_current|floatformat:0 }}%">
+            <div class="progress-bar !tw-bg-red-400"
+                 data-bs-toggle="tooltip"
+                 data-bs-placement="top"
+                 title="{% trans 'Current Expenses' %} ({{ p.percentages.expense_current|floatformat:2 }}%)">
+            </div>
+          </div>
+        </div>
+        {% endwith %}
       {% empty %}
         <c-msg.empty
             title="{% translate "No information to display" %}"></c-msg.empty>