first chart

src/components/Chart.vue

@@ -1,17 +1,32 @@
 <template>
-  <div ref="chart">chart</div>
+  <div>
+    <div class="loader-container" v-if="loading">
+      <Loader></Loader>
+    </div>
+    <div v-else>
+      <div ref="chart"></div>
+    </div>
+  </div>
 </template>
 <script>
+import Highcharts from 'highcharts'
+import 'highcharts/css/highcharts.scss'
+import Loader from '@/components/Loader'
 export default {
   props: ['window', 'type'],
+  components: {
+    Loader
+  },
   data() {
     return {
-      data: []
+      data: [],
+      loading: false
     }
   },
   methods: {
     async fetchData() {
       if (this.window.label) {
+        this.loading = true
         try {
           const [start, end] = [this.window.getStart(), this.window.getEnd()]
           const sample = Math.round(((end - start) / 60) / 288) || 1
@@ -19,13 +34,28 @@ export default {
           const fetchUrl = `${host}/type/${this.type}/startDate/${start}/endDate/${end}/sample/${sample}`
           const response = await fetch(fetchUrl)
           this.data = await response.json()
+          this.loading = false
         } catch (err) {
           console.log(err)
         }
       }
     },
     renderChart() {
-      console.log('render chart', this.data)
+      const data = this.data.map(({ date, value }) => ({ x: date * 1000, y: value }))
+      Highcharts.chart(this.$refs.chart, {
+        chart: {
+          styledMode: true
+        },
+        xAxis: {
+          type: 'datetime'
+        },
+        series: [{
+          data
+        }],
+        credits: {
+          enabled: false
+        }
+      })
     }
   },
   watch: {
@@ -36,8 +66,21 @@ export default {
       this.fetchData()
     },
     data() {
-      this.renderChart()
+      this.$nextTick(() => this.renderChart())
     }
   }
 }
 </script>
+
+<style lang="scss">
+@import "@/style/style.scss";
+.loader-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.highcharts-color-0 {
+  fill: $primary;
+  stroke: $primary;
+}
+</style>

src/components/Loader.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="lds-ring">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</template>
+<style scoped lang="scss">
+@import "@/style/style.scss";
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 51px;
+  height: 51px;
+  margin: 6px;
+  border: 6px solid $grey;
+  border-radius: 50%;
+  animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: $grey transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.2s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.1s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>