update

resources/assets/js/api/Process.js

@@ -27,5 +27,13 @@ export let process = {
             data: {},
             keys: {}
         });
+    },
+    totalCasesByRange(dt) {
+      return Api.get({
+          service: "TOTAL_CASES_BY_RANGE",
+          method: "get",
+          params: dt,
+          keys: {}
+      });
   }
 };

resources/assets/js/api/Services.js

@@ -70,6 +70,7 @@
     DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}",
     LIST_TOTAL_CASES: "/metrics/list-total-cases",
     TOTAL_CASES_BY_PROCESS:"/metrics/total-cases-by-process",
+    TOTAL_CASES_BY_RANGE:"/metrics/process-total-cases",
     CONFIG: "/home/config",
     GET_CONFIG: "/home/config/{id}/{name}",
     PAUSE_CASE: "/cases/{app_uid}/pause",

resources/assets/js/components/utils/BreadCrumb.vue

@@ -1,6 +1,6 @@
 <template>
   <nav aria-label="breadcrumb">
-    <ol class="breadcrumb">
+    <ol class="vp-breadcrumb">
       <li
         v-for="item in formatOptions(options)"
         :key="item.label"
@@ -14,6 +14,15 @@
           >{{ item.label }}</a
         >
       </li>
+      <div
+        v-for="item in settings"
+        :key="item.id"
+        class="vp-bread-crumbs-settings vp-float-right vp-inline-block"
+      >
+        <span @click="item.onClick">
+          <i :class="formatClass(item)"></i>
+        </span>
+      </div>
     </ol>
   </nav>
 </template>
@@ -22,7 +31,7 @@
 import _ from "lodash";
 export default {
   name: "BreadCrumb",
-  props: ["options"],
+  props: ["options", "settings"],
   data() {
     return {};
   },
@@ -37,17 +46,42 @@ export default {
           options[i].classObject = {
             "breadcrumb-item": true,
             active: true,
+            "vp-inline-block": true,
           };
         } else {
           options[i].classObject = {
             "breadcrumb-item": true,
             active: false,
+            "vp-inline-block": true,
           };
         }
       }
-      console.log("aquii");
       return options;
     },
+    formatClass(item) {
+      return item.class;
+    },
   },
 };
 </script>
+<style scoped>
+.vp-float-right {
+  float: right;
+}
+
+.vp-bread-crumbs-settings {
+  line-height: 20px;
+}
+
+.vp-breadcrumb {
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  list-style: none;
+  background-color: #e9ecef;
+  border-radius: 0.25rem;
+}
+
+.vp-inline-block {
+  display: inline-block;
+}
+</style>

resources/assets/js/home/TaskMetrics/DrillDown.vue

@@ -11,6 +11,7 @@
       v-for="item in loadItems(data, level)"
       :key="item.content"
       class="vp-padding-b10"
+      @click="onClick(item)"
     >
       <span class="vp-inline-block vp-padding-r10 vp-font-size-r1">
         {{ item.label }}
@@ -43,17 +44,23 @@ export default {
         {
           label: "Level",
           content: "0",
-					click() {},
+          click() {
+            that.$emit("onChangeLevel", 0);
+          },
         },
         {
           label: "Level",
           content: "1",
-					click() {},
+          click() {
+            that.$emit("onChangeLevel", 1);
+          },
         },
         {
           label: "Level",
           content: "2",
-					click() {},
+          click() {
+            that.$emit("onChangeLevel", 2);
+          },
         },
         {
           label: "Level",
@@ -82,7 +89,9 @@ export default {
         i++;
       });
       this.index = nindex;
+      if (nindex <= this.level) {
         item.click(item);
+      }
     },
     loadItems(items, index) {
       let array,
@@ -97,7 +106,6 @@ export default {
         }
         i++;
       });
-			console.log("aquiaaa");
       return array;
     },
     changeItem(item) {},

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

@@ -9,9 +9,13 @@
     </div>
     <modal-new-request ref="newRequest"></modal-new-request>
     <div class="d-inline-flex p-2">
-      <vue-charts @onChangeLevel="changeLevel" />
+      <vue-charts
+        ref="pm-vue-chart"
+        @onChangeLevel="changeLevel"
+        :level="level"
+      />
       <div class="vp-6"></div>
