mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-03-26 11:21:24 +01:00
Merge pull request #245 from eitchtee/dev
feat(insights:category-overview): pick between Projected/Current/Final totals
This commit is contained in:
Herculino Trotta
@@ -177,11 +177,14 @@ def category_overview(request):
|
||||
if "show_tags" in request.GET:
|
||||
show_tags = request.GET["show_tags"] == "on"
|
||||
request.session["insights_category_explorer_show_tags"] = show_tags
|
||||
print(request.GET["show_tags"], show_tags)
|
||||
else:
|
||||
show_tags = request.session.get("insights_category_explorer_show_tags", True)
|
||||
|
||||
print(show_tags)
|
||||
if "showing" in request.GET:
|
||||
showing = request.GET["showing"]
|
||||
request.session["insights_category_explorer_showing"] = showing
|
||||
else:
|
||||
showing = request.session.get("insights_category_explorer_showing", "final")
|
||||
|
||||
# Get filtered transactions
|
||||
transactions = get_transactions(request, include_silent=True)
|
||||
@@ -193,7 +196,12 @@ def category_overview(request):
|
||||
return render(
|
||||
request,
|
||||
"insights/fragments/category_overview/index.html",
|
||||
{"total_table": total_table, "view_type": view_type, "show_tags": show_tags},
|
||||
{
|
||||
"total_table": total_table,
|
||||
"view_type": view_type,
|
||||
"show_tags": show_tags,
|
||||
"showing": showing,
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
{% load i18n %}
|
||||
|
||||
<div hx-get="{% url 'category_overview' %}" hx-trigger="updated from:window" class="show-loading" hx-swap="outerHTML"
|
||||
hx-include="#picker-form, #picker-type, #view-type, #show-tags">
|
||||
hx-include="#picker-form, #picker-type, #view-type, #show-tags, #showing">
|
||||
<div class="h-100 text-center mb-4">
|
||||
<div class="btn-group gap-3" role="group" id="view-type">
|
||||
<div class="btn-group gap-3" role="group" id="view-type" _="on change trigger updated">
|
||||
<input type="radio" class="btn-check"
|
||||
name="view_type"
|
||||
id="table-view"
|
||||
autocomplete="off"
|
||||
value="table"
|
||||
_="on change trigger updated"
|
||||
{% if view_type == "table" %}checked{% endif %}>
|
||||
<label class="btn btn-outline-primary rounded-5" for="table-view"><i
|
||||
class="fa-solid fa-table fa-fw me-2"></i>{% trans 'Table' %}</label>
|
||||
@@ -20,29 +19,43 @@
|
||||
id="bars-view"
|
||||
autocomplete="off"
|
||||
value="bars"
|
||||
_="on change trigger updated"
|
||||
{% if view_type == "bars" %}checked{% endif %}>
|
||||
<label class="btn btn-outline-primary rounded-5" for="bars-view"><i
|
||||
class="fa-solid fa-chart-bar fa-fw me-2"></i>{% trans 'Bars' %}</label>
|
||||
</div>
|
||||
</div>
|
||||
{% if total_table %}
|
||||
{% if view_type == "table" %}
|
||||
<div class="mt-3">
|
||||
<div class="form-check form-switch" id="show-tags">
|
||||
<input type="hidden" name="show_tags" value="off">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="show-tags-switch" name="show_tags"
|
||||
_="on change trigger updated" {% if show_tags %}checked{% endif %}>
|
||||
{% spaceless %}
|
||||
<div class="mt-3 mb-1 d-flex flex-column flex-md-row justify-content-between">
|
||||
<div class="form-check form-switch" id="show-tags">
|
||||
{% if view_type == 'table' %}
|
||||
<input type="hidden" name="show_tags" value="off">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="show-tags-switch" name="show_tags"
|
||||
_="on change trigger updated" {% if show_tags %}checked{% endif %}>
|
||||
{% spaceless %}
|
||||
<label class="form-check-label" for="show-tags-switch">
|
||||
{% trans 'Show tags' %}
|
||||
{% trans 'Tags' %}
|
||||
</label>
|
||||
<c-ui.help-icon
|
||||
content="{% trans 'Transaction amounts associated with multiple tags will be counted once for each tag' %}"
|
||||
icon="fa-solid fa-circle-exclamation"></c-ui.help-icon>
|
||||
{% endspaceless %}
|
||||
</div>
|
||||
</div>
|
||||
{% endspaceless %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" id="showing" _="on change trigger updated">
|
||||
<input type="radio" class="btn-check" name="showing" id="showing-projected" autocomplete="off"
|
||||
value="projected" {% if showing == 'projected' %}checked{% endif %}>
|
||||
<label class="btn btn-outline-primary" for="showing-projected">{% trans "Projected" %}</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="showing" id="showing-current" autocomplete="off" value="current"
|
||||
{% if showing == 'current' %}checked{% endif %}>
|
||||
<label class="btn btn-outline-primary" for="showing-current">{% trans "Current" %}</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="showing" id="showing-final" autocomplete="off" value="final"
|
||||
{% if showing == 'final' %}checked{% endif %}>
|
||||
<label class="btn btn-outline-primary" for="showing-final">{% trans "Final total" %}</label>
|
||||
</div>
|
||||
</div>
|
||||
{% if total_table %}
|
||||
{% if view_type == "table" %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover table-bordered align-middle">
|
||||
<thead>
|
||||
@@ -58,9 +71,23 @@
|
||||
<!-- Category row -->
|
||||
<tr class="table-group-header">
|
||||
<th>{% if category.name %}{{ category.name }}{% else %}{% trans 'Uncategorized' %}{% endif %}</th>
|
||||
<td>
|
||||
<td> {# income #}
|
||||
{% for currency in category.currencies.values %}
|
||||
{% if currency.total_income != 0 %}
|
||||
{% if showing == 'current' and currency.income_current != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.income_current"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="green"></c-amount.display>
|
||||
{% elif showing == 'projected' and currency.income_projected != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.income_projected"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="green"></c-amount.display>
|
||||
{% elif showing == 'final' and currency.total_income != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.total_income"
|
||||
:prefix="currency.currency.prefix"
|
||||
@@ -72,9 +99,23 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td>
|
||||
<td> {# expenses #}
|
||||
{% for currency in category.currencies.values %}
|
||||
{% if currency.total_expense != 0 %}
|
||||
{% if showing == 'current' and currency.expense_current != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.expense_current"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="red"></c-amount.display>
|
||||
{% elif showing == 'projected' and currency.expense_projected != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.expense_projected"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="red"></c-amount.display>
|
||||
{% elif showing == 'final' and currency.total_expense != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.total_expense"
|
||||
:prefix="currency.currency.prefix"
|
||||
@@ -86,9 +127,23 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td>
|
||||
<td> {# total #}
|
||||
{% for currency in category.currencies.values %}
|
||||
{% if currency.total_final != 0 %}
|
||||
{% if showing == 'current' and currency.total_current != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.total_current"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
|
||||
{% elif showing == 'projected' and currency.total_projected != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.total_projected"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
|
||||
{% elif showing == 'final' and currency.total_final != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.total_final"
|
||||
:prefix="currency.currency.prefix"
|
||||
@@ -112,7 +167,21 @@
|
||||
</td>
|
||||
<td>
|
||||
{% for currency in tag.currencies.values %}
|
||||
{% if currency.total_income != 0 %}
|
||||
{% if showing == 'current' and currency.income_current != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.income_current"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="green"></c-amount.display>
|
||||
{% elif showing == 'projected' and currency.income_projected != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.income_projected"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="green"></c-amount.display>
|
||||
{% elif showing == 'final' and currency.total_income != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.total_income"
|
||||
:prefix="currency.currency.prefix"
|
||||
@@ -126,7 +195,21 @@
|
||||
</td>
|
||||
<td>
|
||||
{% for currency in tag.currencies.values %}
|
||||
{% if currency.total_expense != 0 %}
|
||||
{% if showing == 'current' and currency.expense_current != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.expense_current"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="red"></c-amount.display>
|
||||
{% elif showing == 'projected' and currency.expense_projected != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.expense_projected"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="red"></c-amount.display>
|
||||
{% elif showing == 'final' and currency.total_expense != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.total_expense"
|
||||
:prefix="currency.currency.prefix"
|
||||
@@ -140,7 +223,21 @@
|
||||
</td>
|
||||
<td>
|
||||
{% for currency in tag.currencies.values %}
|
||||
{% if currency.total_final != 0 %}
|
||||
{% if showing == 'current' and currency.total_current != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.total_current"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
|
||||
{% elif showing == 'projected' and currency.total_projected != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.total_projected"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
|
||||
{% elif showing == 'final' and currency.total_final != 0 %}
|
||||
<c-amount.display
|
||||
:amount="currency.total_final"
|
||||
:prefix="currency.currency.prefix"
|
||||
@@ -164,16 +261,19 @@
|
||||
|
||||
{% elif view_type == "bars" %}
|
||||
<div>
|
||||
<div class="chart-container" _="init call setupChart() end" style="position: relative; height:80vh; width:100%">
|
||||
<div class="chart-container" _="init call setupChart() end" style="position: relative; height:78vh; width:100%">
|
||||
<canvas id="categoryChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ total_table|json_script:"categoryOverviewData" }}
|
||||
{{ showing|json_script:"showingString" }}
|
||||
|
||||
<script>
|
||||
function setupChart() {
|
||||
var rawData = JSON.parse(document.getElementById('categoryOverviewData').textContent);
|
||||
var showing_string = JSON.parse(document.getElementById('showingString').textContent);
|
||||
console.log(showing_string)
|
||||
|
||||
// --- Dynamic Data Processing ---
|
||||
var categories = [];
|
||||
@@ -219,7 +319,14 @@
|
||||
Object.values(cat.currencies).forEach(curr => {
|
||||
var code = curr.currency?.code;
|
||||
if (code && currencyData[code]) {
|
||||
var value = parseFloat(curr.total_final);
|
||||
if (showing_string == 'current') {
|
||||
var value = parseFloat(curr.total_current);
|
||||
} else if (showing_string == 'projected') {
|
||||
var value = parseFloat(curr.total_projected);
|
||||
} else {
|
||||
var value = parseFloat(curr.total_final);
|
||||
}
|
||||
|
||||
// Store the number if it's valid, otherwise keep null
|
||||
currencyData[code][catIndex] = !isNaN(value) ? value : null;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user