Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/ts.corals.io/frontend/components/Dashboard/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <div class="mb-4 mt-2 text-center"><strong>{{ chartLabel }}</strong></div>

    <b-skeleton type="avatar" v-if="!chartDataReady" class="di-370"></b-skeleton>

    <div v-else>
      <pie-chart v-if="pieChartData && Object.keys(pieChartData).length"
                 :pie-chart-data="pieChartData" class="di-370" :pie-chart-options="pieChartOptions"/>

      <div v-else class="text-center">No Data!</div>
    </div>
  </div>
</template>

<script>
import PieChart from "@/components/ChartJS/PieChart";

export default {
  name: 'ExpensesAndIncomesCategory',
  props: {
    dashboard: {
      required: true
    },
    widget: {
      required: true
    },
    from_date:{
      required: true
    },
    to_date:{
      required: true
    },
  },
  components: {PieChart},
  data() {
    return {
      pieChartData: {},
      pieChartOptions: {},
      chartDataReady: false,
      chartLabel: '',
    }
  },
  async fetch() {
    let url = `timesheet/widgets/${this.dashboard}/${this.widget}?from_date=${this.from_date}&to_date=${this.to_date}`;

    await this.$axios.get(url).then(({data: response}) => {
      this.pieChartData = response.chartData;
      this.chartLabel = response.label;
      this.chartDataReady = true;
    });

  },
}
</script>
<style scoped>
.di-370 {
  height: 370px;
  width: 370px;
  margin-left: auto;
  margin-right: auto;
}
</style>