224 lines
6.5 KiB
HTML
224 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
<head>
|
|
<title>Dashboard</title>
|
|
</head>
|
|
|
|
<body>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<h1>Dashboard</h1>
|
|
|
|
<!-- ========================= -->
|
|
<!-- Filters -->
|
|
<!-- ========================= -->
|
|
|
|
<form method="get" class="filters">
|
|
<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>
|
|
|
|
<label>
|
|
<input type="checkbox" name="compare" value="1"
|
|
{% if compare_enabled %}checked{% endif %}>
|
|
Comparar con periodo anterior
|
|
</label>
|
|
|
|
<button type="submit">Aplicar</button>
|
|
</form>
|
|
|
|
<p>
|
|
Mostrando:
|
|
<strong>{{ selected_year }}</strong>
|
|
{% if selected_month %}/<strong>{{ selected_month }}</strong>{% endif %}
|
|
</p>
|
|
<p>Comparado con el periodo inmediatamente anterior</p>
|
|
|
|
<hr>
|
|
|
|
<!-- ========================= -->
|
|
<!-- KPIs -->
|
|
<!-- ========================= -->
|
|
|
|
|
|
<div class="kpis">
|
|
|
|
<div class="kpi">
|
|
<h3>Total</h3>
|
|
<p>{{ kpi_total }}</p>
|
|
</div>
|
|
|
|
<div class="kpi">
|
|
<h3>Nº de gastos</h3>
|
|
<p>{{ kpi_count }}</p>
|
|
</div>
|
|
|
|
<div class="kpi">
|
|
<h3>Categorías</h3>
|
|
<p>{{ kpi_categories }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% if compare_enabled %}
|
|
<section class="kpi compare">
|
|
<h3>Comparación con periodo anterior</h3>
|
|
|
|
{% if kpi_previous_total == 0 %}
|
|
<p><em>No hay datos en el periodo anterior</em></p>
|
|
{% else %}
|
|
<p>
|
|
Total anterior: <strong>{{ kpi_previous_total|floatformat:2 }}</strong>
|
|
</p>
|
|
{% endif %}
|
|
|
|
<p>
|
|
Diferencia:
|
|
{% if kpi_difference > 0 %}
|
|
<span>▲</span>
|
|
{% elif kpi_difference < 0 %}
|
|
<span>▼</span>
|
|
{% else %}
|
|
<span>=</span>
|
|
{% endif %}
|
|
<strong>{{ kpi_difference|floatformat:2 }}</strong>
|
|
</p>
|
|
<p>
|
|
Variación:
|
|
{% if kpi_percentage is not None %}
|
|
{{ kpi_percentage|floatformat:2 }}%
|
|
{% else %}
|
|
Variación: N/D
|
|
{% endif %}
|
|
</p>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<!-- ========================= -->
|
|
<!-- Expenses by category -->
|
|
<!-- ========================= -->
|
|
<h2>Gastos por categoría</h2>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Categoría</th>
|
|
<th>Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in by_category %}
|
|
<tr>
|
|
<td>{{ row.category__name }}</td>
|
|
<td>{{ row.total }}</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="2">Sin datos</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
{% if compare_enabled %}
|
|
<h3>Comparativa por categoría</h3>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Categoría</th>
|
|
<th>Actual</th>
|
|
<th>Anterior</th>
|
|
<th>Diferencia</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in category_comparison %}
|
|
<tr>
|
|
<td>{{ row.category }}</td>
|
|
<td>{{ row.current }}</td>
|
|
<td>{{ row.previous }}</td>
|
|
<td>
|
|
{% if row.difference > 0 %}
|
|
▲ {{ row.difference }}
|
|
{% elif row.difference < 0 %}
|
|
▼ {{ row.difference }}
|
|
{% else %}
|
|
=
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% endif %}
|
|
|
|
<hr>
|
|
|
|
<!-- ========================= -->
|
|
<!-- Expenses by month -->
|
|
<!-- ========================= -->
|
|
|
|
<h2>Gastos por mes</h2>
|
|
|
|
<ul>
|
|
{% for row in by_month %}
|
|
<li>Mes {{ row.month }} → {{ row.total }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<!-- ========================= -->
|
|
<!-- Chart -->
|
|
<!-- ========================= -->
|
|
|
|
<h3>Distribución mensual (año completo)</h3>
|
|
|
|
<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>
|
|
|
|
<hr>
|
|
|
|
|
|
</body>
|
|
</html> |