-      <drill-down :level="level" />
+      <drill-down :level="level" @onChangeLevel="updateVueChart" />
     </div>
   </div>
 </template>
@@ -49,6 +53,9 @@ export default {
     changeLevel(lv) {
       this.level = lv;
     },
+    updateVueChart(lv) {
+      this.$refs["pm-vue-chart"].onChangeLevel(lv);
+    },
   },
 };
 </script>

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

@@ -3,7 +3,10 @@
     <div class="p-1 v-flex">
       <h6 class="v-search-title">Number of Tasks Status per Process</h6>
       <div>
-        <BreadCrumb :options="dataBreadCrumbs(data)" />
+        <BreadCrumb
+          :options="breadCrumbs.data"
+          :settings="breadCrumbs.settings"
+        />
         <ProcessPopover
           :options="optionsProcesses"
           target="pm-task-process"
@@ -26,7 +29,12 @@
           $t("ID_MAFE_a4ffdcf0dc1f31b9acaf295d75b51d00")
         }}</label>
         <div class="vp-inline-block">
-          <b-form-checkbox v-model="top" name="check-button" switch>
+          <b-form-checkbox
+            v-model="top"
+            name="check-button"
+            @change="changeOption"
+            switch
+          >
           </b-form-checkbox>
         </div>
         <div class="vp-inline-block vp-right vp-padding-r40">
@@ -64,7 +72,7 @@ export default {
     BreadCrumb,
     ProcessPopover,
   },
