<div class="col-6">
    <div class="card h-100">
        <div class="card-body">
            @if(sizeof($montants['mois']) > 0)
                <canvas id="montants-mois-chart-tdb-commons" width="300" height="300"></canvas>
            @else
                <h5 class="card-title text-center font-weight-bold">Montant d'achat traités par mois</h5>
                <p class="card-text">Pas de données disponible.</p>
            @endif
        </div>
    </div>
</div>

<script>
    $(document).ready(function (){
        @if(sizeof($montants['mois']) > 0)
        new Chart($('#montants-mois-chart-tdb-commons'), {
            type: 'bar',
            data: {
                datasets: [{
                    label: 'Montant de référence',
                    yAxisID: 'left',
                    data: [{{ implode(',', $montants['montant_reference']) }}],
                    backgroundColor: backgroundColor[0],
                    borderColor: borderColor[0],
                    borderWidth: 1
                }, {
                    label: 'Gains cibles',
                    data: [{{ implode(',', $montants['gains_cible']) }}],
                    yAxisID: 'right',
                    type: 'line',
                    fill: false,
                    pointBackgroundColor: backgroundColor[1],
                    pointBorderColor: borderColor[1],
                    pointHoverBackgroundColor: backgroundColor[1],
                    pointHoverBorderColor: borderColor[1],
                    borderColor: borderColor[1],
                }, {
                    label: 'Gains notifiés',
                    data: [{{ implode(',', $montants['gains_notifie']) }}],
                    yAxisID: 'right',
                    type: 'line',
                    fill: false,
                    pointBackgroundColor: backgroundColor[2],
                    pointBorderColor: borderColor[2],
                    pointHoverBackgroundColor: backgroundColor[2],
                    pointHoverBorderColor: borderColor[2],
                    borderColor: borderColor[2],
                }],
                labels: [{!! '"' . implode('","', $montants['mois']) . '"' !!}]
            },
            options: {
                title: {
                    display: true,
                    text: 'Montants d\'achats traités par mois',
                    fontSize: 18,
                    fontStyle: 'normal',
                    fontFamily: 'Nunito',
                    fontColor: '#222529'
                },
                responsive: true,
                scales: {
                    yAxes: [{
                        id: 'left',
                        type: 'linear',
                        position: 'left',
                        ticks: {
                            beginAtZero: true
                        }
                    }, {
                        id: 'right',
                        type: 'linear',
                        position: 'right',
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                plugins: {
                    datalabels: {
                        display: false,
                    }
                }
            },
        });
        @endif
    });
</script>
