update task metrics

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

@@ -1,16 +1,27 @@
 <template>
-  <div
-    id="v-pm-charts"
-    ref="v-pm-charts"
-    class="v-pm-charts vp-inline-block"
-  >
-  <vue-chart-lv-one/>
+  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+    <vue-chart-lv-zero
+      v-show="level === 0"
+      @updateDataLevel="updateDataLevel"
+    />
+    <vue-chart-lv-one
+      v-if="level === 1"
+      :data="data"
+      @onChangeLevel="onChangeLevel"
+      @updateDataLevel="updateDataLevel"
+    />
+    <vue-chart-lv-two
+      v-if="level === 2"
+      :data="data"
+      @onChangeLevel="onChangeLevel"
+    />
   </div>
 </template>
 
 <script>
 import VueChartLvZero from "./VueChartLvZero.vue";
 import VueChartLvOne from "./VueChartLvOne.vue";
+import VueChartLvTwo from "./VueChartLvTwo.vue";
 
 export default {
   name: "VueCharts",
@@ -18,12 +29,15 @@ export default {
   components: {
     VueChartLvZero,
     VueChartLvOne,
+    VueChartLvTwo,
   },
   props: [],
   data() {
     let that = this;
     return {
-      width: 0,
+      level: 0,
+      data: [],
+      dataBreadCrumbs: [],
     };
   },
   created() {},
@@ -32,7 +46,31 @@ export default {
   computed: {},
   updated() {},
   beforeCreate() {},
-  methods: {},
+  methods: {
+    /**
+     * Set data level 0
+     */
+    updateDataLevel(data) {
+      this.data.push(data);
+      this.level = data.level + 1;
+      this.$emit("onChangeLevel", this.level);
+    },
+
+    /**
+     * Format data to vue charts any level
+     */
+    formatData() {
+      return {
+        level: this.level,
+        data: this.data,
+      };
+    },
+    onChangeLevel(lv) {
+      console.log("leveeeeeeeeeeeeeee");
+      this.level = lv;
+      this.$emit("onChangeLevel", this.level);
+    },
+  },
 };
 </script>
 <style>