use useFetch

2023-07-07 11:26:53 +02:00
parent 4271ada3d3
commit 401a80ada2
3 changed files with 158 additions and 27 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/Chart.vue
+++ b/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) => {
-  loading.value = true
-  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 response = await fetch(fetchUrl)
-    loading.value = false
-    return response.json()
-  } catch (err) {
-    console.log(err)
-  }
+const fetchUrl = computed(() => {
+  const [start, end] = [props.activeWindow.getStart(), props.activeWindow.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[props.activeType || 'temperatuur']
+  }/startDate/${start}/endDate/${end}/sample/${sample}`
+  return fetchUrl
+})
+
+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">