<template>
	<CChartBar
		:datasets="computedDatasets"
		:options="computedOptions"
		:labels="labels"
	/>
</template>

<script>
   import CoreUtils from '~/mixins/CoreUtils'

   export default {
      name: 'CChartBarSimple',
      mixins: [CoreUtils],
      props: {
         datasets: Array,
         labels: [Array, String],
         options: Object,
         plugins: Array,
         backgroundColor: {
            type: String,
            default: 'rgba(0,0,0,.2)'
         },
         pointHoverBackgroundColor: String,
         dataPoints: {
            type: Array,
            default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
         },
         label: {
            type: String,
            default: 'Sales'
         },
         pointed: Boolean
      },
      computed: {
         defaultDatasets() {
            return [
               {
                  data: this.dataPoints,
                  backgroundColor: this.getColor(this.backgroundColor),
                  pointHoverBackgroundColor: this.getColor(this.pointHoverBackgroundColor),
                  label: this.label,
                  barPercentage: 0.5,
                  categoryPercentage: 1
               }
            ]
         },
         defaultOptions() {
            return {
               maintainAspectRatio: false,
               legend: {
                  display: false
               },
               scales: {
                  xAxes: [{
                     display: false
                  }],
                  yAxes: [{
                     display: false
                  }]
               }
            }
         },
         computedDatasets() {
            return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
         },
         computedOptions() {
            return this.deepObjectsMerge(this.defaultOptions, this.options || {})
         }
      }
   }
</script>
