use useFetch

package-lock.json

@@ -8,6 +8,7 @@
       "name": "sensor-web-v2",
       "version": "1.0.0",
       "dependencies": {
+        "@vueuse/core": "^10.2.1",
         "bulma": "^0.9.4",
         "dayjs": "^1.11.7",
         "dotenv": "^16.0.3",
@@ -1244,6 +1245,11 @@
       "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
+    },
     "node_modules/@types/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -1716,6 +1722,89 @@
         "@vue/language-core": "1.8.3"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.2.1.tgz",
+      "integrity": "sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.17",
+        "@vueuse/metadata": "10.2.1",
+        "@vueuse/shared": "10.2.1",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.2.1.tgz",
+      "integrity": "sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.2.1.tgz",
+      "integrity": "sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==",
+      "dependencies": {
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -6247,6 +6336,11 @@
       "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
       "dev": true
     },
+    "@types/web-bluetooth": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
+    },
     "@types/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -6588,6 +6682,46 @@
         "@vue/language-core": "1.8.3"
       }
     },
+    "@vueuse/core": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.2.1.tgz",
+      "integrity": "sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.17",
+        "@vueuse/metadata": "10.2.1",
+        "@vueuse/shared": "10.2.1",
+        "vue-demi": ">=0.14.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.5",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+          "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.2.1.tgz",
+      "integrity": "sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ=="
+    },
+    "@vueuse/shared": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.2.1.tgz",
+      "integrity": "sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==",
+      "requires": {
+        "vue-demi": ">=0.14.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.5",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+          "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+          "requires": {}
+        }
+      }
+    },
     "accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@vueuse/core": "^10.2.1",
     "bulma": "^0.9.4",
     "dayjs": "^1.11.7",
     "dotenv": "^16.0.3",

src/components/Chart.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watchEffect, toRefs, nextTick } from 'vue'
+import { ref, computed, watch } from 'vue'
 import * as Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader.vue'
@@ -13,6 +13,7 @@ import { capitalizeFirstLetter } from '@/utils/helpers'
 import type { Window } from '@/utils/types'
 import type { navType } from '@/utils/types'
 import { typeApi } from '@/utils/types'
+import { useFetch } from '@vueuse/core'
 
 Highcharts.setOptions({
   time: {
@@ -25,28 +26,30 @@ const props = defineProps<{
   activeType: navType | null
 }>()
 
-const data = ref([])
-const loading = ref(false)
 const chart = ref<HTMLElement | null>(null)
-const { activeWindow, activeType } = toRefs(props)
 
-const fetchData = async (window: Window, type: navType) => {
+const fetchUrl = computed(() => {
-  loading.value = true
+  const [start, end] = [props.activeWindow.getStart(), props.activeWindow.getEnd()]
-  try {
-    const [start, end] = [window.getStart(), window.getEnd()]
   const sample = Math.round((end - start) / 60 / 288) || 1
   const host = import.meta.env.MODE === 'development' ? 'http://localhost:3000' : ''
-    const fetchUrl = `${host}/type/${typeApi[type]}/startDate/${start}/endDate/${end}/sample/${sample}`
+  const fetchUrl = `${host}/type/${
-    const response = await fetch(fetchUrl)
+    typeApi[props.activeType || 'temperatuur']
-    loading.value = false
+  }/startDate/${start}/endDate/${end}/sample/${sample}`
-    return response.json()
+  return fetchUrl
-  } catch (err) {
+})
-    console.log(err)
+
-  }
+interface ChartDataPoint {
+  date: Number
+  value: Number
 }
+const { data: chartData, isFetching: loading } = useFetch(fetchUrl, { refetch: true }).json<ChartDataPoint[]>()
+
+watch([chart, chartData], () => {
+  if (chart.value && chartData.value) renderChart()
+})
 
 const renderChart = () => {
-  const chartData = data.value.map(({ date, value }) => ({ x: date, y: value }))
+  const data = (chartData.value || []).map(({ date, value }) => ({ x: date, y: value })) as any[]
   Highcharts.chart({
     chart: { renderTo: chart.value || '', styledMode: true, marginBottom: 25 },
     title: { text: '' },
@@ -68,24 +71,17 @@ const renderChart = () => {
     yAxis: {
       labels: {
         formatter() {
-          const suffix = activeType.value === 'temperatuur' ? '°C' : '%'
+          const suffix = props.activeType === 'temperatuur' ? '°C' : '%'
           return this.value + suffix
         }
       },
       title: { text: null },
       minTickInterval: 0.1
     },
-    series: [{ name: capitalizeFirstLetter(activeType.value || ''), data: chartData, type: 'line' }],
+    series: [{ name: capitalizeFirstLetter(props.activeType || ''), data: data, type: 'line' }],
     credits: { enabled: false }
   })
 }
-
-watchEffect(async () => {
-  if (activeWindow.value && activeType.value) {
-    data.value = await fetchData(activeWindow.value, activeType.value)
-    if (data.value.length > 0) nextTick(() => renderChart())
-  }
-})
 </script>
 
 <style lang="scss">