Gráfico mejorado

Finanzas/finanzas/apuntes/urls.py

@@ -15,7 +15,6 @@ urlpatterns = [
     path('apuntes/<int:apunte_id>/editar/', views.editar_apunte, name='editar_apunte'),
     path('apuntes/<int:apunte_id>/eliminar/', views.eliminar_apunte, name='eliminar_apunte'),
 
-    path('apuntes/datos_grafico_bancos/', views.datos_grafico_bancos, name='datos_grafico_bancos'),
-    path('apuntes/grafico_bancos/', views.grafico_bancos_view, name='grafico_bancos_view'),
+    path('apuntes/grafico_tipo_cuenta/', views.datos_por_tipo_cuenta, name='datos_por_tipo_cuenta'),
 
 ]

Finanzas/finanzas/apuntes/views.py

@@ -5,6 +5,7 @@ from django.http import JsonResponse
 # Create your views here.
 from .models import Cuenta, Apunte, Tipo
 from .forms import CuentaForm, ApunteForm
+import json
 
 
 @login_required
@@ -130,23 +131,43 @@ def eliminar_apunte(request, apunte_id):
     return redirect('lista_apuntes')
 
 @login_required
-def datos_grafico_bancos(request):
-    datos = Cuenta.objects.filter(tipo=Tipo.objects.get(tipo="Banco")) | Cuenta.objects.filter(tipo=Tipo.objects.get(tipo="Ahorro"))
+def datos_por_tipo_cuenta(request):
+    debancos = Cuenta.objects.filter(tipo=Tipo.objects.get(tipo="Banco"))
 
-    etiquetas = [item.nombre for item in datos]
-    valores = [item.saldo_actual for item in datos]
+    etiquetas = []
+    bancos = []
+    ahorro = []
 
-    print(etiquetas)
+    for cuenta in debancos:
+        etiqueta = f"{cuenta.nombre}"
+        if etiqueta not in etiquetas:
+            etiquetas.append(etiqueta)
 
-    datos_grafico_bancos = {
-        'label': 'Bancos',
-        'labels': etiquetas,
-        'values': valores,
+        bancos.append(float(cuenta.saldo_actual))
+        ahorro.append(0)
 
-        'chart_type': 'bar' # any chart type line, bar, ects
-        }
+        print("Etiqueta: ", etiquetas, " --- ", bancos)
 
-    return JsonResponse(datos_grafico_bancos)
 
-def grafico_bancos_view(request):
-    return render(request, 'apuntes/grafico_bancos.html')
+    deahorro = Cuenta.objects.filter(tipo=Tipo.objects.get(tipo="Ahorro"))
+
+    for cuenta in deahorro:
+        etiqueta = f"{cuenta.nombre}"
+        if etiqueta not in etiquetas:
+            etiquetas.append(etiqueta)
+
+        ahorro.append(float(cuenta.saldo_actual))
+        bancos.append(0)
+
+        print("Etiqueta: ", etiquetas, " --- ", ahorro)
+
+    context = {
+        'bancos': bancos,
+        'etiquetas_json': json.dumps(etiquetas),
+        'bancos_datos_json': json.dumps(bancos),
+        'ahorro_datos_json': json.dumps(ahorro),
+    }
+
+    print("Context: ", context['etiquetas_json'])
+
+    return render(request, 'apuntes/nuevo_grafico.html', context)

Finanzas/finanzas/templates/_cabecera.html

@@ -109,7 +109,7 @@
 
                     <li class="nav-item">
                         <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
-                        <a class="nav-link" href="{% url 'grafico_bancos_view' %}">
+                        <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"/>

Finanzas/finanzas/templates/_head.html

@@ -20,21 +20,6 @@
     <!-- App CSS -->  
     <link id="theme-style" rel="stylesheet" href="{% static 'css/portal.css' %}">
 
-    <!-- Include Chart.js via CDN
-    <script src="{% static 'js/chart.js' %}"></script>-->
-
-         <!-- Javascript -->
-    <script src="{%  static 'plugins/popper.min.js' %}"></script>
-    <script src="{%  static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
-
     <!-- Charts JS -->
     <script src="{%  static 'plugins/chart.js/chart.min.js' %}"></script>
-    <script src="{%  static 'js/index-charts.js' %}"></script>
-
-    <!-- La línea siguiente es para la demo de los charts en charts.html -->
-    <script src="{%  static 'js/charts-demo.js' %}"></script>
-
-
-    <!-- Page Specific JS -->
-    <script src="{%  static 'js/app.js' %}"></script>
 </head> 

Finanzas/finanzas/templates/apuntes/grafico_bancos.html

@@ -1,60 +0,0 @@
-{% extends 'base.html' %}
-
-{% block content %}
-
-<div class="container-xl">
-
-    <h1 class="app-page-title">Saldos de bancos</h1>
-
-    <div class="app-card app-card-notification shadow-sm mb-4">
-        <div style="width: 50%; margin: 0 auto;">
-            <canvas id="graficoBancos"></canvas>
-        </div>
-
-        <script>
-            document.addEventListener('DOMContentLoaded', function () {
-                fetch('/apuntes/apuntes/datos_grafico_bancos/')
-                    .then(response => response.json())
-                    .then(data => {
-                        const ctx = document.getElementById('graficoBancos').getContext('2d');
-
-                        new Chart(ctx, {
-                            type: data.chart_type,
-                            data: {
-                                labels: data.labels,
-                                datasets: [{
-                                    label: data.label,
-                                    data: data.values,
-                                    backgroundColor: [
-                                                'rgba(255, 99, 132, 0.2)',
-                                                'rgba(54, 162, 235, 0.2)',
-                                                'rgba(255, 206, 86, 0.2)',
-                                                'rgba(75, 192, 192, 0.2)',
-                                                'rgba(153, 102, 255, 0.2)',
-                                                'rgba(255, 159, 64, 0.2)'
-                                                ],
-                                    borderColor: [
-                                                'rgba(255, 99, 132, 1)',
-                                                'rgba(54, 162, 235, 1)',
-                                                'rgba(255, 206, 86, 1)',
-                                                'rgba(75, 192, 192, 1)',
-                                                'rgba(153, 102, 255, 1)',
-                                                'rgba(255, 159, 64, 1)'
-                                                ],
-                                }]
-                            },
-                            options: {
-                                scales: {
-                                    y: {
-                                        beginAtZero: true
-                                    }
-                                }
-                            }
-                        });
-                    });
-            });
-        </script>
-    </div>
-</div>
-
-{% endblock %}

Finanzas/finanzas/templates/apuntes/nuevo_grafico.html

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

Finanzas/finanzas/templates/base.html

@@ -13,7 +13,16 @@
 
       {% include "_footer.html"  %}
 
-    </div><!--//app-wrapper-->    					
+    </div><!--//app-wrapper-->
+
+
+         <!-- Javascript -->
+    <script src="{%  static 'plugins/popper.min.js' %}"></script>
+    <script src="{%  static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
+
+    <!-- Page Specific JS -->
+    <script src="{%  static 'js/app.js' %}"></script>
+
     </body>
 </html>