simplify code

src/components/Chart.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch, toRefs, nextTick, onMounted } from 'vue'
+import { ref, watchEffect, toRefs, nextTick } from 'vue'
 import * as Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader.vue'
@@ -19,35 +19,33 @@ Highcharts.setOptions({
 })
 
 const props = defineProps<{
-  window: Window | undefined
-  type: string
+  activeWindow: Window
+  activeType: string
 }>()
 
 const data = ref([])
 const loading = ref(false)
 const chart = ref<HTMLElement | null>(null)
-const { window, type } = toRefs(props)
+const { activeWindow, activeType } = toRefs(props)
 
-const fetchData = async () => {
-  if (window.value && type.value) {
-    loading.value = true
-    const typeApi = {
-      temperatuur: 'temperature',
-      luchtvochtigheid: 'humidity'
-    }
-    try {
-      const [start, end] = [window.value.getStart(), window.value.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.value as keyof typeof typeApi]
-      }/startDate/${start}/endDate/${end}/sample/${sample}`
-      const response = await fetch(fetchUrl)
-      loading.value = false
-      data.value = await response.json()
-    } catch (err) {
-      console.log(err)
-    }
+const fetchData = async (window: Window, type: string) => {
+  loading.value = true
+  const typeApi = {
+    temperatuur: 'temperature',
+    luchtvochtigheid: 'humidity'
+  }
+  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 as keyof typeof typeApi]
+    }/startDate/${start}/endDate/${end}/sample/${sample}`
+    const response = await fetch(fetchUrl)
+    loading.value = false
+    return response.json()
+  } catch (err) {
+    console.log(err)
   }
 }
 
@@ -74,29 +72,23 @@ const renderChart = () => {
     yAxis: {
       labels: {
         formatter() {
-          const suffix = type.value === 'temperatuur' ? '°C' : '%'
+          const suffix = activeType.value === 'temperatuur' ? '°C' : '%'
           return this.value + suffix
         }
       },
       title: { text: null },
       minTickInterval: 0.1
     },
-    series: [{ name: capitalizeFirstLetter(type.value), data: chartData, type: 'line' }],
+    series: [{ name: capitalizeFirstLetter(activeType.value), data: chartData, type: 'line' }],
     credits: { enabled: false }
   })
 }
 
-watch([window, type], () => {
-  fetchData(), { immediate: true }
-})
-onMounted(() => {
-  watch(
-    data,
-    () => {
-      if (data.value.length > 0) nextTick(() => renderChart())
-    },
-    { immediate: true }
-  )
+watchEffect(async () => {
+  if (activeWindow.value && activeType.value) {
+    data.value = await fetchData(activeWindow.value, activeType.value)
+    if (data.value.length > 0) nextTick(() => renderChart())
+  }
 })
 </script>