luos/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue

<template>
  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
    <div class="p-1 v-flex">
      <h6 class="v-search-title">
        {{ $t("ID_DRILL_DOWN_NUMBER_TASKS_PROCESS") }}
      </h6>
      <div>
        <BreadCrumb
          :options="breadCrumbs.data"
          :settings="settingsBreadcrumbs"
        />
        <ProcessPopover
          :options="optionsProcesses"
          @onChange="onChangeSearchPopover"
          target="pm-task-process"
          ref="pm-task-process"
          @onUpdateColumnSettings="onUpdateColumnSettings"
        />
        <div class="vp-width-p40 vp-inline-block">
          <multiselect
            v-model="category"
            :options="optionsCategory"
            :searchable="false"
            :close-on-select="true"
            :show-labels="false"
            track-by="id"
            label="name"
            @select="changeOption"
          ></multiselect>
        </div>
        <label class="vp-inline-block vp-padding-l20">{{ $t("ID_TOP10") }}</label>
        <div class="vp-inline-block">
          <b-form-checkbox
            v-model="top"
            name="check-button"
            @change="changeOption"
            switch
          >
          </b-form-checkbox>
        </div>
        <b-popover
          ref="popover"
          :target="popoverTarget"
          variant="secondary"
          placement="right"
        >
          <div class="vp-chart-minipopover">
            <div class="vp-align-right vp-flex1">
              <button
                type="button"
                class="btn btn-link btn-sm"
                @click="onClickDrillDown"
              >
                <i class="fas fa-chart-line"></i>
                {{ $t("ID_DRILL") }}
              </button>
            </div>
            <div class="vp-flex1">
              <button
                type="button"
                class="btn btn-link btn-sm"
                @click="onClickData"
              >
                <i class="fas fa-th"></i>
                {{ $t("ID_DATA") }}
              </button>
            </div>
          </div>
        </b-popover>
        <div class="vp-inline-block vp-right vp-padding-r40">
          <h4
            class="v-search-title"
            @click="showProcessesPopover"
            id="pm-task-process"
          >
            <i class="fas fa-cog"></i>
          </h4>
        </div>
      </div>
      <apexchart
        ref="LevelOneChart"
        :width="width"
        :options="optionsBar"
        :series="seriesBar"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import jquery from "jquery";
import Api from "../../api/index";
import BreadCrumb from "../../components/utils/BreadCrumb.vue";
import ProcessPopover from "./ProcessPopover.vue";
import Multiselect from "vue-multiselect";
import eventBus from "./../EventBus/eventBus";

