Refactor in the dashboard template
This commit is contained in:
parent
2b643367e7
commit
182fb01d3c
@ -9,9 +9,50 @@
|
|||||||
<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>
|
||||||
|
|
||||||
|
<!-- ========================= -->
|
||||||
|
<!-- Filters -->
|
||||||
|
<!-- ========================= -->
|
||||||
|
|
||||||
|
<form method="get">
|
||||||
|
<label>
|
||||||
|
Año:
|
||||||
|
<select name="year">
|
||||||
|
{% for y in year_list %}
|
||||||
|
<option value="{{ y }}"
|
||||||
|
{% if y == selected_year %}selected{% endif %}
|
||||||
|
>
|
||||||
|
{{y}}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Mes:
|
||||||
|
<select name="month">
|
||||||
|
<option value="">Todos</option>
|
||||||
|
{% for m in months %}
|
||||||
|
<option value="{{ m }}"
|
||||||
|
{% if m == selected_month %}selected{% endif %}
|
||||||
|
>
|
||||||
|
{{ m }}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<button type="submit">Filtrar</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<!-- ========================= -->
|
||||||
|
<!-- Expenses by category -->
|
||||||
|
<!-- ========================= -->
|
||||||
<h2>Gastos por categoría</h2>
|
<h2>Gastos por categoría</h2>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{% for row in by_category %}
|
{% for row in by_category %}
|
||||||
<li>{{ row.category__name }} → {{ row.total }}</li>
|
<li>{{ row.category__name }} → {{ row.total }}</li>
|
||||||
@ -20,41 +61,28 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<!-- ========================= -->
|
||||||
|
<!-- Expenses by month -->
|
||||||
|
<!-- ========================= -->
|
||||||
|
|
||||||
|
<h2>Gastos por mes</h2>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<form method="get">
|
{% for row in by_months %}
|
||||||
<label for="year">Año:</label>
|
<li>Mes {{ row.mont }} → {{ row.total }}</li>
|
||||||
<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 %}
|
{% endfor %}
|
||||||
</select>
|
</ul>
|
||||||
|
|
||||||
<label for="month">Mes:</label>
|
<hr>
|
||||||
<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>
|
<!-- Chart -->
|
||||||
|
<!-- ========================= -->
|
||||||
|
|
||||||
{% for row in by_month %}
|
|
||||||
<li>{{ row.month }} → {{ row.total }}</li>
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
<canvas id="expensesChart"></canvas>
|
<canvas id="expensesChart"></canvas>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const labels = {{ chart_labels|safe }};
|
const labels = {{ chart_labels|safe }};
|
||||||
const data = {{ chart_data|safe }};
|
const data = {{ chart_data|safe }};
|
||||||
@ -72,6 +100,6 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</ul>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user