convert codebase to typescript

src/components/Chart.vue

@@ -4,103 +4,100 @@
     <div class="chart" id="chart" ref="chart" v-else></div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import { ref, watch, toRefs, nextTick, onMounted } from 'vue'
-import Highcharts from 'highcharts'
+import * as Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader.vue'
 import { capitalizeFirstLetter } from '@/utils/helpers'
+import type { Window } from '@/utils/types'
 
 Highcharts.setOptions({
   time: {
     timezoneOffset: new Date().getTimezoneOffset()
   }
 })
-export default {
-  props: ['window', 'type'],
-  components: {
-    Loader
-  },
-  setup(props) {
-    const data = ref([])
-    const loading = ref(false)
-    const chart = ref(null)
-    const { window, type } = 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]}/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 props = defineProps<{
+  window: Window | undefined
+  type: string
+}>()
+
+const data = ref([])
+const loading = ref(false)
+const chart = ref<HTMLElement | null>(null)
+const { window, type } = toRefs(props)
+
+const fetchData = async () => {
+  if (window.value && type.value) {
+    loading.value = true
+    const typeApi = {
+      temperatuur: 'temperature',
+      luchtvochtigheid: 'humidity'
     }
-    const renderChart = () => {
-      const chartData = data.value.map(({ date, value }) => ({ x: date, y: value }))
-      Highcharts.chart(chart.value, {
-        chart: { styledMode: true, marginBottom: 25 },
-        title: { text: '' },
-        legend: { enabled: false },
-        plotOptions: { series: { animation: false, marker: { enabled: false } } },
-        xAxis: {
-          type: 'datetime',
-          dateTimeLabelFormats: {
-            millisecond: '%H:%M:%S.%L',
-            second: '%H:%M:%S',
-            minute: '%H:%M',
-            hour: '%H:%M',
-            day: '%a %e %b',
-            week: '%e %b',
-            month: "%b '%y",
-            year: '%Y'
-          }
-        },
-        yAxis: {
-          labels: {
-            formatter() {
-              const suffix = type.value === 'temperatuur' ? '°C' : '%'
-              return this.value + suffix
-            }
-          },
-          title: { enabled: false },
-          minTickInterval: 0.1
-        },
-        series: [{ name: capitalizeFirstLetter(type.value), data: chartData }],
-        credits: { enabled: false }
-      })
-    }
-    watch([window, type], ([newWindow, newType], [oldWindow, oldType]) => {
-      if (newWindow !== oldWindow || newType !== oldType) {
-        fetchData()
-      }
-    })
-    onMounted(() => {
-      watch(
-        data,
-        () => {
-          if (data.value.length > 0) nextTick(() => renderChart())
-        },
-        { immediate: true }
-      )
-    })
-    return {
-      loading,
-      chart
+    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 renderChart = () => {
+  const chartData = data.value.map(({ date, value }) => ({ x: date, y: value }))
+  Highcharts.chart({
+    chart: { renderTo: chart.value || '', styledMode: true, marginBottom: 25 },
+    title: { text: '' },
+    legend: { enabled: false },
+    plotOptions: { series: { animation: false, marker: { enabled: false } } },
+    xAxis: {
+      type: 'datetime',
+      dateTimeLabelFormats: {
+        millisecond: '%H:%M:%S.%L',
+        second: '%H:%M:%S',
+        minute: '%H:%M',
+        hour: '%H:%M',
+        day: '%a %e %b',
+        week: '%e %b',
+        month: "%b '%y",
+        year: '%Y'
+      }
+    },
+    yAxis: {
+      labels: {
+        formatter() {
+          const suffix = type.value === 'temperatuur' ? '°C' : '%'
+          return this.value + suffix
+        }
+      },
+      title: { text: null },
+      minTickInterval: 0.1
+    },
+    series: [{ name: capitalizeFirstLetter(type.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 }
+  )
+})
 </script>
 
 <style lang="scss">