cssd-back/resources/js/vue/views/Statistics/Chart.vue

<template>
  <div>
    <v-form ref="form">
      <v-container grid-list-xs>
        <material-card color="black" title="Search Result">
          <v-layout align-center justify-center wrap class="px-5 my-3">
            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
              <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
              <v-autocomplete :items="medicalCenters" item-text="name" item-value="id" v-model="form.medicalCenterId" @change="fillUsers" label="Hospital" color="black" class="pa-2"></v-autocomplete>
            </v-flex>
            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
              <v-icon class="fa fa-user mr-2 WM-Margin-B-8"></v-icon>
              <v-autocomplete :items="users" item-text="name" item-value="id" v-model="form.userId" label="User" color="black" class="py-3 pr-3"></v-autocomplete>
            </v-flex>
            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
              <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
              <v-autocomplete :items="testTypes" item-text="name" item-value="id" v-model="form.testTypeId" label="TestType" color="black" class="py-3 pr-3"></v-autocomplete>
            </v-flex>
            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
              <v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
              <v-autocomplete :items="result" v-model="form.result" label="Result" color="black" class="py-3 pr-3"></v-autocomplete>
            </v-flex>
            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
              <v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
              <v-autocomplete :items="verify" v-model="form.verify" label="Verify" color="black" class="py-3 pr-3"></v-autocomplete>
            </v-flex>
            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
              <v-icon class="fas fa-line-chart mr-2 WM-Margin-B-8"></v-icon>
              <v-autocomplete :items="type" v-model="form.type" label="Type" color="black" class="py-3 pr-3"></v-autocomplete>
            </v-flex>
            <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
              <v-icon class="far fa-calendar-alt mr-2"></v-icon>
              <v-menu
                lazy
                :close-on-content-click="true"
                transition="v-scale-transition"
                offset-y
                v-model="fromMenu"
              >
                <v-text-field
                  required
                  slot="activator"
                  label="FromDate"
                  color="black"
                  v-model="form.fromPicker">
                </v-text-field>
                <v-date-picker
                  color="pink"
                  no-title
                  v-model="form.fromPicker"
                  :date-format="date => new Date(date).toDateString()"
                ></v-date-picker>
              </v-menu>
            </v-flex>
            <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
              <v-icon class="far fa-calendar-alt mr-2"></v-icon>
              <v-menu
                lazy
                :close-on-content-click="true"
                transition="v-scale-transition"
                offset-y
                v-model="upToMenu"
              >
                <v-text-field
                  required
                  slot="activator"
                  label="UpToDate"
                  color="black"
                  v-model="form.upToPicker">
                </v-text-field>
                <v-date-picker
                  color="pink"
                  no-title
                  v-model="form.upToPicker"
                  :date-format="date => new Date(date).toDateString()"
                ></v-date-picker>
              </v-menu>
            </v-flex>
            <v-spacer></v-spacer>
            <v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-right">
              <v-btn
                class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
                style="padding:10px 60px;"
                @click="submitForm"
              >
                <v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
                <span class="black--text">GO</span>
              </v-btn>
            </v-flex>
          </v-layout>
          <v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult">
            <v-divider></v-divider>
          </v-layout>
        </material-card>
      </v-container>
    </v-form>
    <div v-if="chart" class="small">
      <pie-chart v-if="form.type === 'PieChart'" :chart-data="datacollection"></pie-chart>
      <bar-chart v-else :chart-data="datacollection"></bar-chart>
    </div>
  </div>
</template>

<script>
import BarChart from "@/plugins/chart/BarChart.js";
import PieChart from "@/plugins/chart/PieChart.js";
import { ApiService } from "@/services";
import { urls } from "@/config/urls";

export default {
  components: {
    BarChart,
    PieChart
  },
  data() {
    return {
      datacollection: null,
      fromMenu: '',
      upToMenu: '',
      verify: ['Verified', 'NotVerified'],
      result: ['Accept', 'Failed'],
      type: ['BarChart', 'PieChart'],
      users: [],
      medicalCenters: [],
      testTypes: [],
      form: {
        medicalCenterId: null,
        userId: null,
        testTypeId: null,
        result: null,
        verify: null,
        type: 'PieChart',
        fromPicker: '',
        upToPicker: '',
      },
      chart: false
    };
  },
  created() {
    this.load();
  },
  methods: {
    fillData(options) {
      this.datacollection = {
        labels: options.labels,
        // labels: [this.getRandomInt(), this.getRandomInt()],
        datasets: [
          {
            label: "Data One",
            backgroundColor: ["#f87979", "#ccc"],
            data: options.data,
            // data: [this.getRandomInt(), this.getRandomInt()],
          }
        ]
      };
    },
    async load() {
      const result = await ApiService.get(urls.listFilterItemsTestResult);
      if (result && result.status == 200) {
        this.medicalCenters = result.data.data.MedicalCenters;
        this.testTypes = result.data.data.TestTypes;
      }
    },
    async fillUsers() {
      const result = await ApiService.get(urls.listOpertorMedicalCenter(this.form.medicalCenterId));
      if (result && result.status == 200) {
        this.users = result.data.data.users;
      }
    },
    async submitForm() {
      const result = await ApiService.post(urls.statistics, this.form);
      if (result && result.status == 200) {
        this.fillData(result.data.data);
        this.chart = true;
      }
    },
  }
};
</script>

<style>
.small {
  max-width: 600px;
  margin: 150px auto;
}
.v-btn--floating {
    padding: 0!important;
}
.theme--light.v-btn.v-btn--flat {
    color: rgba(0,0,0,.87)!important;
}
.v-btn--floating, .v-btn--icon:before {
    border-radius: 50%!important;
}
</style>