Vue.component('radar-chart', {
    extends: VueChartJs.Radar,
    props:['data','labels','infolabel','infocollor'],
    data() {
        return {
            gradient: null,
            gradient2: null,
            datasets: [],
            options:{responsive: true, maintainAspectRatio: false}
        };
    },
    computed:{},
    methods:{
        setData() {
            var that = this
            for (const key in this.data) {
                const d = that.data[key]
                const l = that.infolabel[key]
                const c = that.infocollor[key]
                this.datasets.push({
                    label: l,
                    borderColor: c,
                    pointBackgroundColor: "white",
                    borderWidth: 1,
                    pointBorderColor: "white",
                    pointHoverBackgroundColor: l,
                    pointHoverBorderColor: "rgba(179,181,198,1)",
                    backgroundColor: this.gradient,
                    data: d
                })
            }
        },
        setChartCollors(){
            this.gradient = this.$refs.canvas.getContext("2d").createLinearGradient(0, 0, 0, 450)
            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 = this.$refs.canvas.getContext("2d").createLinearGradient(0, 0, 0, 450)
            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()
        },
        runChart(){
            this.setData()
            this.renderChart(
                {
                    labels: this.labels,
                    datasets: this.datasets
                },
                this.options
            )
        }

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