-  props: ["data"],
+  props: ["data", "breadCrumbs"],
   data() {
     let that = this;
     return {
@@ -93,7 +101,6 @@ export default {
           events: {
             legendClick: function (chartContext, seriesIndex, config) {
               that.currentSelection = that.totalCases[seriesIndex];
-              console.log("LEGENDDDDDDDDDDDDD");
               that.$emit("updateDataLevel", {
                 id: that.currentSelection["PRO_ID"],
                 name: that.currentSelection["PRO_TITLE"],
@@ -217,7 +224,6 @@ export default {
       //Update the labels
       this.dataProcesses = data;
       this.updateLabels(data);
-      console.log("aaaaaaaaaaaaaaaaa aaaaaaa");
     },
     /**
      * Change the options in TOTAL CASES BY PROCESS
@@ -230,6 +236,7 @@ export default {
           category: option.id,
           caseList: this.data[0].id.toLowerCase(),
           processes: this.selectedProcesses,
+          top: this.top,
         };
         Api.process
           .totalCasesByProcess(dt)
@@ -266,26 +273,6 @@ export default {
         },
       ]);
     },
-    dataBreadCrumbs(options) {
-      let res = [],
-        that = this;
-      res.push({
-        label: "Start",
-        onClick() {
-          console.log("STARTTTTTTTTTT");
-          that.$emit("onChangeLevel", 0);
-        },
-      });
-      _.each(options, (el) => {
-        res.push({
-          label: el.id,
-          onClick() {
-            that.$emit("onChangeLevel", el.level);
-          },
-        });
-      });
-      return res;
-    },
     /**
      * Update list processes in chart
      */
@@ -316,7 +303,14 @@ export default {
       });
       this.$refs["LevelOneChart"].updateOptions({ labels: labels });
     },
-    
+    /**
+     * Force update view when update level
+     */
+    forceUpdateView() {
+      this.changeOption({
+        id: 0,
+      });
+    },
   },
 };
 </script>

resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue

@@ -3,25 +3,53 @@
     <div class="p-1 v-flex">
       <h6 class="v-search-title">Number of Tasks Status per Process</h6>
       <div>
-        <BreadCrumb :options="dataBreadCrumbs(data)" />
+        <BreadCrumb
+          :options="breadCrumbs.data"
+          :settings="breadCrumbs.settings"
+        />
         <div class="vp-width-p30 vp-inline-block">
-          <b-form-datepicker id="date-from" size="sm"></b-form-datepicker>
+          <b-form-datepicker
+            id="date-from"
+            :date-format-options="{
+              year: '2-digit',
+              month: '2-digit',
+              day: '2-digit',
+            }"
+            size="sm"
+            :placeholder="$t('ID_DELEGATE_DATE_FROM')"
+            v-model="dateFrom"
+            @input="changeOption"
+          ></b-form-datepicker>
         </div>
         <div class="vp-width-p30 vp-inline-block">
-          <b-form-datepicker id="date-to" size="sm"></b-form-datepicker>
+          <b-form-datepicker
+            id="date-to"
+            size="sm"
+            :date-format-options="{
+              year: '2-digit',
+              month: '2-digit',
+              day: '2-digit',
+            }"
+            :placeholder="$t('ID_DELEGATE_DATE_TO')"
+            v-model="dateTo"
+            @input="changeOption"
+          ></b-form-datepicker>
         </div>
         <div class="vp-inline-block">
-          <b-button-group size="sm">
-            <b-button variant="outline-secondary">{{ $t("ID_DAY") }}</b-button>
-            <b-button variant="outline-secondary">{{
-              $t("ID_MONTH")
-            }}</b-button>
-            <b-button variant="outline-secondary">{{ $t("ID_YEAR") }}</b-button>
-          </b-button-group>
+          <b-form-radio-group
+            id="btn-radios"
+            v-model="period"
+            :options="periodOptions"
+            button-variant="outline-secondary"
+            size="sm"
+            name="radio-btn-outline"
+            buttons
+            @change="changeOption"
+          ></b-form-radio-group>
         </div>
       </div>
       <apexchart
-        ref="apexchart1"
+        ref="LevelTwoChart"
         :width="width"
         :options="options"
         :series="series"
@@ -35,108 +63,62 @@ import _ from "lodash";
 import Api from "../../api/index";
 import Multiselect from "vue-multiselect";
 import BreadCrumb from "../../components/utils/BreadCrumb.vue";
-
+import moment from "moment";
 export default {
-  name: "VueChartLvOne",
+  name: "VueChartLvTwo",
   mixins: [],
   components: {
     Multiselect,
     BreadCrumb,
   },
-  props: ["data"],
+  props: ["data", "breadCrumbs"],
   data() {
     let that = this;
     return {
-      category: null,
-      optionsCategory: [],
-      top: false,
+      dateFrom: "",
+      dateTo: "",
+      period: "",
+      periodOptions: [
+        { text: this.$t("ID_DAY"), value: "day" },
+        { text: this.$t("ID_MONTH"), value: "month" },
+        { text: this.$t("ID_YEAR"), value: "year" },
+      ],
+      dataCasesByRange: [],
       width: 0,
-
       series: [
         {
-          name: "TEAM 1",
-          data: this.generateDayWiseTimeSeries(
-            new Date("11/02/2017").getTime(),
-            20,
-            {
-              min: 10,
-              max: 60,
-            }
-          ),
-        },
-        {
-          name: "TEAM 2",
-          data: this.generateDayWiseTimeSeries(
-            new Date("11 Feb 2017 GMT").getTime(),
-            20,
-            {
-              min: 10,
-              max: 60,
-            }
-          ),
-        },
-        {
-          name: "TEAM 3",
-          data: this.generateDayWiseTimeSeries(
-            new Date("11 Feb 2017 GMT").getTime(),
-            30,
-            {
-              min: 10,
-              max: 60,
-            }
-          ),
-        },
-        {
-          name: "TEAM 4",
-          data: this.generateDayWiseTimeSeries(
-            new Date("11 Feb 2017 GMT").getTime(),
-            10,
-            {
-              min: 10,
-              max: 60,
-            }
-          ),
-        },
-        {
-          name: "TEAM 5",
-          data: this.generateDayWiseTimeSeries(
-            new Date("11 Feb 2017 GMT").getTime(),
-            30,
-            {
-              min: 10,
-              max: 60,
-            }
-          ),
+          name: "Process",
+          data: [],
         },
       ],
       options: {
         chart: {
-          height: 350,
-          type: "scatter",
+          type: "area",
           zoom: {
-            type: "xy",
-          },
-        },
-        dataLabels: {
             enabled: false,
           },
-        grid: {
-          xaxis: {
-            lines: {
-              show: true,
+          id: "LevelTwoChart",
         },
+        dataLabels: {
+          enabled: true,
         },
-          yaxis: {
-            lines: {
-              show: true,
-            },
+        stroke: {
+          curve: "straight",
         },
+
+        title: {
+          text: "",
+          align: "left",
         },
+        labels: [],
         xaxis: {
           type: "datetime",
         },
         yaxis: {
-          max: 70,
+          opposite: false,
+        },
+        legend: {
+          horizontalAlign: "left",
         },
       },
     };
@@ -144,9 +126,6 @@ export default {
   created() {},
   mounted() {
     this.getBodyHeight();
-    this.getCategories();
-    //this.getDataDonut();
-    //this.getData();
   },
   watch: {},
   computed: {},
@@ -160,123 +139,56 @@ export default {
       this.width = window.innerHeight;
     },
     /**
-     * Change view - donut/bar
+     * Change datepickers or radio button
      */
-    changeView(view) {
-      this.typeView = view;
-      this.getData();
-    },
-    /**
-     * Get data from rest API
-     */
-    getData() {
-      let that = this;
-      Api.cases
-        .listTotalCases()
+    changeOption() {
+      let that = this,
+        dt;
+      if (this.dateFrom && this.dateTo && this.period) {
+        dt = {
+          processId: this.data[1].id,
+          caseList: this.data[0].id.toLowerCase(),
+          dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
+          dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
+          groupBy: this.period,
+        };
+        Api.process
+          .totalCasesByRange(dt)
           .then((response) => {
-          that.formatData(response.data);
+            that.formatDataRange(response.data);
           })
-        .catch((response) => {});
+          .catch((e) => {
+            console.error(err);
+          });
+      }
     },
     /**
-     * Format the data for chart
+     * Format response fromn API
      */
-    formatData(data) {
-      let l = [],
-        c = [],
-        s = [];
+    formatDataRange(data) {
+      let labels = [],
+        serie = [];
+
+      this.dataCasesByRange = data;
       _.each(data, (el) => {
-        l.push(el["List Name"]);
-        s.push(el["Total"]);
-        if (el["Color"] == "green") {
-          c.push("#179a6e");
-        }
-        if (el["Color"] == "yellow") {
-          c.push("#feb019");
-        }
-        if (el["Color"] == "blue") {
-          c.push("#008ffb");
-        }
-        if (el["Color"] == "gray") {
-          c.push("#8f99a0");
-        }
+        serie.push(el["TOTAL"]);
+        labels.push(el["dateGroup"]);
       });
-      this.seriesDonut = s;
-      this.seriesBar = [
-        {
-          data: s,
+      console.log("DRWAWWW");
+      this.$refs["LevelTwoChart"].updateOptions({
+        labels: labels,
+        title: {
+          text: this.data[0]["PRO_TITLE"],
+          align: "left",
         },
-      ];
-      this.$refs["apexchart1"].updateOptions({ labels: l, colors: c });
-      this.$refs["apexchart2"].updateOptions({ labels: l, colors: c });
-      this.$apexcharts.exec("apexchart1", "updateSeries", s);
-      this.$apexcharts.exec("apexchart2", "updateSeries", [
+      });
+      this.$apexcharts.exec("LevelTwoChart", "updateSeries", [
         {
-          data: s,
+          name: this.data[0]["PRO_TITLE"],
+          data: serie,
         },
       ]);
     },
-    getCategories() {
-      let that = this;
-      console.log("jonas");
-      Api.filters
-        .categories()
-        .then((response) => {
-          that.formatDataCategories(response.data);
-        })
-        .catch((e) => {
-          console.error(err);
-        });
-    },
-    formatDataCategories(data) {
-      let array = [];
-      _.each(data, (el) => {
-        array.push({ name: el["CATEGORY_NAME"], id: el["CATEGORY_ID"] });
-      });
-      this.optionsCategory = array;
-      this.category = array[0];
-    },
-    changeOption(option) {
-      console.log("asda sdas d");
-      let dt = {
-        category: option.id,
-        caseList:
-          this.data && this.data.dataLv0
-            ? this.data.dataLv0["List Name"].toLowerCase()
-            : "inbox",
-      };
-
-      Api.process
-        .processTotalCases(dt)
-        .then((response) => {
-          console.log("asda sdas d11111111111111");
-          console.log(response);
-        })
-        .catch((e) => {
-          console.error(err);
-        });
-    },
-    dataBreadCrumbs(options) {
-      let res = [],
-        that = this;
-      res.push({
-        label: "Start",
-        onClick() {
-          console.log("STARTTTTTTTTTT");
-          that.$emit("onChangeLevel", 0);
-        },
-      });
-      _.each(options, (el) => {
-        res.push({
-          label: el.name,
-          onClick() {
-            that.$emit("onChangeLevel", el.level);
-          },
-        });
-      });
-      return res;
-    },
-
     generateDayWiseTimeSeries(baseval, count, yrange) {
       var i = 0;
       var series = [];

resources/assets/js/home/TaskMetrics/VueChartLvZero.vue

@@ -2,6 +2,10 @@
   <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">Number of tasks per Task Status</h6>
+      <BreadCrumb
+        :options="breadCrumbs.data"
+        :settings="breadCrumbs.settings"
+      />
       <apexchart
         v-show="typeView === 'donut'"
         ref="apexchart1"
@@ -46,11 +50,12 @@
 <script>
 import _ from "lodash";
 import Api from "../../api/index";
+import BreadCrumb from "./../../components/utils/BreadCrumb.vue";
 export default {
   name: "VueChartLvZero",
   mixins: [],
-  components: {},
-  props: [],
+  components: { BreadCrumb },
+  props: ["breadCrumbs"],
   data() {
     let that = this;
     return {
@@ -161,7 +166,7 @@ export default {
      * Return the height for Vue Card View body
      */
     getBodyHeight() {
-      this.width = window.innerHeight * 0.9;
+      this.width = window.innerHeight * 0.8;
     },
     /**
      * Change view - donut/bar

resources/assets/js/home/TaskMetrics/VueCharts.vue

@@ -3,17 +3,21 @@
     <vue-chart-lv-zero
       v-show="level === 0"
       @updateDataLevel="updateDataLevel"
+      :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-one
-      v-if="level === 1"
+      :key="key1"
+      v-show="level === 1"
       :data="data"
       @onChangeLevel="onChangeLevel"
       @updateDataLevel="updateDataLevel"
+      :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-two
-      v-if="level === 2"
+      v-show="level === 2"
       :data="data"
       @onChangeLevel="onChangeLevel"
+      :breadCrumbs="dataBreadCrumbs()"
     />
   </div>
 </template>
@@ -36,8 +40,14 @@ export default {
     let that = this;
     return {
       level: 0,
+      key1: 1,
       data: [],
-      dataBreadCrumbs: [],
+      settingsBreadCrumbs: [
+        {
+          class: "fas fa-info-circle",
+          onClick() {},
+        },
+      ],
     };
   },
   created() {},
@@ -53,7 +63,21 @@ export default {
     updateDataLevel(data) {
       this.data.push(data);
       this.level = data.level + 1;
-      this.$emit("onChangeLevel", this.level);
+      this.$emit("onChangeLevel", data.level + 1);
+      this.updateKey();
+    },
+    updateKey() {
+      switch (this.level) {
+        case 0:
+          break;
+        case 1:
+          this.key1++;
+          break;
+        case 2:
+          break;
+        case 3:
+          break;
+      }
     },
 
     /**
@@ -66,10 +90,45 @@ export default {
       };
     },
     onChangeLevel(lv) {
-      console.log("leveeeeeeeeeeeeeee");
+      _.remove(this.data, function (n) {
+        return n.level >= lv;
+      });
       this.level = lv;
       this.$emit("onChangeLevel", this.level);
     },
+    dataBreadCrumbs() {
+      let res = [],
+        that = this,
+        index = 0;
+      _.each(this.data, (el) => {
+        if (index <= that.level) {
+          res.push({
+            label: el.name,
+            onClick() {
+              that.onChangeLevel(el.level);
+            },
+          });
+        }
+      });
+      res.push({
+        label: "Select the drill option",
+        onClick() {},
+      });
+      switch (this.level) {
+        case 0:
+          return {
+            data: res,
+            settings: this.settingsBreadCrumbs,
+          };
+          break;
+        default:
+          return {
+            data: res,
+            settings: this.settingsBreadCrumbs,
+          };
+          break;
+      }
+    },
   },
 };
 </script>