Vue.component('line-chart', {
    extends: VueChartJs.Line,
    props: ['data', 'labels', 'infolabel', 'infocollor'],
    data() {
        return {
            gradient: null,
            gradient2: null,
            datasets: [],
            options: {responsive: true, maintainAspectRatio: false}
        };
    },
    methods: {
        setData() {
            var that = this
            var order = [];
            for (const key in this.data) {
                const d = that.data[key]
                const l = that.infolabel[key]
                const c = that.infocollor[key]
                let gradient = this.$refs.canvas
                    .getContext("2d")
                    .createLinearGradient(0, 0, 0, 250);
                gradient.addColorStop(0, this.hexToRgbA(c, 0.5));
                gradient.addColorStop(0.5, this.hexToRgbA(c, 0.25));
                gradient.addColorStop(0.1, this.hexToRgbA(c, 0));
                order[d.pop()] = {
                    label: l,
                    borderColor: this.hexToRgbA(c, 0),
                    pointBackgroundColor: 'white',
                    borderWidth: 0.5,
                    pointBorderColor: this.hexToRgbA(c, 0), //white',
                    backgroundColor: gradient,
                    data: d
                }
            }
            for (const orderKey in order) {
                let val = order[orderKey]
                if (val.hasOwnProperty('label')) {
                    this.datasets.push(val)
                }
            }
        },
        setChartCollors() {
            this.gradient = this.$refs.canvas
                .getContext("2d")
                .createLinearGradient(0, 0, 0, 250);
            this.gradient2 = this.$refs.canvas
                .getContext("2d")
                .createLinearGradient(0, 0, 0, 250);

            this.gradient.addColorStop(0, "rgba(255, 0,0, 0.5)");
            this.gradient.addColorStop(0.5, "rgba(255, 0, 0, 0.25)");
            this.gradient.addColorStop(1, "rgba(255, 0, 0, 0)");

            this.gradient2.addColorStop(0, "rgba(0, 231, 255, 0.9)");
            this.gradient2.addColorStop(0.5, "rgba(0, 231, 255, 0.25)");
            this.gradient2.addColorStop(1, "rgba(0, 231, 255, 0)");
            this.runChart()
        },
        hexToRgbA(hex, pres) {
            var c;
              if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
                c = hex.substring(1).split('');
                if (c.length == 3) {
                    c = [c[0], c[0], c[1], c[1], c[2], c[2]];
                }
                c = '0x' + c.join('');
                return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + pres + ')';
            }
            return 'lightblue'
        },
        runChart() {
            this.setData()
            this.renderChart(
                {
                    labels: this.labels,
                    datasets: this.datasets
                },
                this.options
            )
        }

    },
    mounted() {
        this.setChartCollors()
    }
});