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

Fixed typo in views.py and added the first chart in dashboard

Browse Source
This commit is contained in:
JKuijperM 2026-01-16 22:16:16 +01:00
parent 5579d1130c
commit 67a7d27e21
2 changed files with 79 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

9
expenses_manager/expenses/views.py
View File

@ -139,8 +139,15 @@ def dashboard(request):
.distinct() .distinct()
.order_by('year') .order_by('year')
) )
# Month list
months = list(range(1, 13)) months = list(range(1, 13))
# Prepare data fot ploting in chart
chart_labels = []
chart_totals = []
for month_data in by_month_display:
chart_labels.append(month_data['month'])
chart_totals.append(float(month_data['total']))
# Send the data to the dashboard # Send the data to the dashboard
return render(request, 'expenses/dashboard.html', { return render(request, 'expenses/dashboard.html', {
@ -150,4 +157,6 @@ def dashboard(request):
'months': months, 'months': months,
'selected_year': year, 'selected_year': year,
'selected_month': month, 'selected_month': month,
'chart_labels': chart_labels,
'chart_data': chart_totals
}) })