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

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

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