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

src/components/Loader.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 <style scoped lang="scss">
-@import "@/style/_variables.scss";
+@import '@/style/_variables.scss';
 .lds-ring {
   display: inline-block;
   position: relative;

src/components/Main.vue

@@ -8,53 +8,42 @@
     <router-view></router-view>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import NavBar from '@/components/NavBar.vue'
 import TimeWindows from '@/components/TimeWindows.vue'
 import Chart from '@/components/Chart.vue'
-export default {
-  components: {
-    NavBar,
-    TimeWindows,
-    Chart
-  },
-  setup() {
-    const type = ref(null)
-    const window = ref({})
-    const router = useRouter()
-    const currentRoute = router.currentRoute
-    if (currentRoute.value.params.type) type.value = currentRoute.value.params.type
-    if (currentRoute.value.params.window) window.value = { label: currentRoute.value.params.window }
-    const updateRoute = () => {
-      if (type.value) {
-        const route = {
-          name: 'view',
-          params: {
-            type: type.value,
-            window: window.value.label ? window.value.label.replace(' ', '-') : undefined
-          }
-        }
-        router.push(route)
+import { windows } from '@/utils/helpers'
+import type { Window } from '@/utils/types'
+
+const type = ref<string>('')
+const window = ref<Window | undefined>(undefined)
+const router = useRouter()
+const currentRoute = useRoute()
+if (currentRoute.params.type) type.value = currentRoute.params.type as string
+if (currentRoute.params.window) window.value = windows.find((w) => w.label === currentRoute.params.window)
+
+const updateRoute = () => {
+  if (type.value) {
+    const route = {
+      name: 'view',
+      params: {
+        type: type.value,
+        window: window.value?.label.replace(' ', '-')
       }
     }
-    const setType = (newType) => {
-      type.value = newType
-      updateRoute()
-    }
-    const setWindow = (newWindow) => {
-      window.value = newWindow
-      updateRoute()
-    }
-    return {
-      type,
-      window,
-      setType,
-      setWindow
-    }
+    router.push(route)
   }
 }
+const setType = (newType: string) => {
+  type.value = newType
+  updateRoute()
+}
+const setWindow = (newWindow: Window) => {
+  window.value = newWindow
+  updateRoute()
+}
 </script>
 <style scoped>
 #app {

src/components/NavBar.vue

@@ -21,44 +21,39 @@
       <div class="navbar-start">
         <a
           class="navbar-item"
-          :class="{ 'is-active': type === activeType }"
-          :key="type"
-          v-for="type in navTypes"
-          @click="setType(type)"
-          >{{ capitalizeFirstLetter(type) }}</a
+          :class="{ 'is-active': navType === activeType }"
+          :key="navType"
+          v-for="navType in navTypes"
+          @click="setType(navType)"
+          >{{ capitalizeFirstLetter(navType) }}</a
         >
       </div>
     </div>
   </nav>
 </template>
-<script>
-import { ref, onMounted } from 'vue'
+<script setup lang="ts">
 import { capitalizeFirstLetter } from '@/utils/helpers'
-export default {
-  props: ['activeType'],
-  setup(props, { emit }) {
-    const toggled = ref(false)
-    const navTypes = ref(['temperatuur', 'luchtvochtigheid'])
-    onMounted(() => {
-      if (!props.activeType) {
-        emit('set-type', navTypes.value[0])
-      }
-    })
-    const toggleMenu = () => {
-      toggled.value = !toggled.value
-    }
-    const setType = (type) => {
-      toggled.value = false
-      emit('set-type', type)
-    }
-    return {
-      capitalizeFirstLetter,
-      navTypes,
-      toggled,
-      toggleMenu,
-      setType
-    }
+import { ref, onMounted } from 'vue'
+
+const props = defineProps<{
+  activeType: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'set-type', type: string): void
+}>()
+
+const toggled = ref(false)
+const navTypes = ref<string[]>(['temperatuur', 'luchtvochtigheid'])
+onMounted(() => {
+  if (!props.activeType) {
+    emit('set-type', navTypes.value[0])
   }
+})
+const toggleMenu = () => (toggled.value = !toggled.value)
+const setType = (type: string) => {
+  toggled.value = false
+  emit('set-type', type)
 }
 </script>
 <style scoped lang="scss">

src/components/TimeWindows.vue

@@ -4,84 +4,31 @@
       <li
         v-for="window in windows"
         :key="window.label"
-        @click="$emit('set-window', window)"
-        :class="{ 'is-active': window.label === activeWindow.label }"
+        @click="emit('set-window', window)"
+        :class="{ 'is-active': window.label === activeWindow?.label }"
       >
         <a>{{ window.label }}</a>
       </li>
     </ul>
   </div>
 </template>
-<script>
-import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-export default {
-  props: {
-    activeWindow: {
-      type: Object
-    }
-  },
-  setup(props, { emit }) {
-    const windows = ref([
-      {
-        label: 'afgelopen uur',
-        getStart: () => dayjs().subtract(1, 'hour').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'HH:mm',
-        interval: 4
-      },
-      {
-        label: '24 uur',
-        getStart: () => dayjs().subtract(1, 'days').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'HH:mm',
-        interval: 4
-      },
-      {
-        label: 'vandaag',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(24, 'hours').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'HH:mm',
-        interval: 4
-      },
-      {
-        label: '3 dagen',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(3, 'days').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24
-      },
-      {
-        label: 'week',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(7, 'days').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24
-      },
-      {
-        label: 'maand',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'months').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24
-      },
-      {
-        label: 'jaar',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'year').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24 * 7
-      }
-    ])
-    onMounted(() => {
-      const activeWindow = !props.activeWindow.label
-        ? windows.value[1]
-        : windows.value.find((w) => w.label === props.activeWindow.label.replace('-', ' '))
-      emit('set-window', activeWindow)
-    })
-    return {
-      windows
-    }
-  }
-}
+<script setup lang="ts">
+import { onMounted, defineProps, defineEmits } from 'vue'
+import { windows } from '@/utils/helpers'
+import type { Window } from '@/utils/types'
+
+const props = defineProps<{
+  activeWindow: Window | undefined
+}>()
+
+const emit = defineEmits<{
+  (e: 'set-window', window: Window): void
+}>()
+
+onMounted(() => {
+  const activeWindow = !props.activeWindow?.label
+    ? windows[1]
+    : windows.find((w) => w.label === props.activeWindow?.label.replace('-', ' '))
+  if (activeWindow) emit('set-window', activeWindow)
+})
 </script>

src/utils/helpers.js

@@ -1,3 +0,0 @@
-export function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
-}

src/utils/helpers.ts

@@ -0,0 +1,58 @@
+import dayjs from 'dayjs'
+import type { Window } from '@/utils/types'
+
+export function capitalizeFirstLetter(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+export const windows: Window[] = [
+  {
+    label: 'afgelopen uur',
+    getStart: () => dayjs().subtract(1, 'hour').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'HH:mm',
+    interval: 4
+  },
+  {
+    label: '24 uur',
+    getStart: () => dayjs().subtract(1, 'days').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'HH:mm',
+    interval: 4
+  },
+  {
+    label: 'vandaag',
+    getStart: () => dayjs().startOf('day').add(1, 'day').subtract(24, 'hours').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'HH:mm',
+    interval: 4
+  },
+  {
+    label: '3 dagen',
+    getStart: () => dayjs().startOf('day').add(1, 'day').subtract(3, 'days').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'ddd D/M',
+    interval: 24
+  },
+  {
+    label: 'week',
+    getStart: () => dayjs().startOf('day').add(1, 'day').subtract(7, 'days').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'ddd D/M',
+    interval: 24
+  },
+  {
+    label: 'maand',
+    getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'months').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'ddd D/M',
+    interval: 24
+  },
+  {
+    label: 'jaar',
+    getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'year').unix(),
+    getEnd: () => dayjs().unix(),
+    format: 'ddd D/M',
+    interval: 24 * 7
+  }
+]

src/utils/types.ts

@@ -0,0 +1,7 @@
+export interface Window {
+  label: string
+  getStart: { (): number }
+  getEnd: { (): number }
+  format: string
+  interval: number
+}