{% set title, page, page_categorie = 'Dashboard', 'dashboard', 'dashboard' %}

{% extends 'base.html.twig' %}

{% block title %}
    {% trans %}Dashboard{% endtrans %}
{% endblock %}
{% block title_h1 %}
    {% trans %}Dashboard{% endtrans %}
{% endblock %}

{% block body %}
<div class="card shadow mb-4">
    <!-- Pie Chart -->
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">{% trans %}Total cheques per bank{% endtrans %}</h6>
    </div>
    <div class="card-body">
        <div class="chart-pie pt-4 pb-2">
            <canvas id="myPieChart"></canvas>
        </div>
    </div>
</div>


{#    <div class="chart-pie pt-4 pb-2">#}
{#        <canvas id="myPieChart"></canvas>#}
{#    </div>#}
{#    <div class="mt-4 text-center small">#}

{#    </div>#}
{% endblock %}

{% block javascripts %}
    <script>
        // Set new default font family and font color to mimic Bootstrap's default styling
        Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
        Chart.defaults.global.defaultFontColor = '#858796';

        // Pie Chart Example
        var ctx = document.getElementById("myPieChart");
        var myPieChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: {{ bank_cheque_count | chart }},
                datasets: [{
                    data: {{ bank_cheque_count | chart('data') }},
                    backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
                    hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }],
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    backgroundColor: "rgb(255,255,255)",
                    bodyFontColor: "#858796",
                    borderColor: '#dddfeb',
                    borderWidth: 1,
                    xPadding: 15,
                    yPadding: 15,
                    displayColors: false,
                    caretPadding: 10,
                },
                cutoutPercentage: 80,
            },
        });

    </script>
{% endblock %}