migrate to composition api

src/components/Chart.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="chart-container">
     <Loader v-if="loading"></Loader>
-    <div class="chart" ref="chart" v-else></div>
+    <div class="chart" id="chart" ref="chart" v-else></div>
   </div>
 </template>
 <script>
+import { ref, watch, toRefs, nextTick } from 'vue'
 import Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader'
@@ -20,46 +21,40 @@ export default {
   components: {
     Loader
   },
-  data() {
-    return {
-      data: [],
-      loading: false
-    }
-  },
-  methods: {
-    async fetchData() {
-      if (this.window.label) {
-        this.loading = true
+  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) {
+        console.log(window.value, type.value)
+        loading.value = true
         const typeApi = {
           temperatuur: 'temperature',
           luchtvochtigheid: 'humidity'
         }
         try {
-          const [start, end] = [this.window.getStart(), this.window.getEnd()]
-          const sample = Math.round(((end - start) / 60) / 288) || 1
+          const [start, end] = [window.value.getStart(), window.value.getEnd()]
+          const sample = Math.round((end - start) / 60 / 288) || 1
           const host = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : ''
-          const fetchUrl = `${host}/type/${typeApi[this.type]}/startDate/${start}/endDate/${end}/sample/${sample}`
+          const fetchUrl = `${host}/type/${typeApi[type.value]}/startDate/${start}/endDate/${end}/sample/${sample}`
           const response = await fetch(fetchUrl)
-          this.data = await response.json()
-          this.loading = false
+          data.value = await response.json()
+          loading.value = false
         } catch (err) {
           console.log(err)
         }
       }
-    },
-    renderChart() {
-      const type = this.type
-      const data = this.data.map(({ date, value }) => ({ x: date * 1000, y: value }))
-      Highcharts.chart(this.$refs.chart, {
+    }
+    const renderChart = () => {
+      const chartData = data.value.map(({ date, value }) => ({ x: date * 1000, y: value }))
+      Highcharts.chart(chart.value, {
         chart: { styledMode: true, marginBottom: 25 },
         title: { text: '' },
         legend: { enabled: false },
-        plotOptions: {
-          series: {
-            animation: false,
-            marker: { enabled: false }
-          }
-        },
+        plotOptions: { series: { animation: false, marker: { enabled: false } } },
         xAxis: {
           type: 'datetime',
           dateTimeLabelFormats: {
@@ -69,41 +64,74 @@ export default {
             hour: '%H:%M',
             day: '%a %e %b',
             week: '%e %b',
-            month: '%b \'%y',
+            month: "%b '%y",
             year: '%Y'
           }
         },
         yAxis: {
           labels: {
             formatter() {
-              const suffix = type === 'temperatuur' ? '°C' : '%'
+              const suffix = type.value === 'temperatuur' ? '°C' : '%'
               return this.value + suffix
             }
           },
           title: { enabled: false },
           minTickInterval: 0.1
         },
-        series: [{ name: capitalizeFirstLetter(type), data }],
+        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() {
-      this.fetchData()
-    },
-    type() {
-      this.fetchData()
-    },
-    data() {
-      this.$nextTick(() => this.renderChart())
+    watch([window, type], ([newWindow, newType], [oldWindow, oldType]) => {
+      if (newWindow !== oldWindow || newType !== oldType) {
+        fetchData()
+      }
+    })
+    watch(data, () => {
+      nextTick(() => renderChart())
+    })
+    return {
+      loading,
+      chart
     }
   }
 }
 </script>
 
 <style lang="scss">
-@import "@/style/_variables.scss";
+@import '@/style/_variables.scss';
 .chart-container {
   display: flex;
   flex-direction: column;