small updates

src/components/Chart.vue

@@ -3,8 +3,7 @@
     <div class="loader-container" v-if="loading">
       <Loader></Loader>
     </div>
-    <div v-else>
-      <!-- <div>test</div> -->
+    <div class="chart" v-else>
       <div ref="chart"></div>
     </div>
   </div>
@@ -13,6 +12,7 @@
 import Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader'
+import { capitalizeFirstLetter } from '@/utils/helpers'
 
 Highcharts.setOptions({
   time: {
@@ -34,11 +34,15 @@ export default {
     async fetchData() {
       if (this.window.label) {
         this.loading = 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 host = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : ''
-          const fetchUrl = `${host}/type/${this.type}/startDate/${start}/endDate/${end}/sample/${sample}`
+          const fetchUrl = `${host}/type/${typeApi[this.type]}/startDate/${start}/endDate/${end}/sample/${sample}`
           const response = await fetch(fetchUrl)
           this.data = await response.json()
           this.loading = false
@@ -76,14 +80,14 @@ export default {
         yAxis: {
           labels: {
             formatter() {
-              const suffix = type === 'temperature' ? '°C' : '%'
+              const suffix = type === 'temperatuur' ? '°C' : '%'
               return this.value + suffix
             }
           },
           title: { enabled: false },
           minTickInterval: 0.1
         },
-        series: [{ name: type, data }],
+        series: [{ name: capitalizeFirstLetter(type), data }],
         credits: { enabled: false }
       })
     }
@@ -104,17 +108,20 @@ export default {
 
 <style lang="scss">
 @import "@/style/_variables.scss";
-.chart-container,
-.chart-container div {
+.chart-container, .chart, .chart div {
   // height: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
+.chart-container {
+  margin-bottom: 24px;
+}
 .loader-container {
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
 }
 .highcharts-graph {
   stroke-width: 3px;

src/components/NavBar.vue

@@ -1,7 +1,7 @@
 <template>
   <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
-      <router-link to="/" class="navbar-item nav-title">DHT22</router-link>
+      <router-link to="/" class="navbar-item nav-title">dht22</router-link>
       <a
         role="button"
         class="navbar-burger burger"
@@ -31,6 +31,7 @@
   </nav>
 </template>
 <script>
+import { capitalizeFirstLetter } from '@/utils/helpers'
 export default {
   props: ['activeType'],
   data() {
@@ -40,7 +41,7 @@ export default {
   },
   computed: {
     navTypes() {
-      return ['temperature', 'humidity']
+      return ['temperatuur', 'luchtvochtigheid']
     }
   },
   mounted() {
@@ -53,7 +54,7 @@ export default {
       this.toggled = !this.toggled
     },
     capitalizeFirstLetter(string) {
-      return string.charAt(0).toUpperCase() + string.slice(1)
+      return capitalizeFirstLetter(string)
     },
     setType(type) {
       this.toggled = false

src/utils/helpers.js

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