{% 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 %}