mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-03-25 02:41:15 +01:00
feat(yearly:account): add percentage bar
This commit is contained in:
@@ -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,
|
||||
},
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user