update Vue CHart

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

@@ -85,12 +85,6 @@ export default {
       ],
       dataCasesByRange: [],
       width: 0,
-      series: [
-        {
-          name: "Process",
-          data: [],
-        },
-      ],
       options: {
         chart: {
           type: "area",
@@ -98,29 +92,35 @@ export default {
             enabled: false,
           },
           id: "LevelTwoChart",
+          events: {
+            markerClick: function (event, chartContext, config) {
+              that.currentSelection = that.dataCasesByRange[config.seriesIndex];
+              that.$emit("updateDataLevel", {
+                id: that.currentSelection["PRO_ID"],
+                name: that.currentSelection["PRO_TITLE"],
+                level: 2,
+                data: that.currentSelection,
+              });
+            },
+          },
         },
         dataLabels: {
-          enabled: true,
+          enabled: false,
         },
         stroke: {
-          curve: "straight",
+          curve: "smooth",
         },
-
-        title: {
-          text: "",
-          align: "left",
-        },
-        labels: [],
         xaxis: {
           type: "datetime",
         },
-        yaxis: {
-          opposite: false,
-        },
-        legend: {
-          horizontalAlign: "left",
+        tooltip: {
+          fixed: {
+            enabled: false,
+            position: "topRight",
+          },
         },
       },
+      series: [],
     };
   },
   created() {},

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

@@ -17,6 +17,13 @@
       v-show="level === 2"
       :data="data"
       @onChangeLevel="onChangeLevel"
+      @updateDataLevel="updateDataLevel"
+      :breadCrumbs="dataBreadCrumbs()"
+    />
+    <vue-chart-lv-three
+      v-show="level === 3"
+      :data="data"
+      @onChangeLevel="onChangeLevel"
       :breadCrumbs="dataBreadCrumbs()"
     />
   </div>
@@ -26,6 +33,7 @@
 import VueChartLvZero from "./VueChartLvZero.vue";
 import VueChartLvOne from "./VueChartLvOne.vue";
 import VueChartLvTwo from "./VueChartLvTwo.vue";
+import VueChartLvThree from "./VueChartLvThree.vue";
 
 export default {
   name: "VueCharts",
@@ -34,6 +42,7 @@ export default {
     VueChartLvZero,
     VueChartLvOne,
     VueChartLvTwo,
+    VueChartLvThree,
   },
   props: [],
   data() {