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/ChartJS/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <div class="row">
      <div class="col-md-6">
        <corals-checkbox field="is_limited" label="Limited Activities" :form="form" @change="check"/>
      </div>
      <div class="col-md-6" v-if="this.user">
        <label v-if="user.employee_type !== 'part_time'">
          Expected Days: {{ expectedWorkingDays }}</label>
      </div>
    </div>
    <pie-chart :pie-chart-data="pieChartData" class="di-370" :pie-chart-options="pieChartOptions" v-if="chartDataReady"/>
    <b-skeleton type="avatar" v-else class="di-370"></b-skeleton>
  </div>
</template>


<script>
import PageHeader from "@/components/layout/PageHeader";
import EntriesIndex from "@/components/Entries/Index";
import EntriesHoursLineChart from "@/components/ChartJS/EntriesHoursLineChart";
import PieChart from "@/components/ChartJS/PieChart";

export default {
  name: "ActivitiesHoursChartsData",
  props: {
    urlKey: {
      required: true
    },
    form: {
      required: true
    },
    user: {
      required: false
    }
  },
  components: {EntriesHoursLineChart, EntriesIndex, PageHeader, PieChart},

  async fetch() {
    this.loadActivitiesChartsData();
  },
  data() {
    return {
      pieChartData: {},
      pieChartOptions: {},
      expectedWorkingDays: null,
      reloadEntriesHoursLineChart: false,
      chartDataReady: false,
      currentTabIndex: 0,
    }
  },
  methods: {
    check(args) {
      this.loadActivitiesChartsData();
    },
    loadActivitiesChartsData() {
      let url = `timesheet/charts/${this.urlKey}/get-charts-data`;
      this.chartDataReady = false;
      this.form.post(url).then(({data: response}) => {
        this.pieChartData = response.data;
        this.expectedWorkingDays = response.data.expectedWorkingDays;
        this.chartDataReady = this.pieChartData && Object.keys(this.pieChartData).length;
      })
    }
  },
  computed: {}
}
</script>

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