export default {
  name: "VueChartLvOne",
  mixins: [],
  components: {
    Multiselect,
    BreadCrumb,
    ProcessPopover,
  },
  props: ["data", "breadCrumbs"],
  data() {
    let that = this;
    return {
      popoverTarget: "",
      showPopover: false,
      category: null,
      dataProcesses: null, //Data API processes
      settingsBreadcrumbs: [
        {
          class: "fas fa-info-circle",
          tooltip: this.$t("ID_TASK_RISK_LEVEL1_INFO"),
          onClick() {},
        },
      ],
      optionsCategory: [],
      optionsProcesses: [],
      selectedProcesses: [],
      top: false,
      width: 0,
      totalCases: [],
      currentSelection: null,
      seriesBar: [
        {
          data: [],
        },
      ],
      optionsBar: {
        chart: {
          type: "bar",
          id: "LevelOneChart",
          toolbar: {
            show: false,
          },
          events: {
            click: function (event, chartContext, config) {
              that.$refs.popover.$emit("close");
              if (config.dataPointIndex != -1) {
                that.currentSelection = that.totalCases[config.dataPointIndex];
                that.onShowDrillDownOptions(
                  event.currentTarget,
                  config.dataPointIndex
                );
              }
            },
          },
        },
        plotOptions: {
          bar: {
            barHeight: "100%",
            distributed: true,
            horizontal: true,
          },
        },
        colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"],
        dataLabels: {
          enabled: false,
        },
        xaxis: {
          categories: [],
        },
        tooltip: {
          x: {
            show: false,
          },
          y: {
            title: {
              formatter: function () {
                return "";
              },
            },
          },
        },
      },
    };
  },
  created() {},
  mounted() {
    this.getBodyHeight();
    this.getCategories();
    this.getProcesses();
  },
  watch: {},
  computed: {},
  updated() {},
  beforeCreate() {},
  methods: {
    /**
     * Return the height for Vue Card View body
     */
    getBodyHeight() {
      this.width = window.innerHeight;
    },
    /**
     * Get Categories form API
     */
    getCategories() {
      let that = this;
      Api.filters
        .categories()
        .then((response) => {
          that.formatDataCategories(response.data);
        })
        .catch((e) => {
          console.error(err);
        });
    },
    /**
     * Get Processes form API
     * @param {string} query - Text value in search popover
     */
    getProcesses(query) {
      let that = this;
      Api.filters
        .processList(query || "")
        .then((response) => {
          that.formatDataProcesses(response.data);
          that.changeOption({
            id: "all",
          });
        })
        .catch((e) => {
          console.error(err);
        });
    },
    /**
     * Format categories for multiselect
     * @param {*} data
     */
    formatDataCategories(data) {
      let array = [];
      array.push({
        name: this.$t("ID_ALL_CATEGORIES"),
        id: "all",
      });
      array.push({
        name: this.$t("ID_PROCESS_NONE_CATEGORY"),
        id: "0",
      });
      _.each(data, (el) => {
        array.push({ name: el["CATEGORY_NAME"], id: el["CATEGORY_ID"] });
      });
      this.optionsCategory = array;
      this.category = array[0];
    },
    /**
     * Format processes for popover
     * @param {*} data
     */
    formatDataProcesses(data) {
      let sels = [],
        labels = [],
        array = [];

      _.each(data, (el) => {
        array.push({ value: el["PRO_TITLE"], key: el["PRO_ID"] });
        sels.push(el["PRO_ID"]);
        labels;
      });
      this.optionsProcesses = array;
      this.selectedProcesses = sels;

      //Update the labels
      this.dataProcesses = data;
    },
    /**
     * Change the options in TOTAL CASES BY PROCESS
     * @param {*} option
     */
    changeOption(option) {
      let that = this,
        dt = {};
      if (this.data.length > 1) {
        dt = {
          category: option.id,
          caseList: this.data[1].id.toLowerCase(),
          processes: this.selectedProcesses,
          top: this.top,
        };
        option.id == "all" ? delete dt.category : null;
        Api.process
          .totalCasesByProcess(dt)
          .then((response) => {
            that.totalCases = response.data;
            that.formatTotalCases(response.data);
          })  
          .catch((e) => {
            console.error(err);
          });
      }
    },
    /**
     * Show the processes popover
     */
    showProcessesPopover() {
      this.$root.$emit("bv::show::popover", "pm-task-process");
      this.$refs["pm-task-process"].setOptions(this.optionsProcesses);
      this.$refs["pm-task-process"].setSelectedOptions(this.selectedProcesses);
    },
    /**
     * Format response form BE to chart
     * @param {*} data
     */
    formatTotalCases(data) {
      let serie = [],
        labels = [];
      _.each(data, (el) => {
        serie.push(el["TOTAL"]);
        labels.push(el["PRO_TITLE"]);
      });

      this.$refs["LevelOneChart"].updateOptions({ labels: labels });
      this.$apexcharts.exec("LevelOneChart", "updateSeries", [
        {
          data: serie,
        },
      ]);
    },
    /**
     * Update list processes in chart
     * @param {*} data
     */
    onUpdateColumnSettings(data) {
      let res;
      this.selectedProcesses = data;
      res = _.intersectionBy(this.totalCases, data, (el) => {
        if (_.isNumber(el)) {
          return el;
        }
        if (_.isObject(el) && el["PRO_ID"]) {
          return el["PRO_ID"];
        }
      });
      this.formatTotalCases(res);
    },
    /**
     * Update labels in chart
     * @param {*} processes
     */
    updateLabels(processes) {
      let labels = [];
      _.each(processes, (el) => {
        labels.push(el["PRO_TITLE"]);
      });
      this.$refs["LevelOneChart"].updateOptions({ labels: labels });
    },
    /**
     * UPdate serie in chart
     * @param {*} processes
     */
    updateSerie(processes) {
      let labels = [];
      _.each(processes, (el) => {
        labels.push(el["TOTAL"]);
      });
      this.$refs["LevelOneChart"].updateOptions({ labels: labels });
    },
    /**
     * Force update view when update level
     */
    forceUpdateView() {
      this.changeOption({
        id: 0,
      });
    },
    /**
     * Event handler change input search popover
     * @param {string} query - value in popover search input
     */
    onChangeSearchPopover(query) {
      this.getProcesses(query);
    },
    /**
     * Show popover drill down options
     * @param {objHtml} target
     * @param {number} index
     */
    onShowDrillDownOptions(target, index) {
      let obj,
        dt,
        that = this;
      if (index != -1) {
        obj = jquery(target).find("path")[index];
        dt = this.dataProcesses[index];
        this.popoverTarget = obj.id;
        setTimeout(() => {
          that.$refs.popover.$emit("open");
        }, 200);
      }
    },
    /**
     * Show popover drill down options
     */
    onClickDrillDown() {
      this.$emit("updateDataLevel", {
        id: this.currentSelection["PRO_ID"],
        name: this.currentSelection["PRO_TITLE"],
        level: 2,
        data: this.currentSelection,
      });
    },
    /**
     * Show popover data options
     */
    onClickData() {
      let taskList = this.data[1].id.toLowerCase(),
        obj = {
          autoshow: false,
          fieldId: "processName",
          filterVar: "process",
          label: "",
          options: {
            label: this.currentSelection["PRO_TITLE"],
            value: this.currentSelection["PRO_ID"],
          },
          value: this.currentSelection["PRO_ID"],
        };
      eventBus.$emit("home::update-settings", {
        data: [obj],
        key: "filters",
        page: taskList,
        type: "normal",
      });
      eventBus.$emit("home::sidebar::click-item", taskList);
    },
  },
};
</script>
<style>
.vp-task-metrics-label {
  display: inline-block;
}

.vp-width-p40 {
  width: 40%;
}

.vp-inline-block {
  display: inline-block;
}

.vp-padding-l20 {
  padding-left: 20px;
}

.vp-padding-r40 {
  padding-right: 40px;
}

.vp-right {
  float: right;
}

.vp-chart-minipopover {
  display: flex;
}

.vp-flex1 {
  flex: 1;
}
</style>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>