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

➕ Add Chart.vue & dependencies

main
Haris Razis 4 years ago
parent
f803ddc135
commit
a953b56a65
No known key found for this signature in database GPG Key ID: 86A4D290ED03FAB4
4 changed files with 161 additions and 12 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. 91
      web/package-lock.json
  2. 2
      web/package.json
  3. 12
      web/src/App.vue
  4. 68
      web/src/components/Chart.vue

91
web/package-lock.json
View File

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

2
web/package.json
View File

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

12
web/src/App.vue
View File

@ -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,
},
})

68
web/src/components/Chart.vue
View File

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