Visual improvement to dashboard template

This commit is contained in:
JKuijperM 2026-01-22 15:17:14 +01:00
parent fb6e0f379e
commit 52d9e6488c
2 changed files with 130 additions and 61 deletions

View File

@ -15,7 +15,7 @@
<!-- Filters -->
<!-- ========================= -->
<form method="get">
<form method="get" class="filters">
<label>
Año:
<select name="year">
@ -43,23 +43,98 @@
</select>
</label>
<button type="submit">Filtrar</button>
<label>
<input type="checkbox" name="compare" value="1"
{% if compare_enabled %}checked{% endif %}>
Comparar con periodo anterior
</label>
<button type="submit">Aplicar</button>
</form>
<hr>
<p>
Mostrando:
<strong>{{ selected_year }}</strong>
{% if selected_month %}/<strong>{{ selected_month }}</strong>{% endif %}
</p>
<hr>
<!-- ========================= -->
<!-- KPIs -->
<!-- ========================= -->
<div class="kpis">
<div class="kpi">
<h3>Total</h3>
<p>{{ kpi_total }}</p>
</div>
<div class="kpi">
<h3>Nº de gastos</h3>
<p>{{ kpi_count }}</p>
</div>
<div class="kpi">
<h3>Categorías</h3>
<p>{{ kpi_categories }}</p>
</div>
</div>
{% if compare_enabled %}
<section class="kpi compare">
<h3>Comparación con periodo anterior</h3>
<p>
Total anterior: <strong>{{ kpi_previous_total|floatformat:2 }}</strong>
</p>
<p>
Diferencia:
{% if kpi_difference > 0 %}
<span></span>
{% elif kpi_difference < 0 %}
<span></span>
{% endif %}
<strong>{{ kpi_difference|floatformat:2 }}</strong>
</p>
<p>
Variación:
{% if kpi_percentage is not None %}
{{ kpi_percentage|floatformat:2 }}%
{% else %}
Variación: N/D
{% endif %}
</p>
</section>
{% endif %}
<!-- ========================= -->
<!-- Expenses by category -->
<!-- ========================= -->
<h2>Gastos por categoría</h2>
<ul>
{% for row in by_category %}
<li>{{ row.category__name }} → {{ row.total }}</li>
{% empty %}
<li>No hay datos</li>
{% endfor %}
</ul>
<table>
<thead>
<tr>
<th>Categoría</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for row in by_category %}
<tr>
<td>{{ row.category__name }}</td>
<td>{{ row.total }}</td>
</tr>
{% empty %}
<tr>
<td colspan="2">Sin datos</td>
</tr>
{% endfor %}
</tbody>
</table>
<hr>
@ -70,23 +145,17 @@
<h2>Gastos por mes</h2>
<ul>
{% for row in by_months %}
<li>Mes {{ row.mont }} → {{ row.total }}</li>
{% for row in by_month %}
<li>Mes {{ row.month }} → {{ row.total }}</li>
{% endfor %}
</ul>
<hr>
<!-- ========================= -->
<!-- Chart -->
<!-- ========================= -->
<label>
<input type="checkbox" name="compare" value="1"
{% if compare %}checked{% endif %}>
Comparar con periodo anterior
</label>
<h3>Distribución mensual (año completo)</h3>
<canvas id="expensesChart"></canvas>
<script>

View File

@ -32,6 +32,10 @@ def _get_int(value):
except (TypeError, ValueError):
return None
@login_required
def home(request):
return render(request, 'expenses/home.html')
@login_required
def expense_list(request):
expenses = Expense.objects.filter(owner=request.user)
@ -117,7 +121,7 @@ def dashboard(request):
selected_year = year or current_year
selected_month = month
compare = request.GET.get("compare") == "1"
compare_enabled = request.GET.get("compare") == "1"
# ------------------
# Queryset base
@ -129,7 +133,7 @@ def dashboard(request):
if selected_month:
expenses_filtered = expenses_filtered.filter(date__month=selected_month)
total_amount = expenses.aggregate(
total_amount = expenses_filtered.aggregate(
total=Sum('amount')
)['total'] or 0
@ -200,49 +204,41 @@ def dashboard(request):
# Compare period
# -----------------
previous_expenses = expenses
previous_total = None
difference = None
percentage = None
if month and year:
if month == 1:
prev_year = year - 1
prev_month = 12
else:
prev_year = year
prev_month = month - 1
previous_expenses = previous_expenses.filter(
date__year=prev_year,
date__month=prev_month
)
elif year and month is None:
prev_year = year - 1
previous_expenses = previous_expenses.filter(
date__year=prev_year
)
else:
today = date.today()
year = today.year
month = today.month
if compare_enabled:
previous_expenses = Expense.objects.filter(owner=request.user)
if month == 1:
prev_year = year - 1
prev_month = 12
if selected_month:
# Monthly compare
if selected_month == 1:
prev_year = selected_year - 1
prev_month = 12
else:
prev_year = selected_year
prev_month = selected_month - 1
previous_expenses = previous_expenses.filter(
date__year=prev_year,
date__month=prev_month
)
else:
prev_year = year
prev_month = month - 1
# Anual compare
prev_year = selected_year - 1
previous_expenses = previous_expenses.filter(
date__year=prev_year
)
previous_expenses = previous_expenses.filter(
date__year=prev_year,
date__month=prev_month
previous_total = (
previous_expenses.aggregate(total=Sum('amount'))['total'] or 0
)
previous_total = (
previous_expenses.aggregate(total=Sum('amount'))['total'] or 0
)
difference = total_amount - previous_total
precentage = (
(difference / previous_total) * 100 if previous_total else None
)
difference = total_amount - previous_total
if previous_total:
percentage = (difference / previous_total) * 100
# Send the data to the dashboard
@ -258,4 +254,8 @@ def dashboard(request):
'kpi_total': total_amount,
'kpi_count': expense_count,
'kpi_categories': category_count,
'compare_enabled': compare_enabled,
'kpi_previous_total': previous_total,
'kpi_difference': difference,
'kpi_percentage': percentage,
})