import { Pie, mixins } from 'vue-chartjs';

export default {
  name: 'pie-chart',
  extends: Pie,
  mixins: [mixins.reactiveProp],
  props: {
    extraOptions: Object,
    gradientColors: {
      type: Array,
      default: () => [
        'rgba(72,72,176,0.2)',
        'rgba(72,72,176,0.1)',
        'rgba(119,52,169,0)'
      ],
      validator: val => {
        return val.length > 1;
      }
    },
    gradientStops: {
      type: Array,
      default: () => [1, 0.4, 0],
      validator: val => {
        return val.length > 1;
      }
    }
  },
  data() {
    return {
      ctx: null
    };
  },
  methods: {
    updateGradients(chartData) {
      if (!chartData) return;
      const ctx =
        this.ctx || document.getElementById(this.chartId).getContext('2d');
       const colors=["0xFF0000","0xFFFF00"]
     
      chartData.datasets.forEach(set => {
        if (!set.backgroundColor) {
           set.backgroundColor = "rgba(119,52,169,1)";
        }
      });
    }
  },
  mounted() {
    this.$watch(
      'chartData',
      (newVal, oldVal) => {
        this.updateGradients(newVal);
        if (!oldVal) {
          this.renderChart(this.chartData, this.extraOptions);
        }
      },
      { immediate: true }
    );
  }
};