update

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>