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() {
+  setup(props) {
-    return {
+    const data = ref([])
-      data: [],
+    const loading = ref(false)
-      loading: false
+    const chart = ref(null)
-    }
+    const { window, type } = toRefs(props)
-  },
+
-  methods: {
+    const fetchData = async () => {
-    async fetchData() {
+      if (window.value && type.value) {
-      if (this.window.label) {
+        console.log(window.value, type.value)
-        this.loading = true
+        loading.value = true
         const typeApi = {
           temperatuur: 'temperature',
           luchtvochtigheid: 'humidity'
         }
         try {
-          const [start, end] = [this.window.getStart(), this.window.getEnd()]
+          const [start, end] = [window.value.getStart(), window.value.getEnd()]
-          const sample = Math.round(((end - start) / 60) / 288) || 1
+          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()
+          data.value = await response.json()
-          this.loading = false
+          loading.value = false
         } catch (err) {
           console.log(err)
         }
       }
-    },
+    }
-    renderChart() {
+    const renderChart = () => {
-      const type = this.type
+      const chartData = data.value.map(({ date, value }) => ({ x: date * 1000, y: value }))
-      const data = this.data.map(({ date, value }) => ({ x: date * 1000, y: value }))
+      Highcharts.chart(chart.value, {
-      Highcharts.chart(this.$refs.chart, {
         chart: { styledMode: true, marginBottom: 25 },
         title: { text: '' },
         legend: { enabled: false },
-        plotOptions: {
+        plotOptions: { series: { animation: false, marker: { enabled: false } } },
-          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, type], ([newWindow, newType], [oldWindow, oldType]) => {
-  watch: {
+      if (newWindow !== oldWindow || newType !== oldType) {
-    window() {
+        fetchData()
-      this.fetchData()
+      }
-    },
+    })
-    type() {
+    watch(data, () => {
-      this.fetchData()
+      nextTick(() => renderChart())
-    },
+    })
-    data() {
+    return {
-      this.$nextTick(() => this.renderChart())
+      loading,
+      chart
     }
   }
 }
 </script>
 
 <style lang="scss">
-@import "@/style/_variables.scss";
+@import '@/style/_variables.scss';
 .chart-container {
   display: flex;
   flex-direction: column;

src/components/NavBar.vue

@@ -8,7 +8,7 @@
         aria-label="menu"
         aria-expanded="false"
         data-target="navbarBasicExample"
-        :class="{'is-active': toggled}"
+        :class="{ 'is-active': toggled }"
         @click="toggleMenu"
       >
         <span aria-hidden="true"></span>
@@ -17,60 +17,58 @@
       </a>
     </div>
 
-    <div class="navbar-menu" :class="{'is-active': toggled}">
+    <div class="navbar-menu" :class="{ 'is-active': toggled }">
       <div class="navbar-start">
         <a
           class="navbar-item"
-          :class="{'is-active': type === activeType}"
+          :class="{ 'is-active': type === activeType }"
           :key="type"
           v-for="type in navTypes"
           @click="setType(type)"
-        >{{capitalizeFirstLetter(type)}}</a>
+          >{{ capitalizeFirstLetter(type) }}</a
+        >
       </div>
     </div>
   </nav>
 </template>
 <script>
+import { ref, onMounted } from 'vue'
 import { capitalizeFirstLetter } from '@/utils/helpers'
 export default {
   props: ['activeType'],
-  data() {
+  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 {
-      toggled: false
+      capitalizeFirstLetter,
-    }
+      navTypes,
-  },
+      toggled,
-  computed: {
+      toggleMenu,
-    navTypes() {
+      setType
-      return ['temperatuur', 'luchtvochtigheid']
-    }
-  },
-  mounted() {
-    if (!this.activeType) {
-      this.$emit('set-type', this.navTypes[0])
-    }
-  },
-  methods: {
-    toggleMenu() {
-      this.toggled = !this.toggled
-    },
-    capitalizeFirstLetter(string) {
-      return capitalizeFirstLetter(string)
-    },
-    setType(type) {
-      this.toggled = false
-      this.$emit('set-type', type)
     }
   }
 }
 </script>
 <style scoped lang="scss">
-@import "@/style/_variables.scss";
+@import '@/style/_variables.scss';
 .nav-title {
   font-weight: bold;
 }
 @media screen and (max-width: $navbar-breakpoint) {
   .navbar {
-    position: relative
+    position: relative;
   }
   .navbar-menu {
     position: absolute;

src/components/TimeWindows.vue

@@ -5,74 +5,79 @@
         v-for="window in windows"
         :key="window.label"
         @click="$emit('set-window', window)"
-        :class="{'is-active': window.label === activeWindow.label}"
+        :class="{ 'is-active': window.label === activeWindow.label }"
       >
-        <a>{{window.label}}</a>
+        <a>{{ window.label }}</a>
       </li>
     </ul>
   </div>
 </template>
 <script>
+import { ref, onMounted } from 'vue'
 import dayjs from 'dayjs'
 export default {
   props: {
     activeWindow: {
-      type: [Object, String]
+      type: Object
     }
   },
-  data() {
+  setup(props, { emit }) {
-    return {
+    const windows = ref([
-      windows: [{
+      {
         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(() => {
-  mounted() {
+      if (!props.activeWindow.label) emit('set-window', windows.value[1])
-    if (typeof this.activeWindow === 'string') {
+    })
-      const window = this.windows.find(w => w.label === this.activeWindow.replace('-', ' '))
+    return {
-      this.$emit('set-window', window)
+      windows
-    } else if (!this.activeWindow.label) {
-      this.$emit('set-window', this.windows[1])
     }
   }
 }

src/store.js

@@ -1,13 +0,0 @@
-import { createStore } from 'vuex'
-
-export default new Vuex.Store({
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  }
-})