complete migration to vue 3

src/App.vue

@@ -8,6 +8,8 @@
   </div>
 </template>
 <script>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import NavBar from '@/components/NavBar'
 import TimeWindows from '@/components/TimeWindows'
 import Chart from '@/components/Chart'
@@ -17,38 +19,39 @@ export default {
     TimeWindows,
     Chart
   },
-  data() {
+  setup() {
-    return {
+    const type = ref(null)
-      type: null,
+    const window = ref({})
-      window: {}
+    const route = useRoute()
-    }
+    const router = useRouter()
-  },
+    if (route.params.type) type.value = route.params.type
-  created() {
+    if (route.params.window) window.value = route.params.window
-    const { type, window } = this.$route.params
+    const updateRoute = () => {
-    if (type) this.type = type
+      if (type.value) {
-    if (window) this.window = window
-  },
-  methods: {
-    setType(type) {
-      this.type = type
-      this.updateRoute()
-    },
-    setWindow(window) {
-      this.window = window
-      this.updateRoute()
-    },
-    updateRoute() {
-      if (this.type) {
         const route = {
           name: 'view',
           params: {
-            type: this.type,
+            type: type.value,
-            window: this.window.label ? this.window.label.replace(' ', '-') : undefined
+            window: window.value.label ? window.value.label.replace(' ', '-') : undefined
           }
         }
-        this.$router.push(route)
+        router.push(route)
       }
     }
+    const setType = (newType) => {
+      type.value = newType
+      updateRoute()
+    }
+    const setWindow = (newWindow) => {
+      window.value = newWindow
+      updateRoute()
+    }
+    return {
+      type,
+      window,
+      setType,
+      setWindow
+    }
   }
 }
 </script>

src/components/Chart.vue

@@ -29,7 +29,6 @@ export default {
 
     const fetchData = async () => {
       if (window.value && type.value) {
-        console.log(window.value, type.value)
         loading.value = true
         const typeApi = {
           temperatuur: 'temperature',
@@ -81,38 +80,6 @@ export default {
         series: [{ name: capitalizeFirstLetter(type.value), data: chartData }],
         credits: { enabled: false }
       })
-      // 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() {
-      //         console.log(type)
-      //         const suffix = type === 'temperatuur' ? '°C' : '%'
-      //         return this.value + suffix
-      //       }
-      //     },
-      //     title: { enabled: false },
-      //     minTickInterval: 0.1
-      //   },
-      //   series: [{ name: capitalizeFirstLetter(type.value), chartData }],
-      //   credits: { enabled: false }
-      // })
     }
     watch([window, type], ([newWindow, newType], [oldWindow, oldType]) => {
       if (newWindow !== oldWindow || newType !== oldType) {