jkuijperm/expenses_manager
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor in the dashboard template

Browse Source
This commit is contained in:
JKuijperM 2026-01-21 15:34:02 +01:00
parent 2b643367e7
commit 182fb01d3c
1 changed files with 75 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
expenses_manager/expenses/templates/expenses/dashboard.html
View File

@ -9,69 +9,97 @@
<body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<h1>Dashboard</h1>
<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>
<ul>
<form method="get">
<label for="year">Año:</label>
<select name="year" id="year">
<option value="">Todos</option>
<!-- ========================= -->
<!-- Filters -->
<!-- ========================= -->
<form method="get">
<label>
Año:
<select name="year">
{% for y in year_list %}
<option value="{{ y.year }}"
{% if selected_year == y.year|stringformat:"s" %}selected{% endif %}
<option value="{{ y }}"
{% if y == selected_year %}selected{% endif %}
>
{{ y.year }}
{{y}}
</option>
{% endfor %}
</select>
</label>
<label for="month">Mes:</label>
<select name="month" id="month">
<label>
Mes:
<select name="month">
<option value="">Todos</option>
{% for m in months %}
<option value="{{ m }}"
{% if selected_month == m|stringformat:"s" %}selected{% endif %}
{% if m == selected_month %}selected{% endif %}
>
{{ m }}
</option>
{% endfor %}
</select>
</label>
<button type="submit">Filtrar</button>
</form>
<button type="submit">Filtrar</button>
</form>
<hr>
{% for row in by_month %}
<li>{{ row.month }} → {{ row.total }}</li>
<!-- ========================= -->
<!-- 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 %}
<canvas id="expensesChart"></canvas>
<script>
const labels = {{ chart_labels|safe }};
const data = {{ chart_data|safe }};
const ctx = document.getElementById('expensesChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets:[{
label: 'Gastos',
data: data,
}]
}
});
</script>
</ul>
</body>
<hr>
<!-- ========================= -->
<!-- Expenses by month -->
<!-- ========================= -->
<h2>Gastos por mes</h2>
<ul>
{% for row in by_months %}
<li>Mes {{ row.mont }} → {{ row.total }}</li>
{% endfor %}
</ul>
<hr>
<!-- ========================= -->
<!-- Chart -->
<!-- ========================= -->
<canvas id="expensesChart"></canvas>
<script>
const labels = {{ chart_labels|safe }};
const data = {{ chart_data|safe }};
const ctx = document.getElementById('expensesChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets:[{
label: 'Gastos',
data: data,
}]
}
});
</script>
</body>
</html>