@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-6">
            今年 ({{ $data['thisYearPaymentGroup']['year'] }}) 總收入 ： {{ $data['thisYearPaymentGroup']['sum'] }}
            <canvas id="myChart" width="400" height="400"></canvas>
            <script>
                let D = {{ Js::from( $data['thisYearPaymentGroup']['values']) }},
                    dataset = Array(12).fill(0)
                for(let i in dataset) {
                    i = parseInt(i)
                    if(D[i + 1] !== undefined) {
                        dataset[i] = D[i + 1]
                    }
                }
                const ctx = document.getElementById('myChart');
                const myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [1 ,2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                        datasets: [{
                            label: '收入',
                            data: dataset,
                            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)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            </script>


        </div>
    </div>
</div>
@endsection