use useFetch

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">