migrate to composition api

2020-09-20 17:37:57 +02:00
parent 5597cc54cf
commit 04c7de40ce
4 changed files with 123 additions and 105 deletions
--- a/src/components/Chart.vue
+++ b/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;
--- a/src/components/NavBar.vue
+++ b/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
-    }
-  },
-  computed: {
-    navTypes() {
-      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)
+      capitalizeFirstLetter,
+      navTypes,
+      toggled,
+      toggleMenu,
+      setType
    }
  }
 }
 </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;
--- a/src/components/TimeWindows.vue
+++ b/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() {
-    return {
-      windows: [{
+  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
-      }]
-    }
-  },
-  mounted() {
-    if (typeof this.activeWindow === 'string') {
-      const window = this.windows.find(w => w.label === this.activeWindow.replace('-', ' '))
-      this.$emit('set-window', window)
-    } else if (!this.activeWindow.label) {
-      this.$emit('set-window', this.windows[1])
+      }
+    ])
+    onMounted(() => {
+      if (!props.activeWindow.label) emit('set-window', windows.value[1])
+    })
+    return {
+      windows
    }
  }
 }
--- a/src/store.js
+++ b/src/store.js
@@ -1,13 +0,0 @@
-import { createStore } from 'vuex'
-
-export default new Vuex.Store({
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  }
-})