From c353ef77f8d49b7dfd31497cc1897d876e329df4 Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Fri, 24 Sep 2021 20:17:56 +0000
Subject: [PATCH 1/4] PMCORE-3366

---
 .../assets/js/components/utils/BreadCrumb.vue | 34 ++++-----
 .../assets/js/home/Inbox/defaultMixins.js     |  2 +-
 .../js/home/TaskMetrics/VueChartLvOne.vue     | 24 +++++--
 .../js/home/TaskMetrics/VueChartLvThree.vue   | 33 +++++++--
 .../js/home/TaskMetrics/VueChartLvTwo.vue     | 33 +++++++--
 .../js/home/TaskMetrics/VueChartLvZero.vue    | 70 +++++++++++++++----
 .../assets/js/home/TaskMetrics/VueCharts.vue  |  4 --
 7 files changed, 144 insertions(+), 56 deletions(-)

diff --git a/resources/assets/js/components/utils/BreadCrumb.vue b/resources/assets/js/components/utils/BreadCrumb.vue
index 8a921c945..f92c129ea 100644
--- a/resources/assets/js/components/utils/BreadCrumb.vue
+++ b/resources/assets/js/components/utils/BreadCrumb.vue
@@ -6,13 +6,15 @@
         :key="item.label"
         :class="item.classObject"
       >
-        <span v-if="item.data.color">
-          <div
-            class="vp-color-breadcrumb"
-            :style="{ backgroundColor: item.data.color }"
-          ></div
-        ></span>
-        <span>{{ item.label }}</span>
+        <span @click="item.onClick">
+          <span v-if="item.color">
+            <div
+              class="vp-color-breadcrumb"
+              :style="{ backgroundColor: item.color }"
+            ></div
+          ></span>
+          <span>{{ item.label }}</span>
+        </span>
       </li>
       <div
         v-for="item in settings"
