const G2 = window.G2;
  import colors from 'vuetify/es5/util/colors';
  const chartColors = [];
  Object.entries(colors).forEach((item) => {
    chartColors.push(item[1].base);
  });
  
  export default {
    name: 'v-chart',
  
    render (h) {
      const data = {
        staticClass: 'v-chart',
        ref: 'canvas',
        on: this.$listeners
      };
      return h('div', data);
    },
  
    props: {
      option: Object,
      height: Number,
    },
    data: () => ({
      chartInstance: null,
    }),
  
    methods: {
      init () {
        this.chartInstance = new G2.Chart({
          container: this.$refs.canvas,
          forceFit: true,
          height: window.innerWidth
        });
  
      },
      resize () {
        this.chartInstance.resize();
      },
      clean () {
        window.removeEventListener('resize', this.chartInstance.resize);
        this.chartInstance.dispose();
      }    
    },
    mounted () {
      this.init();
      window.addEventListener('resize', () => {
        this.resize();
      });
    },
    beforeDestroy () {
      this.clean();
    }
  };