first chart

package-lock.json

@@ -6229,6 +6229,11 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "highcharts": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-7.1.2.tgz",
+      "integrity": "sha512-diSTVxWKefQzShi22gaV63pdrIFlQAsTGe3f328Ur7cqBoYFvHMtiMP+q+VOFdM2mdGVtlUR0QQSxj62LLsPpg=="
+    },
     "highlight.js": {
       "version": "9.15.8",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.8.tgz",

package.json

@@ -3,16 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 8080",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "chartist": "^0.11.2",
-    "core-js": "^2.6.5",
     "dayjs": "^1.8.14",
     "dotenv": "^8.0.0",
     "express": "^4.17.1",
+    "highcharts": "^7.1.2",
     "mongodb": "^3.2.7",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",

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>

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from '@/App'
 import router from '@/router'
 import store from '@/store'
-import '@/style.scss'
+import '@/style/style.scss'
 
 Vue.config.productionTip = false