Añado gráfico comparativo de gastos

Finanzas/finanzas/apuntes/urls.py

@@ -16,5 +16,6 @@ urlpatterns = [
     path('apuntes/<int:apunte_id>/eliminar/', views.eliminar_apunte, name='eliminar_apunte'),
 
     path('apuntes/grafico_tipo_cuenta/', views.datos_por_tipo_cuenta, name='datos_por_tipo_cuenta'),
+    path('apuntes/grafico_de_gastos/', views.grafico_de_gastos, name='grafico_de_gastos'),
 
 ]

Finanzas/finanzas/apuntes/views.py

@@ -171,3 +171,25 @@ def datos_por_tipo_cuenta(request):
     print("Context: ", context['etiquetas_json'])
 
     return render(request, 'apuntes/nuevo_grafico.html', context)
+
+@login_required
+def grafico_de_gastos(request):
+    degastos = Cuenta.objects.filter(tipo=Tipo.objects.get(tipo="Gasto"))
+
+    etiquetas = []
+    gastos = []
+
+    for cuenta in degastos:
+        etiqueta = f"{cuenta.nombre}"
+        if etiqueta not in etiquetas:
+            etiquetas.append(etiqueta)
+
+        gastos.append(float(cuenta.saldo_actual))
+
+    context = {
+        'gastos': gastos,
+        'etiquetas_json': json.dumps(etiquetas),
+        'gastos_datos_json': json.dumps(gastos),
+    }
+
+    return render(request, 'apuntes/grafico_de_gastos.html', context)

Finanzas/finanzas/templates/_cabecera.html

@@ -107,22 +107,6 @@
                         </a><!--//nav-link-->
                     </li><!--//nav-item-->
 
-                    <li class="nav-item">
-                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
-                        <a class="nav-link" href="{% url 'datos_por_tipo_cuenta' %}">
-                            <span class="nav-icon">
-                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
-<path fill-rule="evenodd" d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
-<circle cx="3.5" cy="5.5" r=".5"/>
-<circle cx="3.5" cy="8" r=".5"/>
-<circle cx="3.5" cy="10.5" r=".5"/>
-</svg>
-                             </span>
-                             <span class="nav-link-text">Gráficos</span>
-                        </a><!--//nav-link-->
-                    </li><!--//nav-item-->
-
                     {% if user.is_authenticated %}
 
                     <li class="nav-item has-submenu">
@@ -135,7 +119,7 @@
   <path d="M6 0h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1H4a2 2 0 0 1 2-2z"/>
 </svg>
                              </span>
-                             <span class="nav-link-text">Aplicaciones</span>
+                             <span class="nav-link-text">Gráficos</span>
                              <span class="submenu-arrow">
                                  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
@@ -144,7 +128,12 @@
                         </a><!--//nav-link-->
                         <div id="submenu-1" class="collapse submenu submenu-1" data-bs-parent="#menu-accordion">
                             <ul class="submenu-list list-unstyled">
-                                <li class="submenu-item"><a class="submenu-link" href="{% url 'lista_cuentas' %}">Finanzas</a></li>
+                                <li class="submenu-item"><a class="submenu-link" href="{% url 'datos_por_tipo_cuenta' %}">Bancos</a></li>
+                            </ul>
+                        </div>
+                        <div id="submenu-1" class="collapse submenu submenu-1" data-bs-parent="#menu-accordion">
+                            <ul class="submenu-list list-unstyled">
+                                <li class="submenu-item"><a class="submenu-link" href="{% url 'grafico_de_gastos' %}">Gastos</a></li>
                             </ul>
                         </div>
                     </li><!--//nav-item-->

Finanzas/finanzas/templates/apuntes/grafico_de_gastos.html

@@ -0,0 +1,42 @@
+{% extends 'base.html' %}
+
+{% block content %}
+
+<div class="container-xl">
+
+    <h1 class="app-page-title">Comparativa de gastos</h1>
+
+    <div class="app-card app-card-notification shadow-sm mb-4">
+        <div style="width: 50%; margin: 0 auto;">
+            <canvas id="gastosGrafico"></canvas>
+        </div>
+
+        <script>
+
+            const etiquetas = JSON.parse('{{ etiquetas_json|escapejs }}');
+            const datosGastos = JSON.parse('{{ gastos_datos_json|escapejs }}');
+
+            const ctx = document.getElementById('gastosGrafico').getContext('2d');
+
+            const gastosGrafico = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: etiquetas,
+                    datasets: [{
+                        label: 'Gastos',
+                        data: datosGastos,
+                    }]
+                },
+                options: {
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+        </script>
+    </div>
+</div>
+
+{% endblock %}