refactor

src/components/Chart.vue

@@ -11,6 +11,8 @@ import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader.vue'
 import { capitalizeFirstLetter } from '@/utils/helpers'
 import type { Window } from '@/utils/types'
+import type { navType } from '@/utils/types'
+import { typeApi } from '@/utils/types'
 
 Highcharts.setOptions({
   time: {
@@ -20,7 +22,7 @@ Highcharts.setOptions({
 
 const props = defineProps<{
   activeWindow: Window
-  activeType: string
+  activeType: navType | null
 }>()
 
 const data = ref([])
@@ -28,19 +30,13 @@ const loading = ref(false)
 const chart = ref<HTMLElement | null>(null)
 const { activeWindow, activeType } = toRefs(props)
 
-const fetchData = async (window: Window, type: string) => {
+const fetchData = async (window: Window, type: navType) => {
   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 fetchUrl = `${host}/type/${typeApi[type]}/startDate/${start}/endDate/${end}/sample/${sample}`
     const response = await fetch(fetchUrl)
     loading.value = false
     return response.json()
@@ -79,7 +75,7 @@ const renderChart = () => {
       title: { text: null },
       minTickInterval: 0.1
     },
-    series: [{ name: capitalizeFirstLetter(activeType.value), data: chartData, type: 'line' }],
+    series: [{ name: capitalizeFirstLetter(activeType.value || ''), data: chartData, type: 'line' }],
     credits: { enabled: false }
   })
 }