Chart.vue

<template>
  <div class="card graph-card">
    <h5 class="card-header">Usuarios activo e inactivos</h5>
    <div class="card-body" v-loading="isLoading">
      <div ref="chart"></div>
    </div>
  </div>
</template>

<script>
import c3 from 'c3'
import {getUsersByStatus} from '@/services/reports'

export default {
  name: 'ReportChartLineUsersByStatus',
  props: {
    pageId: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      reportDataActives: null,
      reportDataInactive: null,
      $chart: null,
      loadingActive: false,
      loadingInactive: false
    }
  },
  computed: {
    isLoading () {
      return (this.loadingActive) || (this.loadingInactive)
    }
  },
  async mounted () {
    this.$chart = c3.generate({
      bindto: this.$refs.chart,
      data: {
        x: 'x',
        columns: []
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            count: 15,
            format: '%Y-%m-%d'
          }
        },
        y: {
          min: 0,
          padding: {
            top: 100,
            bottom: 0
          }
        }
      }
    })
    this.createGraph()
  },
  methods: {
    async createGraph () {
      this.loadingActive = true
      this.loadingInactive = true
      await getUsersByStatus('active', this.pageId).then((response) => {
        this.reportDataActives = response.data
      }).catch(err => console.error(err))
      await this.$chart.load({
        columns: [
          ['x', ...this.reportDataActives.meta.labels],
          ['Activos', ...this.reportDataActives.data]
        ]
      })
      this.loadingActive = false
      await getUsersByStatus('inactive', this.pageId).then((response) => {
        this.reportDataInactive = response.data
      }).catch(err => console.error(err))
      await this.$chart.load({
        columns: [
          ['Inactivos', ...this.reportDataInactive.data]
        ]
      })
      this.loadingInactive = false
    }
  },
  watch: {
    pageId () {
      this.createGraph()
    }
  }
}
</script>