<template>
  <b-col cols="12" lg="6">
    <div class="card h-100 shadow-sm">
      <div class="card-header">
        <chart-title :legends="chartLegends" :title="$t('Common.Terminology.TotalBV')" />
      </div>
      <div v-if="!isBusy && totalGcvData !== null" class="card-body">
        <wave-chart
          class="chart"
          :labels="totalGcvData.labels"
          :data="totalGcvData.data"
          :callback="totalGcvData.callback"
          :plugin="totalGcvData.plugin"
        />
      </div>
      <div v-else class="text-center text-primary m-lg-auto vh-25 pt-5">
        <b-spinner class="mx-2" />
        <strong class="h4">{{ $t('Common.Loading') }}</strong>
      </div>
    </div>
  </b-col>
</template>
<script>
import { mapGetters } from 'vuex'
import WaveChart from './WaveChart'
import ChartTitle from './ChartTitle'

export default {
  name: 'GcvLineChart',
  components: { WaveChart, ChartTitle },
  props: {
    totalGcvData: { required: true },
    isBusy: { type: Boolean, default: false },
  },
  computed: {
    ...mapGetters(['isLoading', 'getMemberDetails']),
    chartLegends() {
      return this.$helpers.getValue(this.totalGcvData, 'legends') || []
    },
  },
}
</script>
