starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-04-25 10:08:36 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat(yearly:account): add percentage bar

Browse Source
This commit is contained in:
Herculino Trotta
2024-12-24 11:58:23 -03:00
parent 315d68ba15
commit 4efba3424d
2 changed files with 41 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/apps/yearly_overview/views.py
View File

@@ -12,6 +12,7 @@ from apps.transactions.models import Transaction
from apps.transactions.utils.calculations import ( from apps.transactions.utils.calculations import (
calculate_account_totals, calculate_account_totals,
calculate_currency_totals, calculate_currency_totals,
calculate_percentage_distribution,
) )
@@ -156,9 +157,15 @@ def yearly_overview_by_account(request, year: int):
) )
data = calculate_account_totals(transactions) data = calculate_account_totals(transactions)
percentages = calculate_percentage_distribution(data)
return render( return render(
request, request,
"yearly_overview/fragments/account_data.html", "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,
},
) )

33
app/templates/yearly_overview/fragments/account_data.html
View File

@@ -1,3 +1,4 @@
{% load tools %}
{% load i18n %} {% load i18n %}
<div class="row row-cols-1 g-4 mb-3"> <div class="row row-cols-1 g-4 mb-3">
<div class="col"> <div class="col">
@@ -173,6 +174,38 @@
</div> </div>
{% endif %} {% endif %}
</div> </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 %} {% empty %}
<c-msg.empty <c-msg.empty
title="{% translate "No information to display" %}"></c-msg.empty> title="{% translate "No information to display" %}"></c-msg.empty>