<script>
import { defineComponent } from 'vue'
import {Line,Bar } from 'vue3-chart-v2'

export default defineComponent({
  name: 'MonthlyChart',
  extends: Line,
  //props: [ "chartData", "chartOptions", "update" ],


  props: {
    chartData: {
      type: Object,
      required: true
    },
    chartOptions: {
      type: Object,
      required: false
    },
    update: {
      type: Number
    },
  },
  
  mounted () {
    
      this.renderChart(this.chartData, this.chartOptions)
    // Overwriting base render method with actual data.
    // this.renderChart({
    //   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    //   datasets: [
    //     {
    //       label: 'GitHub Commits',
    //       backgroundColor: '#f87979',
    //       data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
    //     }
    //   ],
    //   options: {
    //                 responsive: true,
    //                 maintainAspectRatio: false,
    //             }
      
    // })
  },
  watch: {
    update: {
      handler: function () {
        this._chart.destroy();
        this.renderChart(this.chartData, this.chartOptions)
       //console.log(this.chartData)
       //this.renderChart.update();
       
      //this._chart.update();
      }
    }
  }
})
</script>