--|--h

import { HorizontalBar } from 'vue-chartjs'

export default {
    name: 'diagram',
    extends: HorizontalBar,
    data: () => ({
        chartData: '',
        score: {},
        value: [],
        keys: [],
        options: {
            scales: {
                xAxes: [{
                    ticks: {
                        //beginAtZero: true
                    }
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        barThickness: 50,
                        mirror: true
                    }
                }]
            },
            responsive: true,
            legend: {
                display: false,
            },
        },

        responsive: true,
        maintainAspectRatio: false

    }),
    created () {

        // Overwriting base render method with actual data.
        this.$http({
            method: 'get',
            url: this.base_url + '/exam/api/score/' + this.$store.state.user.id + '/',

            auth: {
                username: 'l360_mobile_app',
                password: 'itsd321#'
            },
        }).then(res => {

            console.log(res);
            if (res.status == '200') {
                console.log(res.data);
                this.score = res.data;
                for (let v  in  this.score) {
                    this.value.push(this.score[v]);
                }
                for (let key  in  this.score) {
                    this.keys.push(key);
                }


                console.log(this.keys);
                console.log(this.value);
            }
        });
        this.fillData()

    },
    mounted(){
        this.renderChart(this.chartData, this.options);


    },

    methods: {

        fillData ()  {
            this.chartData = {

                labels: this.keys,

                datasets: [
                    {
                        fillColor: "#1886d1",
                        strokeColor: "#101a4d",
                        label: "Label One",
                        //backgroundColor: '#f87979',
                        data: this.value,

                    }

                ],

            }
        }
    },
    watch: {
        data: function () {
            this._chart.destroy();
            this.renderChart(this.chartData, this.options);
        },
    },


}