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>