🔨 Split Points.vue => Canva & Table

web/package-lock.json

@@ -14,7 +14,8 @@
         "bulma": "^0.9.1",
         "chart.js": "^2.9.4",
         "vue": "^3.0.0",
-        "vue-class-component": "^8.0.0-0"
+        "vue-class-component": "^8.0.0-0",
+        "vue-property-decorator": "^9.1.2"
       },
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^5.15.1",
@@ -13151,6 +13152,15 @@
       "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
       "dev": true
     },
+    "node_modules/vue-property-decorator": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
+      "integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
+      "peerDependencies": {
+        "vue": "*",
+        "vue-class-component": "*"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
@@ -25248,6 +25258,12 @@
         }
       }
     },
+    "vue-property-decorator": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
+      "integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
+      "requires": {}
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

web/package.json

@@ -14,7 +14,8 @@
     "bulma": "^0.9.1",
     "chart.js": "^2.9.4",
     "vue": "^3.0.0",
-    "vue-class-component": "^8.0.0-0"
+    "vue-class-component": "^8.0.0-0",
+    "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.15.1",

web/src/components/Canva.vue

@@ -0,0 +1,71 @@
+<template>
+  <canvas id="chart"></canvas>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import { Component, Prop } from 'vue-property-decorator';
+import Chart from 'chart.js';
+
+export default class Canva extends Vue {
+  @Prop() readonly points!: [];
+
+  mounted() {
+    const ctx = document.getElementById('chart') as HTMLCanvasElement;
+    const myChart = new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: [
+          '-60m',
+          '-55m',
+          '-50m',
+          '-45m',
+          '-40m',
+          '-35m',
+          '-30m',
+          '-25m',
+          '-20m',
+          '-15m',
+          '-10m',
+          '-5m',
+        ],
+        datasets: [
+          {
+            // one line graph
+            label: 'Number of Moons',
+            data: [0, 0, 1, 2, 37, 42, 27, 14, null, 10, 10, 55],
+
+            borderColor: [
+              '#36495d',
+              '#36495d',
+              '#36495d',
+              '#36495d',
+              '#36495d',
+              '#36495d',
+              '#36495d',
+              '#36495d',
+            ],
+            borderWidth: 3,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        scales: {
+          yAxes: [
+            {
+              ticks: {
+                beginAtZero: true,
+                padding: 5,
+                max: 60,
+              },
+            },
+          ],
+        },
+      },
+    });
+  }
+}
+</script>
+
+<style></style>

web/src/components/Points.vue

@@ -34,34 +34,15 @@
       </div>
     </div>
     <div v-if="isChart">
-      <canvas id="chart"></canvas>
+      <Canva :points="points" />
     </div>
-    <div v-if="isTable">
+    <div v-else-if="isTable">
-      <table
+      <Table :points="points" />
-        class="table 
-        table is-striped
-        table is-hoverable
-        has-text-left
-        table is-fullwidth"
-      >
-        <thead>
-          <tr>
-            <th><abbr title="Device">Device id</abbr></th>
-            <th><abbr title="Time">Time</abbr></th>
-            <th><abbr title="Temp">Measurement</abbr></th>
-          </tr>
-        </thead>
-        <tr v-for="(point, index) in points" :key="index">
-          <td class="is-family-monospace">{{ point.client }}</td>
-          <td>{{ new Date(point.time).toLocaleString() }}</td>
-          <td>{{ point.value }}°C</td>
-        </tr>
-      </table>
     </div>
     <div v-else-if="hasData">
-      <span class="panel-block"
+      <span class="panel-block">
-        >Fetched data, try creating a chart or table!</span
+        Fetched data, try creating a chart or table!
-      >
+      </span>
     </div>
     <div v-else-if="error">
       <span class="panel-block">{{ error }}</span>
@@ -73,11 +54,17 @@
 </template>
 
 <script lang="ts">
-import { Vue } from 'vue-class-component';
+import { Options, Vue } from 'vue-class-component';
 import axios from 'axios';
-import Chart from 'chart.js';
+import Canva from '@/components/Canva.vue';
-import ChartFormat from '../class/ChartFormat';
+import Table from '@/components/Table.vue';
 
+@Options({
+  components: {
+    Canva,
+    Table,
+  },
+})
 export default class Points extends Vue {
   private error = '';
   private isChart = false;
@@ -116,62 +103,8 @@ export default class Points extends Vue {
   }
 
   createChart() {
-    const formatedData = new ChartFormat(this.points);
     this.isTable = false;
     this.isChart = true;
-    const ctx = document.getElementById('chart') as HTMLCanvasElement;
-    const myChart = new Chart(ctx, {
-      type: 'line',
-      data: {
-        labels: [
-          '-60m',
-          '-55m',
-          '-50m',
-          '-45m',
-          '-40m',
-          '-35m',
-          '-30m',
-          '-25m',
-          '-20m',
-          '-15m',
-          '-10m',
-          '-5m',
-        ],
-        datasets: [
-          {
-            // one line graph
-            label: 'Number of Moons',
-            data: [0, 0, 1, 2, 37, 42, 27, 14, null, 10, 10, 55],
-
-            borderColor: [
-              '#36495d',
-              '#36495d',
-              '#36495d',
-              '#36495d',
-              '#36495d',
-              '#36495d',
-              '#36495d',
-              '#36495d',
-            ],
-            borderWidth: 3,
-          },
-        ],
-      },
-      options: {
-        responsive: true,
-        scales: {
-          yAxes: [
-            {
-              ticks: {
-                beginAtZero: true,
-                padding: 5,
-                max: 60,
-              },
-            },
-          ],
-        },
-      },
-    });
   }
 
   createTable() {

web/src/components/Table.vue

@@ -0,0 +1,33 @@
+<template>
+  <table
+    class="table 
+        table is-striped
+        table is-hoverable
+        has-text-left
+        table is-fullwidth"
+  >
+    <thead>
+      <tr>
+        <th><abbr title="Device">Device id</abbr></th>
+        <th><abbr title="Time">Time</abbr></th>
+        <th><abbr title="Temp">Measurement</abbr></th>
+      </tr>
+    </thead>
+    <tr v-for="(point, index) in points" :key="index">
+      <td class="is-family-monospace">{{ point.client }}</td>
+      <td>{{ new Date(point.time).toLocaleString() }}</td>
+      <td>{{ point.value }}°C</td>
+    </tr>
+  </table>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import { Component, Prop } from 'vue-property-decorator';
+
+export default class Table extends Vue {
+  @Prop() readonly points!: [];
+}
+</script>
+
+<style></style>