update

package.json

@@ -8,23 +8,23 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "bulma": "^0.9.3",
+    "bulma": "^0.9.4",
     "dayjs": "^1.11.1",
     "dotenv": "^16.0.0",
     "express": "^4.18.1",
     "highcharts": "^10.1.0",
     "mongodb": "^4.5.0",
-    "sass": "^1.51.0",
-    "vue": "^3.2.33",
-    "vue-router": "^4.0.14"
+    "sass": "^1.53.0",
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.2"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.0",
-    "@vitejs/plugin-vue": "^2.3.1",
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@vitejs/plugin-vue": "^3.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",
-    "eslint": "^8.5.0",
-    "eslint-plugin-vue": "^8.2.0",
-    "prettier": "^2.5.1",
-    "vite": "^2.9.5"
+    "eslint": "^8.19.0",
+    "eslint-plugin-vue": "^9.2.0",
+    "prettier": "^2.7.1",
+    "vite": "^3.0.0"
   }
 }

src/components/Chart.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 <script>
-import { ref, watch, toRefs, nextTick } from 'vue'
+import { ref, watch, toRefs, nextTick, onMounted } from 'vue'
 import Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader.vue'
@@ -37,7 +37,6 @@ export default {
         try {
           const [start, end] = [window.value.getStart(), window.value.getEnd()]
           const sample = Math.round((end - start) / 60 / 288) || 1
-          console.log(import.meta.env.MODE)
           const host = import.meta.env.MODE === 'development' ? 'http://localhost:3000' : ''
           const fetchUrl = `${host}/type/${typeApi[type.value]}/startDate/${start}/endDate/${end}/sample/${sample}`
           const response = await fetch(fetchUrl)
@@ -87,8 +86,14 @@ export default {
         fetchData()
       }
     })
-    watch(data, () => {
-      nextTick(() => renderChart())
+    onMounted(() => {
+      watch(
+        data,
+        () => {
+          if (data.value.length > 0) nextTick(() => renderChart())
+        },
+        { immediate: true }
+      )
     })
     return {
       loading,