From a953b56a65980cd596eab8828a0c7766a7ea8d82 Mon Sep 17 00:00:00 2001
From: Haris Razis <dev@xrazis.com>
Date: Mon, 23 Nov 2020 17:16:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20Add=20Chart.vue=20&=20dependencies?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package-lock.json        | 91 +++++++++++++++++++++++++++++++++---
 web/package.json             |  2 +
 web/src/App.vue              | 12 ++---
 web/src/components/Chart.vue | 68 +++++++++++++++++++++++++++
 4 files changed, 161 insertions(+), 12 deletions(-)
 create mode 100644 web/src/components/Chart.vue

diff --git a/web/package-lock.json b/web/package-lock.json
index f2c8791..1fe407d 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,8 +9,10 @@
       "version": "0.1.0",
       "dependencies": {
         "@influxdata/influxdb-client": "^1.8.0",
+        "@types/chart.js": "^2.9.28",
         "axios": "^0.21.0",
         "bulma": "^0.9.1",
+        "chart.js": "^2.9.4",
         "vue": "^3.0.0",
         "vue-class-component": "^8.0.0-0"
       },
@@ -252,6 +254,14 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/chart.js": {
+      "version": "2.9.28",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.28.tgz",
+      "integrity": "sha512-9YYhsxRngRJb0dkuaU5BezkF+zvvVHnwdRw+rtlahtFb4zqNf9YSgWsOq+dLYeh0fqsWmHUYLR64eNigh02F+w==",
+      "dependencies": {
+        "moment": "^2.10.2"
+      }
+    },
     "node_modules/@types/connect": {
       "version": "3.4.33",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
@@ -2337,6 +2347,32 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/chart.js": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+      "dependencies": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "node_modules/chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "dependencies": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "node_modules/chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "dependencies": {
+        "color-name": "^1.0.0"
+      }
+    },
     "node_modules/check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -2787,7 +2823,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -2795,8 +2830,7 @@
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "node_modules/color-string": {
       "version": "1.5.4",
@@ -8147,6 +8181,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -14707,6 +14749,14 @@
         "@types/node": "*"
       }
     },
+    "@types/chart.js": {
+      "version": "2.9.28",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.28.tgz",
+      "integrity": "sha512-9YYhsxRngRJb0dkuaU5BezkF+zvvVHnwdRw+rtlahtFb4zqNf9YSgWsOq+dLYeh0fqsWmHUYLR64eNigh02F+w==",
+      "requires": {
+        "moment": "^2.10.2"
+      }
+    },
     "@types/connect": {
       "version": "3.4.33",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
@@ -16436,6 +16486,32 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -16794,7 +16870,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -16802,8 +16877,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "1.5.4",
@@ -21068,6 +21142,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
diff --git a/web/package.json b/web/package.json
index 66a15ed..6fd5824 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,8 +9,10 @@
   },
   "dependencies": {
     "@influxdata/influxdb-client": "^1.8.0",
+    "@types/chart.js": "^2.9.28",
     "axios": "^0.21.0",
     "bulma": "^0.9.1",
+    "chart.js": "^2.9.4",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0"
   },
diff --git a/web/src/App.vue b/web/src/App.vue
index f12c016..c28d44d 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -4,10 +4,10 @@
     <Hero />
     <div class="columns mt-6 mb-6 mx-4">
       <div class="column is-one-fifth mx-2">
-        <Panel />
+        <Devices />
       </div>
       <div class="column mx-2">
-        <Tile />
+        <Chart />
       </div>
     </div>
     <Footer />
@@ -18,16 +18,16 @@
 import { Options, Vue } from 'vue-class-component';
 import Navbar from '@/components/Navbar.vue';
 import Hero from '@/components/Hero.vue';
-import Panel from '@/components/Panel.vue';
-import Tile from '@/components/Tile.vue';
+import Devices from '@/components/Devices.vue';
+import Chart from '@/components/Chart.vue';
 import Footer from '@/components/Footer.vue';
 
 @Options({
   components: {
     Navbar,
     Hero,
-    Panel,
-    Tile,
+    Devices,
+    Chart,
     Footer,
   },
 })
diff --git a/web/src/components/Chart.vue b/web/src/components/Chart.vue
new file mode 100644
index 0000000..11f6a2c
--- /dev/null
+++ b/web/src/components/Chart.vue
@@ -0,0 +1,68 @@
+<template>
+  <nav class="panel is-primary">
+    <p class="panel-heading">
+      Table
+    </p>
+    <div class="panel-block">
+      <div class="field is-grouped">
+        <p class="control">
+          <button class="button is-success is-outlined " v-on:click="getData">
+            Fetch Data
+          </button>
+        </p>
+        <p class="control">
+          <button class="button is-outlined" v-on:click="clearData">
+            Clear
+          </button>
+        </p>
+      </div>
+    </div>
+    <div v-if="hasPoint">
+      <div class="mx-4 py-2" v-for="(point, index) in points" :key="index">
+        {{ point }}
+      </div>
+    </div>
+    <div v-else-if="error">
+      <span class="panel-block">{{ error }}</span>
+    </div>
+    <div v-else>
+      <span class="panel-block">No data yet, try fetching!</span>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-class-component';
+import axios from 'axios';
+
+export default class Chart extends Vue {
+  private error = '';
+  private hasPoint = false;
+  private points = [];
+
+  getData() {
+    axios
+      .get(`${process.env.VUE_APP_SERVER_URL}/measurements`)
+      .then((response) => {
+        this.hasPoint = true;
+        this.points = response.data;
+      })
+      .catch((error) => {
+        this.error = error.message;
+      });
+  }
+
+  clearData() {
+    this.hasPoint = false;
+  }
+
+  createChart(chartId, chartData) {
+    const ctx = document.getElementById(chartId);
+    const myChart = new Chart(ctx, {
+      type: chartData.type,
+      data: chartData.data,
+      options: chartData.options,
+    });
+  }
+}
+</script>