Añado una página con gráficos

Finanzas/README.md

@@ -38,3 +38,7 @@ Session Started at: {{ user.last_login }}
 
 ## Para funcionar con gunicorn y nginx
 https://testdriven.io/blog/dockerizing-django-with-postgres-gunicorn-and-nginx/
+
+## Para incluir gŕaficos
+
+https://studygyaan.com/django/creating-charts-in-django-web-app

Finanzas/finanzas/apuntes/urls.py

@@ -14,4 +14,9 @@ urlpatterns = [
     path('apuntes/<int:apunte_id>/', views.detalle_apunte, name='detalle_apunte'),
     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/chart-data/', views.chart_data, name='chart_data'),
+    path('apuntes/chart/', views.chart_view, name='chart_view'),
+
+
 ]

Finanzas/finanzas/apuntes/views.py

@@ -1,5 +1,6 @@
 from django.contrib.auth.decorators import login_required
 from django.shortcuts import render, get_object_or_404, redirect
+from django.http import JsonResponse
 
 # Create your views here.
 from .models import Cuenta, Apunte, Tipo
@@ -127,3 +128,22 @@ def eliminar_apunte(request, apunte_id):
     apunte = Apunte.objects.get(pk=apunte_id)
     apunte.delete()
     return redirect('lista_apuntes')
+
+@login_required
+def chart_data(request):
+    datos = Cuenta.objects.all()
+
+    etiquetas = [item.nombre for item in datos]
+    valores = [item.saldo_actual for item in datos]
+
+    chart_data = {
+        'label': 'Gráfico',
+        'labels': etiquetas,
+        'values': valores,
+        'chart_type': 'bar' # any chart type line, bar, ects
+        }
+
+    return JsonResponse(chart_data)
+
+def chart_view(request):
+    return render(request, 'apuntes/chart.html')

Finanzas/finanzas/templates/_cabecera.html

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

Finanzas/finanzas/templates/_head.html

@@ -20,4 +20,7 @@
     <!-- App CSS -->  
     <link id="theme-style" rel="stylesheet" href="{% static 'css/portal.css' %}">
 
+    <!-- Include Chart.js via CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
 </head> 

Finanzas/finanzas/templates/apuntes/chart.html

@@ -0,0 +1,44 @@
+{% extends 'base.html' %}
+
+{% block content %}
+
+<div class="container-xl">
+
+    <h1 class="app-page-title">Gráficos</h1>
+
+    <div class="app-card app-card-notification shadow-sm mb-4">
+        <div style="width: 50%; margin: 0 auto;">
+            <canvas id="myChart"></canvas>
+        </div>
+
+        <script>
+            document.addEventListener('DOMContentLoaded', function () {
+                fetch('/apuntes/apuntes/chart-data/')
+                    .then(response => response.json())
+                    .then(data => {
+                        const ctx = document.getElementById('myChart').getContext('2d');
+
+                        new Chart(ctx, {
+                            type: data.chart_type,
+                            data: {
+                                labels: data.labels,
+                                datasets: [{
+                                    label: data.label,
+                                    data: data.values,
+                                }]
+                            },
+                            options: {
+                                scales: {
+                                    y: {
+                                        beginAtZero: true
+                                    }
+                                }
+                            }
+                        });
+                    });
+            });
+        </script>
+    </div>
+</div>
+
+{% endblock %}