<template>
    <div class="col-8">
        <div class="card">
            <div class="card-body">
                <div class="row b-b b-grey">
                    <loading-component  v-show="isLoading"></loading-component>
                    <div class="col">
                        <small class="fs-11 bold">CBM VS ORDERS</small>
                    </div>
                </div>
                <div class="row">
                    <canvas :id="this.id"></canvas>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Chart from 'chart.js';
    export default {
        props: {
            'id': {
                type: String,
                required: true
            }
        },
        data() {
            return {
                isLoading: false,
                months: [],
                cbm: [],
                orders: []
            }
        },
        mounted() {
            {
                this.monthInit();
                this.fetchData();
            }
        },
        methods: {
            fetchData() {
                this.isLoading = true;
                let urls = [route('api.report.cbm'), route('api.report.order')];

                Promise.all(urls.map(url => fetch(url).then(response => response.json()))).then(response => {
                    this.cbm = response[0];
                    this.orders = response[1];
                    this.isLoading = false;
                    this.createChart();
                });
            },
            monthInit() {
                const date = new Date();
                //replace with api call in future
                for (let i = 1; i <= new Date(date.getFullYear(), date.getMonth()+1, 0).getDate(); i++) {
                    this.months.push(i);
                }
            },
            createChart() {
                new Chart(this.id, {
                    type : 'line',
                    data : {
                        labels: this.months,
                        datasets: [{
                            'label' : "CBM",
                            'data' : this.cbm,
                            'borderColor' : '#ea336b',
                            'fill' : false
                        },{
                           'label' : "Orders",
                            'data' : this.orders,
                            'borderColor' : '#69b6f3',
                            'fill' : false
                        }]
                    },
                    options : {
                        scales: {
                            yAxes: [{
                                gridLines: {
                                    display: false
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    beginAtZero: true
                                },
                                gridLines: {
                                    display: false
                                }
                            }]
                        }
                    }
                })
            }
        }
    }
</script>