From dbca57d7e11bd13e4b400c3f25d5652069fdc95f Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Mon, 1 Jul 2019 20:58:02 +0200
Subject: [PATCH] update

---
 src/App.vue                    | 32 ++++++++++++++++-
 src/components/Chart.vue       | 66 ++++++++++++++++++++++++++--------
 src/components/Loader.vue      |  4 +--
 src/components/NavBar.vue      |  2 +-
 src/components/TimeWindows.vue | 11 ++++--
 src/style/_variables.scss      |  4 +++
 src/style/style.scss           |  4 +++
 7 files changed, 102 insertions(+), 21 deletions(-)
 create mode 100644 src/style/_variables.scss

diff --git a/src/App.vue b/src/App.vue
index 343aca2..5c12326 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Chart.vue b/src/components/Chart.vue
index dc95fc4..87720c9 100644
--- a/src/components/Chart.vue
+++ b/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>
diff --git a/src/components/Loader.vue b/src/components/Loader.vue
index a5de830..e3a638b 100644
--- a/src/components/Loader.vue
+++ b/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;
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index d0b2e70..ea188ef 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -44,7 +44,7 @@ export default {
     }
   },
   mounted() {
-    if (!this.activeType.label) {
+    if (!this.activeType) {
       this.$emit('setType', this.navTypes[0])
     }
   },
diff --git a/src/components/TimeWindows.vue b/src/components/TimeWindows.vue
index 92d2a1d..26e0c35 100644
--- a/src/components/TimeWindows.vue
+++ b/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])
     }
   }
diff --git a/src/style/_variables.scss b/src/style/_variables.scss
new file mode 100644
index 0000000..2d9b081
--- /dev/null
+++ b/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";
\ No newline at end of file
diff --git a/src/style/style.scss b/src/style/style.scss
index 112f430..abb1e2c 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -1,2 +1,6 @@
 @charset "utf-8";
+html, body {
+    height: 100%;
+}
+@import "./variables";
 @import "~bulma/bulma";