update

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <NavBar :activeType="type" @setType="setType"></NavBar>
     <section class="section">
-      <TimeWindows :activeWindow="window" @setWindow="setWindow" ></TimeWindows>
+      <TimeWindows :activeWindow="window" @setWindow="setWindow"></TimeWindows>
       <Chart :window="window" :type="type"></Chart>
     </section>
   </div>
@@ -23,13 +23,43 @@ export default {
       window: {}
     }
   },
+  created() {
+    const { type, window } = this.$route.params
+    if (type) this.type = type
+    if (window) this.window = window
+  },
   methods: {
     setType(type) {
       this.type = type
+      this.updateRoute()
     },
     setWindow(window) {
       this.window = window
+      this.updateRoute()
+    },
+    updateRoute() {
+      this.$router.push({
+        name: 'view',
+        params: {
+          type: this.type,
+          window: this.window.label ? this.window.label.replace(' ', '-') : undefined
+        }
+      })
     }
   }
 }
 </script>
+<style scoped>
+#app {
+  height: 100%;
+}
+#app, .section {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.section {
+  padding-bottom: 0;
+  padding-top: 0;
+}
+</style>

src/components/Chart.vue

@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div class="chart-container">
     <div class="loader-container" v-if="loading">
       <Loader></Loader>
     </div>
     <div v-else>
+      <!-- <div>test</div> -->
       <div ref="chart"></div>
     </div>
   </div>
@@ -41,25 +42,42 @@ export default {
       }
     },
     renderChart() {
+      const type = this.type
       const data = this.data.map(({ date, value }) => ({ x: date * 1000, y: value }))
       Highcharts.chart(this.$refs.chart, {
-        chart: {
-          styledMode: true
-        },
+        chart: { styledMode: true },
+        title: { text: '' },
+        legend: { enabled: false },
         plotOptions: {
           series: {
-            animation: false
+            animation: false,
+            marker: { enabled: false }
           }
         },
         xAxis: {
-          type: 'datetime'
+          type: 'datetime',
+          dateTimeLabelFormats: {
+            millisecond: '%H:%M:%S.%L',
+            second: '%H:%M:%S',
+            minute: '%H:%M',
+            hour: '%H:%M',
+            day: '%e %b',
+            week: '%e %b',
+            month: '%b \'%y',
+            year: '%Y'
+          }
         },
-        series: [{
-          data
-        }],
-        credits: {
-          enabled: false
-        }
+        yAxis: {
+          labels: {
+            formatter() {
+              const suffix = type === 'temperature' ? '°C' : '%'
+              return this.value + suffix
+            }
+          },
+          title: { enabled: false }
+        },
+        series: [{ data }],
+        credits: { enabled: false }
       })
     }
   },
@@ -79,17 +97,35 @@ export default {
 
 <style lang="scss">
 @import "@/style/style.scss";
+.chart-container,
+.chart-container div {
+  // height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
 .loader-container {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+.highcharts-graph {
+  stroke-width: 3px;
+}
 .highcharts-color-0 {
   fill: $primary;
   stroke: $primary;
 }
-.highcharts-xaxis-grid .highcharts-grid-line {
-  stroke-width: 1px;
-  stroke: #d8d8d8;
+.highcharts-axis-line {
+  // stroke-width: 1px !important;
+  stroke: $border !important;
+}
+.highcharts-grid-line {
+  stroke-width: 1px !important;
+  stroke-dasharray: 5, 5 !important;
+  stroke: $border !important;
+}
+text {
+  font-size: 0.8rem;
 }
 </style>

src/components/Loader.vue

@@ -21,10 +21,10 @@
   width: 51px;
   height: 51px;
   margin: 6px;
-  border: 6px solid $grey;
+  border: 6px solid $border;
   border-radius: 50%;
   animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: $grey transparent transparent transparent;
+  border-color: $border transparent transparent transparent;
 }
 .lds-ring div:nth-child(1) {
   animation-delay: -0.3s;

src/components/NavBar.vue

@@ -44,7 +44,7 @@ export default {
     }
   },
   mounted() {
-    if (!this.activeType.label) {
+    if (!this.activeType) {
       this.$emit('setType', this.navTypes[0])
     }
   },

src/components/TimeWindows.vue

@@ -15,7 +15,11 @@
 <script>
 import dayjs from 'dayjs'
 export default {
-  props: ['activeWindow'],
+  props: {
+    activeWindow: {
+      type: [Object, String]
+    }
+  },
   data() {
     return {
       windows: [{
@@ -64,7 +68,10 @@ export default {
     }
   },
   mounted() {
-    if (!this.activeWindow.label) {
+    if (typeof this.activeWindow === 'string') {
+      const window = this.windows.find(w => w.label === this.activeWindow.replace('-', ' '))
+      this.$emit('setWindow', window)
+    } else if (!this.activeWindow.label) {
       this.$emit('setWindow', this.windows[1])
     }
   }

src/style/_variables.scss

@@ -0,0 +1,4 @@
+$primary: #2ecc71;
+$tabs-link-active-color: #3498db;
+$tabs-link-active-border-bottom-color: #3498db;	
+@import "~bulma/sass/utilities/_all.sass";

src/style/style.scss

@@ -1,2 +1,6 @@
 @charset "utf-8";
+html, body {
+    height: 100%;
+}
+@import "./variables";
 @import "~bulma/bulma";