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

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

@ -1,7 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<h1>Dashboard</h1>
<html>
<head>
<title>Dashboard</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<h1>Dashboard</h1>
<h2>Gastos por categoría</h2> <h2>Gastos por categoría</h2>
<ul> <ul>
{% for row in by_category %} {% for row in by_category %}
@ -9,8 +18,9 @@
{% empty %} {% empty %}
<li>No hay datos</li> <li>No hay datos</li>
{% endfor %} {% endfor %}
</ul>
<ul>
<form method="get"> <form method="get">
<label for="year">Año:</label> <label for="year">Año:</label>
<select name="year" id="year"> <select name="year" id="year">
@ -44,4 +54,24 @@
<li>{{ row.month }} → {{ row.total }}</li> <li>{{ row.month }} → {{ row.total }}</li>
{% endfor %} {% 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> </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
}) })