diff --git a/resources/assets/js/home/TaskMetrics/DrillDown.vue b/resources/assets/js/home/TaskMetrics/DrillDown.vue
index 6501d96ee..ee0aaf641 100644
--- a/resources/assets/js/home/TaskMetrics/DrillDown.vue
+++ b/resources/assets/js/home/TaskMetrics/DrillDown.vue
@@ -8,7 +8,7 @@
       <h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_NAVIGATOR") }}</h6>
     </div>
     <div
-      v-for="item in loadItems(data, level)"
+      v-for="item in loadItems()"
       :key="item.content"
       class="vp-padding-b10"
       @click="onClick(item)"
@@ -29,7 +29,7 @@ export default {
   name: "DrillDown",
   mixins: [],
   components: {},
-  props: ["level"],
+  props: ["visited"],
   data() {
     let that = this;
     return {
@@ -37,35 +37,39 @@ export default {
         "rounded-circle": true,
         "v-pm-drill-down-number": true,
         "vp-btn-secondary": true,
+        "vp-btn-primary-inactive": false,
         "btn-primary": false,
         "vp-block": true,
       },
       data: [
         {
           label: that.$t("ID_LEVEL"),
-          content: "0",
-          click() {
-            that.$emit("onChangeLevel", 0);
+          content: 0,
+          click(elem) {
+            console.log(elem);
+            that.$emit("onChangeLevel", elem);
           },
         },
         {
           label: that.$t("ID_LEVEL"),
-          content: "1",
-          click() {
-            that.$emit("onChangeLevel", 1);
+          content: 1,
+          click(elem) {
+            that.$emit("onChangeLevel", elem);
           },
         },
         {
           label: that.$t("ID_LEVEL"),
-          content: "2",
-          click() {
-            that.$emit("onChangeLevel", 2);
+          content: 2,
+          click(elem) {
+            that.$emit("onChangeLevel", elem);
           },
         },
         {
           label: that.$t("ID_LEVEL"),
-          content: "3",
-          click() {},
+          content: 3,
+          click(elem) {
+            that.$emit("onChangeLevel", elem);
+          },
         },
       ],
     };
@@ -73,7 +77,11 @@ export default {
   created() {},
   mounted() {},
   watch: {},
-  computed: {},
+  computed: {
+      level: function () {
+          return _.find(this.visited, {'active': true }).level ;
+      }
+  },
   updated() {},
   beforeCreate() {},
   methods: {
@@ -81,37 +89,34 @@ export default {
      * Click in drill option
      */
     onClick(item) {
-      let array,
-        i = 0,
-        nindex;
-      array = _.clone(this.data);
-      array.forEach((el) => {
-        if (el.content === item.content) {
-          nindex = i;
-        }
-        i++;
-      });
-      this.index = nindex;
-      if (nindex <= this.level) {
-        item.click(item);
+      let elem =_.find(this.visited, {'level': item.content });
+      if (elem) {
+        item.click(elem);
       }
     },
     /**
      * Load items in drill items
      */
-    loadItems(items, index) {
+    loadItems() {
       let array,
-        i = 0,
-        that = this;
-      array = _.clone(items);
+        that = this,
+        item;
+      array = _.clone(this.data);
       array.forEach((el) => {
         el.classObject = _.clone(that.classObject);
-        if (i <= index) {
-          el.classObject["vp-btn-secondary"] = false;
-          el.classObject["btn-primary"] = true;
-        }
-        i += 1;
-      });
+        item =_.find(this.visited, {'level': el.content });
+        if (item) {
+            if (item.active){
+              el.classObject["vp-btn-primary-inactive"] = false;
+              el.classObject["vp-btn-secondary"] = false;
+              el.classObject["btn-primary"] = true;
+            } else {
+              el.classObject["vp-btn-secondary"] = false;
+              el.classObject["btn-primary"] = false;
+              el.classObject["vp-btn-primary-inactive"] = true;
+            }
+          }
+      }); 
       return array;
     },
   },
@@ -155,6 +160,18 @@ export default {
   border-color: #6c757d;
 }
 
+.vp-btn-primary-inactive {
+    color: #6c757d;
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+.vp-btn-primary-inactive:hover {
+  color: #6c757d;
+  background-color: #0066d3;
+  border-color: #0066d3;
+}
+
 .v-pm-drill-down {
   vertical-align: top;
   padding-left: 50px;
diff --git a/resources/assets/js/home/TaskMetrics/TaskMetrics.vue b/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
index 9d735f547..a944439f3 100644
--- a/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
+++ b/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
@@ -12,12 +12,12 @@
       <vue-charts
         ref="pm-vue-chart"
         @onChangeLevel="changeLevel"
-        :level="level"
+        :levels="visited"
       />
       <div class="vp-6"></div>
-      <drill-down :level="level" @onChangeLevel="updateVueChart" />
+      <drill-down :visited="visited" @onChangeLevel="changeLevel" />
     </div>
-  </div>
+  </div>  
 </template>
 
 <script>
@@ -31,21 +31,27 @@ export default {
   name: "TaskMetrics",
   mixins: [defaultMixins],
   components: {
-    ButtonFleft,
+    ButtonFleft,  
     ModalNewRequest,
     DrillDown,
     VueCharts,
   },
-  props: [],
+  props: ["settings"],
   data() {
     let that = this;
     return {
-      level: 0,
+      visited: this.settings && this.settings.visited ? this.settings.visited : [
+          {
+              level: 0,
+              active: true
+          }
+      ]
     };
   },
   created() {},
-  mounted() {},
-  watch: {},
+  mounted() {
+    debugger;
+  },
   computed: {},
   updated() {},
   beforeCreate() {},
@@ -53,15 +59,28 @@ export default {
     /**
      * Change level in drill down
      */
-    changeLevel(lv) {
-      this.level = lv;
-    },
-    /**
-     * update data in charts
-     */
-    updateVueChart(lv) {
-      this.$refs["pm-vue-chart"].onChangeLevel(lv);
-    },
+    changeLevel(data) {
+      let item  = _.find(this.visited, {level: data.level });
+      debugger;
+      this.visited.forEach(function (elem) {
+          elem.active = false;
+      });
+      if(!item) {
+        data.active = true;
+        this.visited.push(data);
+      } else {
+        // console.log("change lavel");
+        item.active = true;
+        
+      }
+      this.$emit("updateSettings", {
+        data: this.visited,
+        key: "visited",
+        page: "task-metrics",
+        type: "normal",
+        id: this.id
+      });
+  },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
index 27ab76dd9..718a99382 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
@@ -276,10 +276,10 @@ export default {
     changeOption(option) {
       let that = this,
         dt = {};
-      if (this.data.length > 0) {
+      if (this.data.length > 1) {
         dt = {
           category: option.id,
-          caseList: this.data[0].id.toLowerCase(),
+          caseList: this.data[1].id.toLowerCase(),
           processes: this.selectedProcesses,
           top: this.top,
         };
@@ -289,7 +289,7 @@ export default {
           .then((response) => {
             that.totalCases = response.data;
             that.formatTotalCases(response.data);
-          })
+          })  
           .catch((e) => {
             console.error(err);
           });
@@ -401,7 +401,7 @@ export default {
       this.$emit("updateDataLevel", {
         id: this.currentSelection["PRO_ID"],
         name: this.currentSelection["PRO_TITLE"],
-        level: 1,
+        level: 2,
         data: this.currentSelection,
       });
     },
@@ -409,7 +409,7 @@ export default {
      * Show popover data options
      */
     onClickData() {
-      let taskList = this.data[0].id.toLowerCase(),
+      let taskList = this.data[1].id.toLowerCase(),
         obj = {
           autoshow: false,
           fieldId: "processName",
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
index d31aedec8..103973bb6 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
@@ -215,8 +215,8 @@ export default {
         dt;
       if (this.dateFrom && this.dateTo) {
         dt = {
-          process: this.data[1].id,
-          caseList: this.data[0].id.toLowerCase(),
+          process: this.data[2].id,
+          caseList: this.data[1].id.toLowerCase(),
           dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
           dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
           riskStatus: this.riskType,
@@ -272,7 +272,7 @@ export default {
       });
 
       this.updateApexchartAxis();
-      if (this.data[0].id.toLowerCase() == "draft") {
+      if (this.data[1].id.toLowerCase() == "draft") {
         this.series = []; // Draft is empty
       } else {
         this.series = serie;
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
index 95408e77b..07b232139 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
@@ -178,22 +178,24 @@ export default {
     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.formatDataRange(response.data);
-          })
-          .catch((e) => {
-            console.error(e);
-          });
+      if (this.data.length > 2) {
+        if (this.dateFrom && this.dateTo && this.period) {
+          dt = {
+            processId: this.data[2].id,
+            caseList: this.data[1].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.formatDataRange(response.data);
+            })
+            .catch((e) => {
+              console.error(e);
+            });
+        }
       }
     },
     /**
@@ -212,13 +214,13 @@ export default {
       this.$refs["LevelTwoChart"].updateOptions({
         labels: labels,
         title: {
-          text: this.data[0]["PRO_TITLE"],
+          text: this.data[1]["PRO_TITLE"],
           align: "left",
         },
       });
       this.$apexcharts.exec("LevelTwoChart", "updateSeries", [
         {
-          name: this.data[0]["PRO_TITLE"],
+          name: this.data[1]["PRO_TITLE"],
           data: serie,
         },
       ]);
@@ -228,9 +230,9 @@ export default {
      */
     onClickDrillDown() {
       this.$emit("updateDataLevel", {
-        id: this.data[1]["id"],
-        name: this.data[1]["name"],
-        level: 2,
+        id: this.data[2]["id"],
+        name: this.data[2]["name"],
+        level: 3,
         data: null,
       });
     },
@@ -238,7 +240,7 @@ export default {
      * Show popover data options
      */
     onClickData() {
-      let taskList = this.data[0].id.toLowerCase(),
+      let taskList = this.data[1].id.toLowerCase(),
         obj = [
           {
             autoshow: false,
@@ -246,10 +248,10 @@ export default {
             filterVar: "process",
             label: "",
             options: {
-              label: this.data[1]["name"],
-              value: this.data[1]["id"],
+              label: this.data[2]["name"],
+              value: this.data[2]["id"],
             },
-            value: this.data[1]["id"],
+            value: this.data[2]["id"],
           },
           {
             autoShow: false,
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
index 82e9f02b5..9d2f06c45 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
@@ -84,7 +84,7 @@ export default {
               that.$emit("updateDataLevel", {
                 id: that.currentSelection["List Name"],
                 name: that.currentSelection["List Name"],
-                level: 0,
+                level: 1,
                 data: that.currentSelection,
               });
             },
diff --git a/resources/assets/js/home/TaskMetrics/VueCharts.vue b/resources/assets/js/home/TaskMetrics/VueCharts.vue
index 2313fb54c..ec48719b9 100644
--- a/resources/assets/js/home/TaskMetrics/VueCharts.vue
+++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue
@@ -8,24 +8,21 @@
     <vue-chart-lv-one
       :key="key1"
       v-show="level === 1"
-      :data="data"
-      @onChangeLevel="onChangeLevel"
+      :data="levels"
       @updateDataLevel="updateDataLevel"
       :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-two
       :key="key2"
       v-show="level === 2"
-      :data="data"
-      @onChangeLevel="onChangeLevel"
+      :data="levels"
       @updateDataLevel="updateDataLevel"
       :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-three
       :key="key3"
       v-show="level === 3"
-      :data="data"
-      @onChangeLevel="onChangeLevel"
+      :data="levels"
       :breadCrumbs="dataBreadCrumbs()"
     />
   </div>
@@ -47,15 +44,15 @@ export default {
     VueChartLvTwo,
     VueChartLvThree,
   },
-  props: [],
+  props: ["levels"], 
   data() {
-    let that = this;
+    let that = this;  
     return {
-      level: 0,
+      // level: 0,
       key1: _.random(0,100),
       key2: _.random(0,100),
       key3: _.random(0,100),
-      data: [],
+      // data: [],
       settingsBreadCrumbs: [
         {
           class: "fas fa-info-circle",
@@ -67,7 +64,12 @@ export default {
   created() {},
   mounted() {},
   watch: {},
-  computed: {},
+  computed: {
+      level: function () {
+        //return 0
+        return _.find(this.levels, {'active': true }).level;
+      }
+  },
   updated() {},
   beforeCreate() {},
   methods: {
@@ -75,13 +77,12 @@ export default {
      * Set data level 0
      */
     updateDataLevel(data) {
-      this.data.push(data);
-      this.level = data.level + 1;
-      this.$emit("onChangeLevel", data.level + 1);
-      this.updateKey();
+      this.$emit("onChangeLevel", data);
+      this.updateKey(data.level);
     },
-    updateKey() {
-      switch (this.level) {
+    updateKey(level) {
+      debugger;
+      switch (level) {
         case 0:
           break;
         case 1:
@@ -95,26 +96,6 @@ export default {
           break;
       }
     },
-    /**
-     * Format data to vue charts any level
-     */
-    formatData() {
-      return {
-        level: this.level,
-        data: this.data,
-      };
-    },
-    /**
-     * Change level with changes in data
-     * @param {object} lv
-     */
-    onChangeLevel(lv) {
-      _.remove(this.data, function (n) {
-        return n.level >= lv;
-      });
-      this.level = lv;
-      this.$emit("onChangeLevel", this.level);
-    },
     /**
      * Format data for data beadcrumbs
      */
@@ -122,12 +103,12 @@ export default {
       let res = [],
         that = this,
         index = 0;
-      _.each(this.data, (el) => {
+      _.each(this.levels, (el) => {
         if (index <= that.level && el.data) {
           res.push({
             label: el.name,
             onClick() {
-              that.onChangeLevel(el.level);
+               this.$emit("onChangeLevel", el);
             },
           });
         }