xrazis
/
anchiale
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

🔨 Split Points.vue => Canva & Table

main
Haris Razis 4 years ago
parent
07c006fb2b
commit
8c5df2bd62
No known key found for this signature in database GPG Key ID: 86A4D290ED03FAB4
5 changed files with 138 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      web/package-lock.json
  2. 3
      web/package.json
  3. 71
      web/src/components/Canva.vue
  4. 97
      web/src/components/Points.vue
  5. 33
      web/src/components/Table.vue

18
web/package-lock.json
View File

@ -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",

3
web/package.json
View File

@ -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",

71
web/src/components/Canva.vue
View File

@ -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>

97
web/src/components/Points.vue
View File

@ -34,34 +34,15 @@
</div>
</div>
<div v-if="isChart">
<canvas id="chart"></canvas>
<Canva :points="points" />
</div>
<div v-if="isTable">
<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>
<div v-else-if="isTable">
<Table :points="points" />
</div>
<div v-else-if="hasData">
<span class="panel-block"
>Fetched data, try creating a chart or table!</span
>
<span class="panel-block">
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 ChartFormat from '../class/ChartFormat';
import Canva from '@/components/Canva.vue';
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() {

33
web/src/components/Table.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save