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;