Vue.component('area-chart', {
    extends: VueChartJs.PolarArea,
    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",
                        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()

    }
});