@@ -47,19 +49,11 @@ export default {
     formatOptions(data) {
       let options = data;
       for (let i = 0; i <= options.length - 1; i++) {
-        if (i === options.length - 1) {
-          options[i].classObject = {
-            "vp-breadcrumb-item": true,
-            active: true,
-            "vp-inline-block": true,
-          };
-        } else {
-          options[i].classObject = {
-            "vp-breadcrumb-item": true,
-            active: false,
-            "vp-inline-block": true,
-          };
-        }
+        options[i].classObject = {
+          "vp-breadcrumb-item": true,
+          active: false,
+          "vp-inline-block": true,
+        };
       }
       return options;
     },
diff --git a/resources/assets/js/home/Inbox/defaultMixins.js b/resources/assets/js/home/Inbox/defaultMixins.js
index e8c3a6f2d..89cd28a9f 100644
--- a/resources/assets/js/home/Inbox/defaultMixins.js
+++ b/resources/assets/js/home/Inbox/defaultMixins.js
@@ -4,7 +4,7 @@ export default {
   data() {
     let that = this;
     return {
-      typeView: this.settings.view && this.settings.view.typeView
+      typeView: this.settings && this.settings.view && this.settings.view.typeView
         ? this.settings.view.typeView
         : "GRID",
       random: 1,
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
index 718a99382..f0a90e1bd 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
@@ -6,7 +6,7 @@
       </h6>
       <div>
         <BreadCrumb
-          :options="breadCrumbs.data"
+          :options="dataBreadcrumbs()"
           :settings="settingsBreadcrumbs"
         />
         <ProcessPopover
@@ -28,7 +28,9 @@
             @select="changeOption"
           ></multiselect>
         </div>
-        <label class="vp-inline-block vp-padding-l20">{{ $t("ID_TOP10") }}</label>
+        <label class="vp-inline-block vp-padding-l20">{{
+          $t("ID_TOP10")
+        }}</label>
         <div class="vp-inline-block">
           <b-form-checkbox
             v-model="top"
@@ -104,7 +106,7 @@ export default {
     BreadCrumb,
     ProcessPopover,
   },
-  props: ["data", "breadCrumbs"],
+  props: ["data"],
   data() {
     let that = this;
     return {
@@ -289,7 +291,7 @@ export default {
           .then((response) => {
             that.totalCases = response.data;
             that.formatTotalCases(response.data);
-          })  
+          })
           .catch((e) => {
             console.error(err);
           });
@@ -429,6 +431,20 @@ export default {
       });
       eventBus.$emit("home::sidebar::click-item", taskList);
     },
+    /**
+     * Return the breadcrumbs
+     */
+    dataBreadcrumbs() {
+      let res = [];
+      if (this.data[1]) {
+        res.push({
+          label: this.data[1]["name"],
+          onClick() {},
+          color: this.data[1]["color"],
+        });
+      }
+      return res;
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
index 103973bb6..ccb120931 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
@@ -1,10 +1,10 @@
 <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_RISK_MATRIX")}}</h6>
+      <h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_RISK_MATRIX") }}</h6>
       <div>
         <BreadCrumb
-          :options="breadCrumbs.data"
+          :options="dataBreadcrumbs()"
           :settings="settingsBreadcrumbs"
         />
         <div class="vp-width-p30 vp-inline-block">
@@ -36,9 +36,7 @@
           ></b-form-datepicker>
         </div>
         <div class="vp-inline-block">
-          <label class="form-label">{{
-            $t("ID_TOP")
-          }}</label>
+          <label class="form-label">{{ $t("ID_TOP") }}</label>
         </div>
         <div class="vp-inline-block">
           <multiselect
@@ -298,7 +296,7 @@ export default {
           this.$refs["LevelThreeChart"].updateOptions({
             yaxis: {
               max: 0,
-              tickAmount: 7
+              tickAmount: 7,
             },
             title: {
               text: "Days before being Overdue",
@@ -309,7 +307,7 @@ export default {
           this.$refs["LevelThreeChart"].updateOptions({
             yaxis: {
               max: 0,
-              tickAmount: 7
+              tickAmount: 7,
             },
             title: {
               text: "Days before being At-Risk",
@@ -421,6 +419,27 @@ export default {
         });
       });
     },
+    /**
+     * Return the breadcrumbs
+     */
+    dataBreadcrumbs() {
+      let res = [];
+      if (this.data[1]) {
+        res.push({
+          label: this.data[1]["name"],
+          onClick() {},
+          color: this.data[1]["color"],
+        });
+      }
+      if (this.data[2]) {
+        res.push({
+          label: this.data[2]["name"],
+          onClick() {},
+          color: null,
+        });
+      }
+      return res;
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
index 07b232139..2608c77e9 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
@@ -6,7 +6,7 @@
       </h6>
       <div>
         <BreadCrumb
-          :options="breadCrumbs.data"
+          :options="dataBreadcrumbs()"
           :settings="settingsBreadcrumbs"
         />
         <div class="vp-width-p30 vp-inline-block">
@@ -94,7 +94,7 @@ export default {
     Multiselect,
     BreadCrumb,
   },
-  props: ["data", "breadCrumbs"],
+  props: ["data"],
   data() {
     let that = this;
     return {
@@ -155,12 +155,12 @@ export default {
     this.changeOption();
   },
   watch: {
-    dateFrom () {
+    dateFrom() {
       this.validateDateTo();
     },
-    dateTo () {
+    dateTo() {
       this.validateDateTo();
-    }
+    },
   },
   computed: {},
   updated() {},
@@ -282,7 +282,7 @@ export default {
      * Validate range date
      */
     validateDateTo() {
-      if (this.dateFrom !== '' && this.dateTo !== '') {
+      if (this.dateFrom !== "" && this.dateTo !== "") {
         if (this.dateFrom > this.dateTo) {
           this.stateDateTo = false;
         } else {
@@ -290,6 +290,27 @@ export default {
         }
       }
     },
+    /**
+     * Return the breadcrumbs
+     */
+    dataBreadcrumbs() {
+      let res = [];
+      if (this.data[1]) {
+        res.push({
+          label: this.data[1]["name"],
+          onClick() {},
+          color: this.data[1]["color"],
+        });
+      }
+      if (this.data[2]) {
+        res.push({
+          label: this.data[2]["name"],
+          onClick() {},
+          color: null,
+        });
+      }
+      return res;
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
index b8b667bbb..a54815c40 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
@@ -2,7 +2,7 @@
   <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") }}</h6>
-      <BreadCrumb :options="breadCrumbs.data" :settings="settingsBreadcrumbs" />
+      <BreadCrumb :options="dataBreadcrumbs" :settings="settingsBreadcrumbs" />
       <apexchart
         v-show="typeView === 'donut'"
         ref="apexchart1"
@@ -52,7 +52,7 @@ export default {
   name: "VueChartLvZero",
   mixins: [],
   components: { BreadCrumb },
-  props: ["breadCrumbs"],
+  props: [],
   data() {
     let that = this;
     return {
@@ -68,6 +68,57 @@ export default {
           onClick() {},
         },
       ],
+      dataBreadcrumbs: [
+        {
+          label: that.$i18n.t("ID_INBOX"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_INBOX"),
+              name: that.$i18n.t("ID_INBOX"),
+              level: 1,
+              color: "#179a6e",
+            });
+          },
+          color: "#179a6e",
+        },
+        {
+          label: this.$i18n.t("ID_DRAFT"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_DRAFT"),
+              name: that.$i18n.t("ID_DRAFT"),
+              level: 1,
+              color: "#feb019",
+            });
+          },
+          color: "#feb019",
+        },
+        {
+          label: this.$i18n.t("ID_PAUSED"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_PAUSED"),
+              name: that.$i18n.t("ID_PAUSED"),
+              level: 1,
+              color: "#008ffb",
+            });
+          },
+          color: "#008ffb",
+        },
+        {
+          label: this.$i18n.t("ID_UNASSIGNED"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_UNASSIGNED"),
+              name: that.$i18n.t("ID_UNASSIGNED"),
+              level: 1,
+              color: "#8f99a0",
+            });
+          },
+
+          color: "#8f99a0",
+        },
+      ],
       optionsDonut: {
         labels: [
           this.$i18n.t("ID_INBOX"),
@@ -78,20 +129,10 @@ export default {
         chart: {
           id: "apexchart1",
           type: "donut",
-          events: {
-            legendClick: function (chartContext, seriesIndex, config) {
-              that.currentSelection = that.data[seriesIndex];
-              that.$emit("updateDataLevel", {
-                id: that.currentSelection["List Name"],
-                name: that.currentSelection["List Name"],
-                level: 1,
-                color: that.formatColor(that.currentSelection["Color"]),
-                data: that.currentSelection,
-              });
-            },
-          },
+          events: {},
         },
         legend: {
+          show: false,
           position: "top",
           offsetY: 0,
         },
@@ -127,6 +168,7 @@ export default {
           },
         },
         legend: {
+          show: false,
           position: "top",
           offsetY: 0,
         },
diff --git a/resources/assets/js/home/TaskMetrics/VueCharts.vue b/resources/assets/js/home/TaskMetrics/VueCharts.vue
index 49b110241..d474a5572 100644
--- a/resources/assets/js/home/TaskMetrics/VueCharts.vue
+++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue
@@ -3,27 +3,23 @@
     <vue-chart-lv-zero
       v-show="level === 0"
       @updateDataLevel="updateDataLevel"
-      :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-one
       :key="key1"
       v-show="level === 1"
       :data="levels"
       @updateDataLevel="updateDataLevel"
-      :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-two
       :key="key2"
       v-show="level === 2"
       :data="levels"
       @updateDataLevel="updateDataLevel"
-      :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-three
       :key="key3"
       v-show="level === 3"
       :data="levels"
-      :breadCrumbs="dataBreadCrumbs()"
     />
   </div>
 </template>

From 13ee44e596fb7a9660ff05f11b68bf08721270e8 Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Fri, 24 Sep 2021 21:07:29 +0000
Subject: [PATCH 2/4] update

---
 .../assets/js/home/TaskMetrics/ProcessPopover.vue      | 10 +++++++++-
 resources/assets/js/home/TaskMetrics/VueChartLvOne.vue |  4 +++-
 .../assets/js/home/TaskMetrics/VueChartLvZero.vue      |  3 ---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/resources/assets/js/home/TaskMetrics/ProcessPopover.vue b/resources/assets/js/home/TaskMetrics/ProcessPopover.vue
index 2ad6dbfda..986d7e419 100644
--- a/resources/assets/js/home/TaskMetrics/ProcessPopover.vue
+++ b/resources/assets/js/home/TaskMetrics/ProcessPopover.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pm-all-view-popover">
+  <div class="pm-tm-view-popover">
     <b-popover
       :target="target"
       ref="popover"
@@ -39,6 +39,7 @@
             value-field="key"
             text-field="value"
             name="flavour-2a"
+            class="process-view-popover"
             @change="changeOptions"
             stacked
           ></b-form-checkbox-group>
@@ -167,4 +168,11 @@ export default {
 .v-popover-footer {
   display: flow-root;
 }
+
+.process-view-popover {
+  margin-bottom: 1rem;
+  overflow-y: auto;
+  display: block;
+  max-height: 200px;
+}
 </style>
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
index f0a90e1bd..988160b27 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
@@ -124,7 +124,7 @@ export default {
       optionsCategory: [],
       optionsProcesses: [],
       selectedProcesses: [],
-      top: false,
+      top: true,
       width: 0,
       totalCases: [],
       currentSelection: null,
@@ -225,6 +225,7 @@ export default {
           that.formatDataProcesses(response.data);
           that.changeOption({
             id: "all",
+            paged: false,
           });
         })
         .catch((e) => {
@@ -480,5 +481,6 @@ export default {
 .vp-flex1 {
   flex: 1;
 }
+
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
index a54815c40..1b04518a1 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
@@ -6,18 +6,15 @@
       <apexchart
         v-show="typeView === 'donut'"
         ref="apexchart1"
-        :width="width"
         :options="optionsDonut"
         :series="seriesDonut"
       ></apexchart>
       <apexchart
         v-show="typeView === 'bar'"
         ref="apexchart2"
-        :width="width"
         :options="optionsBar"
         :series="seriesBar"
       ></apexchart>
-
       <div class="row">
         <div class="col-sm vp-align-right">
           <button

From cce2adb3ded7180f1f3632613ed59d779cf67f7b Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Sat, 25 Sep 2021 00:01:50 +0000
Subject: [PATCH 3/4] update

---
 .../js/home/TaskMetrics/ProcessPopover.vue    |  3 +-
 .../js/home/TaskMetrics/TaskMetrics.vue       | 43 +++++++------
 .../js/home/TaskMetrics/VueChartLvOne.vue     | 63 +++++++++----------
 .../assets/js/home/TaskMetrics/VueCharts.vue  |  8 +--
 4 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/resources/assets/js/home/TaskMetrics/ProcessPopover.vue b/resources/assets/js/home/TaskMetrics/ProcessPopover.vue
index 986d7e419..c7703f3ee 100644
--- a/resources/assets/js/home/TaskMetrics/ProcessPopover.vue
+++ b/resources/assets/js/home/TaskMetrics/ProcessPopover.vue
@@ -69,7 +69,6 @@ export default {
       results: [],
       allColumns: false,
       localSelected: [],
-      selected: [],
     };
   },
   mounted() {
@@ -138,7 +137,7 @@ export default {
           res.push(o.key);
         });
       }
-      this.selected = res;
+      this.localSelected = res;
     },
     /**
      * Handler when change options event
diff --git a/resources/assets/js/home/TaskMetrics/TaskMetrics.vue b/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
index 690a4d1f2..cadf60465 100644
--- a/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
+++ b/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
@@ -10,6 +10,7 @@
     <modal-new-request ref="newRequest"></modal-new-request>
     <div class="d-inline-flex p-2">
       <vue-charts
+        :key="random"
         ref="pm-vue-chart"
         @onChangeLevel="changeLevel"
         :levels="visited"
@@ -17,7 +18,7 @@
       <div class="vp-6"></div>
       <drill-down :visited="visited" @onChangeLevel="changeLevel" />
     </div>
-  </div>  
+  </div>
 </template>
 
 <script>
@@ -27,11 +28,12 @@ import DrillDown from "./DrillDown.vue";
 import VueCharts from "./VueCharts.vue";
 
 import defaultMixins from "./defaultMixins";
+import _ from "lodash";
 export default {
   name: "TaskMetrics",
   mixins: [defaultMixins],
   components: {
-    ButtonFleft,  
+    ButtonFleft,
     ModalNewRequest,
     DrillDown,
     VueCharts,
@@ -40,13 +42,17 @@ export default {
   data() {
     let that = this;
     return {
-      visited: this.settings && this.settings.visited ? this.settings.visited : [
-          {
-              level: 0,
-              active: true,
-              id: _.random(0,100),
-          }
-      ]
+      random: _.random(0, 100000),
+      visited:
+        this.settings && this.settings.visited
+          ? this.settings.visited
+          : [
+              {
+                level: 0,
+                active: true,
+                id: _.random(0, 100),
+              },
+            ],
     };
   },
   created() {},
@@ -59,27 +65,28 @@ export default {
      * Change level in drill down
      */
     changeLevel(data) {
-      let item  = _.find(this.visited, data);
+      let item = _.findIndex(this.visited, data);
       this.visited.forEach(function (elem) {
-          elem.active = false;
+        elem.active = false;
       });
-      if(!item) {
+      data.active = true;
+      item != -1 ? this.visited.splice(item, 1, data) : null;
+      if (item == -1) {
         data.active = true;
-        this.visited = _.filter(this.visited, function(o) { 
-          return o.level < data.level; 
+        this.visited = _.filter(this.visited, function (o) {
+          return o.level < data.level;
         });
         this.visited.push(data);
-      } else {
-        item.active = true;
       }
+      this.random = _.random(0, 100000);
       this.$emit("updateSettings", {
         data: this.visited,
         key: "visited",
         page: "task-metrics",
         type: "normal",
-        id: this.id
+        id: this.id,
       });
-  },
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
index 988160b27..542eece02 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
@@ -11,6 +11,7 @@
         />
         <ProcessPopover
           :options="optionsProcesses"
+          :selected="selectedProcesses"
           @onChange="onChangeSearchPopover"
           target="pm-task-process"
           ref="pm-task-process"
@@ -25,7 +26,6 @@
             :show-labels="false"
             track-by="id"
             label="name"
-            @select="changeOption"
           ></multiselect>
         </div>
         <label class="vp-inline-block vp-padding-l20">{{
@@ -124,7 +124,7 @@ export default {
       optionsCategory: [],
       optionsProcesses: [],
       selectedProcesses: [],
-      top: true,
+      top: this.data[2] ? this.data[2].data.top : true,
       width: 0,
       totalCases: [],
       currentSelection: null,
@@ -188,7 +188,20 @@ export default {
     this.getCategories();
     this.getProcesses();
   },
-  watch: {},
+  watch: {
+    category(nvalue, old) {
+      this.changeOption();
+    },
+    optionsCategory(nvalue, old) {
+      this.category = this.data[2] ? this.data[2].data.category : nvalue[0];
+    },
+    optionsProcesses(nvalue, old) {
+      this.selectedProcesses = this.data[2]
+        ? this.data[2].data.selectedProcesses
+        : _.flatMap(nvalue, (n) => n.key);
+      this.changeOption();
+    },
+  },
   computed: {},
   updated() {},
   beforeCreate() {},
@@ -223,10 +236,6 @@ export default {
         .processList(query || "")
         .then((response) => {
           that.formatDataProcesses(response.data);
-          that.changeOption({
-            id: "all",
-            paged: false,
-          });
         })
         .catch((e) => {
           console.error(err);
@@ -250,25 +259,19 @@ export default {
         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 = [],
+      let 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;
     },
@@ -276,17 +279,17 @@ export default {
      * Change the options in TOTAL CASES BY PROCESS
      * @param {*} option
      */
-    changeOption(option) {
+    changeOption() {
       let that = this,
         dt = {};
-      if (this.data.length > 1) {
+      if (this.category && this.selectedProcesses.length > 0 && this.data[1]) {
         dt = {
-          category: option.id,
+          category: this.category.id,
           caseList: this.data[1].id.toLowerCase(),
           processes: this.selectedProcesses,
           top: this.top,
         };
-        option.id == "all" ? delete dt.category : null;
+        this.category.id == "all" ? delete dt.category : null;
         Api.process
           .totalCasesByProcess(dt)
           .then((response) => {
@@ -294,7 +297,7 @@ export default {
             that.formatTotalCases(response.data);
           })
           .catch((e) => {
-            console.error(err);
+            console.error(e);
           });
       }
     },
@@ -330,17 +333,8 @@ export default {
      * @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);
+      this.changeOption();
     },
     /**
      * Update labels in chart
@@ -368,9 +362,7 @@ export default {
      * Force update view when update level
      */
     forceUpdateView() {
-      this.changeOption({
-        id: 0,
-      });
+      this.changeOption();
     },
     /**
      * Event handler change input search popover
@@ -405,7 +397,11 @@ export default {
         id: this.currentSelection["PRO_ID"],
         name: this.currentSelection["PRO_TITLE"],
         level: 2,
-        data: this.currentSelection,
+        data: {
+          top: this.top,
+          category: this.category,
+          selectedProcesses: this.selectedProcesses,
+        },
       });
     },
     /**
@@ -481,6 +477,5 @@ export default {
 .vp-flex1 {
   flex: 1;
 }
-
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/VueCharts.vue b/resources/assets/js/home/TaskMetrics/VueCharts.vue
index d474a5572..f01fbfada 100644
--- a/resources/assets/js/home/TaskMetrics/VueCharts.vue
+++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue
@@ -1,24 +1,24 @@
 <template>
   <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
     <vue-chart-lv-zero
-      v-show="level === 0"
+      v-if="level === 0"
       @updateDataLevel="updateDataLevel"
     />
     <vue-chart-lv-one
       :key="key1"
-      v-show="level === 1"
+      v-if="level === 1"
       :data="levels"
       @updateDataLevel="updateDataLevel"
     />
     <vue-chart-lv-two
       :key="key2"
-      v-show="level === 2"
+      v-if="level === 2"
       :data="levels"
       @updateDataLevel="updateDataLevel"
     />
     <vue-chart-lv-three
       :key="key3"
-      v-show="level === 3"
+      v-if="level === 3"
       :data="levels"
     />
   </div>

From 91cb51fcf27ecc2b6cd0e6b8b9392eb0cd850cdd Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Mon, 27 Sep 2021 22:05:05 +0000
Subject: [PATCH 4/4] update

---
 .../js/components/iconPicker/IconPicker.vue   |  1 -
 .../js/home/TaskMetrics/TaskMetrics.vue       |  4 +-
 .../js/home/TaskMetrics/VueChartLvThree.vue   | 44 ++++++++++++++++---
 .../js/home/TaskMetrics/VueChartLvTwo.vue     | 18 +++++---
 .../assets/js/home/TaskMetrics/VueCharts.vue  | 28 ++++++------
 .../assets/js/home/modal/ModalPauseCase.vue   |  1 -
 6 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/resources/assets/js/components/iconPicker/IconPicker.vue b/resources/assets/js/components/iconPicker/IconPicker.vue
index e682f29ff..abfc98e76 100644
--- a/resources/assets/js/components/iconPicker/IconPicker.vue
+++ b/resources/assets/js/components/iconPicker/IconPicker.vue
@@ -166,7 +166,6 @@ export default {
     },
     watch: {
         color() {
-            console.log("colores");
         },
     },
     methods: {
diff --git a/resources/assets/js/home/TaskMetrics/TaskMetrics.vue b/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
index cadf60465..430e5a908 100644
--- a/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
+++ b/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
@@ -65,7 +65,9 @@ export default {
      * Change level in drill down
      */
     changeLevel(data) {
-      let item = _.findIndex(this.visited, data);
+      let item = _.findIndex(this.visited, (el) => {
+        return el.id == data.id;
+      });
       this.visited.forEach(function (elem) {
         elem.active = false;
       });
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
index ccb120931..d81f91f47 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
@@ -125,11 +125,23 @@ export default {
     let that = this;
     return {
       currentSelection: null,
-      dateFrom: moment().format("YYYY-MM-DD"),
-      dateTo: moment().add(30, "d").format("YYYY-MM-DD"),
-      dateNow: "",
-      size: { name: this.$t("ID_ALL"), id: "all" },
-      riskType: "ON_TIME",
+      dateFrom:
+        this.data[3] && this.data[3].data.dateFromRisk
+          ? this.data[3].data.dateFromRisk
+          : moment().format("YYYY-MM-DD"),
+      dateTo:
+        this.data[3] && this.data[3].data.dateToRisk
+          ? this.data[3].data.dateToRisk
+          : moment().add(30, "d").format("YYYY-MM-DD"),
+      dateNow: moment().format("DD/MM/YYYY h:mm:ss a"),
+      size:
+        this.data[3] && this.data[3].data.size
+          ? this.data[3].data.size
+          : { name: this.$t("ID_ALL"), id: "all" },
+      riskType:
+        this.data[3] && this.data[3].data.riskType
+          ? this.data[3].data.riskType
+          : "ON_TIME",
       settingsBreadcrumbs: [
         {
           class: "fas fa-info-circle",
@@ -225,9 +237,10 @@ export default {
           .totalCasesByRisk(dt)
           .then((response) => {
             that.formatDataRange(response.data);
+            that.updateSettings();
           })
           .catch((e) => {
-            console.error(err);
+            console.error(e);
           });
       }
     },
@@ -440,6 +453,25 @@ export default {
       }
       return res;
     },
+    /**
+     * UPdate settings user config
+     */
+    updateSettings() {
+      this.$emit("updateDataLevel", {
+        id: "level3",
+        name: this.data[2]["name"],
+        level: 3,
+        data: {
+          dateFrom: this.data[3].data.dateFrom,
+          dateTo: this.data[3].data.dateTo,
+          period: this.data[3].data.period,
+          dateFromRisk: this.dateFrom,
+          dateToRisk: this.dateTo,
+          size: this.size,
+          riskType: this.riskType,
+        },
+      });
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
index 2608c77e9..9101782c5 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
@@ -98,9 +98,13 @@ export default {
   data() {
     let that = this;
     return {
-      dateFrom: moment().format("YYYY-MM-DD"),
-      dateTo: moment().add(30, "d").format("YYYY-MM-DD"),
-      period: "day",
+      dateFrom: this.data[3]
+        ? this.data[3].data.dateFrom
+        : moment().format("YYYY-MM-DD"),
+      dateTo: this.data[3]
+        ? this.data[3].data.dateTo
+        : moment().add(30, "d").format("YYYY-MM-DD"),
+      period: this.data[3] ? this.data[3].data.period : "day",
       periodOptions: [
         { text: this.$t("ID_DAY"), value: "day" },
         { text: this.$t("ID_MONTH"), value: "month" },
@@ -230,10 +234,14 @@ export default {
      */
     onClickDrillDown() {
       this.$emit("updateDataLevel", {
-        id: this.data[2]["id"],
+        id: "level2",
         name: this.data[2]["name"],
         level: 3,
-        data: null,
+        data: {
+          dateFrom: this.dateFrom,
+          dateTo: this.dateTo,
+          period: this.period,
+        },
       });
     },
     /**
diff --git a/resources/assets/js/home/TaskMetrics/VueCharts.vue b/resources/assets/js/home/TaskMetrics/VueCharts.vue
index f01fbfada..08e8fbaa0 100644
--- a/resources/assets/js/home/TaskMetrics/VueCharts.vue
+++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue
@@ -1,9 +1,6 @@
 <template>
   <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
-    <vue-chart-lv-zero
-      v-if="level === 0"
-      @updateDataLevel="updateDataLevel"
-    />
+    <vue-chart-lv-zero v-if="level === 0" @updateDataLevel="updateDataLevel" />
     <vue-chart-lv-one
       :key="key1"
       v-if="level === 1"
@@ -18,8 +15,9 @@
     />
     <vue-chart-lv-three
       :key="key3"
-      v-if="level === 3"
+      v-show="level === 3"
       :data="levels"
+      @updateDataLevel="updateDataLevel"
     />
   </div>
 </template>
@@ -40,13 +38,13 @@ export default {
     VueChartLvTwo,
     VueChartLvThree,
   },
-  props: ["levels"], 
+  props: ["levels"],
   data() {
-    let that = this;  
+    let that = this;
     return {
-      key1: _.random(0,100),
-      key2: _.random(0,100),
-      key3: _.random(0,100),
+      key1: _.random(0, 100),
+      key2: _.random(0, 100),
+      key3: _.random(0, 100),
       settingsBreadCrumbs: [
         {
           class: "fas fa-info-circle",
@@ -59,9 +57,9 @@ export default {
   mounted() {},
   watch: {},
   computed: {
-      level: function () {
-        return _.find(this.levels, {'active': true }).level;
-      }
+    level: function () {
+      return _.find(this.levels, { active: true }).level;
+    },
   },
   updated() {},
   beforeCreate() {},
@@ -100,7 +98,7 @@ export default {
           res.push({
             label: el.name,
             onClick() {
-               this.$emit("onChangeLevel", el);
+              this.$emit("onChangeLevel", el);
             },
             data: el,
           });
@@ -120,7 +118,7 @@ export default {
           };
           break;
       }
-    }
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/modal/ModalPauseCase.vue b/resources/assets/js/home/modal/ModalPauseCase.vue
index 4392c66ae..014d25ad1 100644
--- a/resources/assets/js/home/modal/ModalPauseCase.vue
+++ b/resources/assets/js/home/modal/ModalPauseCase.vue
@@ -164,7 +164,6 @@ export default {
       this.data.reasonPause = this.pauseData.reasonPause;
       api.cases.pauseCase(this.data)
         .then((response) => {
-            console.log(response);
           if (response.statusText == "OK" || response.status === 200) {
             that.$refs["modal-pause-case"].hide();
             that.$parent.$refs['ellipsis-' + that.data.TAS_UID].hideActionButtons()