From 04fc3a1b8bbd3f779d1ce5981f18a1d1189dd084 Mon Sep 17 00:00:00 2001
From: Omar Elkadi <omar.elkadi@stud.th-deg.de>
Date: Fri, 25 Jun 2021 01:47:44 +0200
Subject: [PATCH] add the dynamic data visualizatior component and implement it
---
src/components/navbar.vue | 3 +
src/router.js | 7 ++
src/views/DynamicData.vue | 204 ++++++++++++++++++++++++++++++++++++++
3 files changed, 214 insertions(+)
create mode 100644 src/views/DynamicData.vue
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 306a8df..bcb5079 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -41,6 +41,9 @@
<li class="nav-item btn btn-outline-success mx-1 align-self-center w-100 mb-1 text-nowrap">
<router-link to="/CoronaStat" class="nav-link">Covid-19</router-link>
</li>
+ <li class="nav-item btn btn-outline-success mx-1 align-self-center w-100 mb-1 text-nowrap">
+ <router-link to="/DynamicData" class="nav-link">Dynamic</router-link>
+ </li>
<!-- <li class="nav-item dropdown btn btn-outline-success mx-1">
<a
class="nav-link dropdown-toggle"
diff --git a/src/router.js b/src/router.js
index 5ceabec..7f2c980 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,6 +3,7 @@ import Home from './views/Home.vue'
import About from './views/About.vue'
import SickForm from './views/SickForm.vue'
import CoronaStat from './views/CoronaStat.vue'
+import DynamicData from './views/DynamicData.vue'
const routes = [
{
@@ -24,7 +25,13 @@ const routes = [
path: '/CoronaStat',
name: 'CoronaStat',
component: CoronaStat
+ },
+ {
+ path: '/DynamicData',
+ name: 'DynamicData',
+ component: DynamicData
}
+
]
const router = createRouter({
diff --git a/src/views/DynamicData.vue b/src/views/DynamicData.vue
new file mode 100644
index 0000000..d14658c
--- /dev/null
+++ b/src/views/DynamicData.vue
@@ -0,0 +1,204 @@
+<template>
+ <link
+ href="https://fonts.googleapis.com/icon?family=Material+Icons"
+ rel="stylesheet"
+ />
+ <div class="container ">
+ <!-- <button v-on:click="getlCases(CoronaHisDeg.data['09271'].history)">Get Corona Data</button> -->
+ <div class="btn-group d-flex justify-content-around p-3 mx-5 mt-5">
+ <!-- <a
+ type="button"
+ class="tooltipx border-primary"
+ @mouseover="isHovering1 = true"
+ @mouseout="isHovering1 = false"
+ :class="{'border-bottom': isHovering1}"
+ @click="NewCasesHisBayern"
+ >
+ <span class="tooltiptextx">Bayern</span>
+ <i class="material-icons" style="color:#e63c54">lens</i>
+ </a>
+ <a
+ type="button"
+ class="tooltipx border-primary"
+ @click="NewCasesHisDeggendorf"
+ @mouseover="isHovering2 = true"
+ @mouseout="isHovering2 = false"
+ :class="{ 'border-bottom': isHovering2 }"
+ ><span class="tooltiptextx">Deggendorf</span
+ ><i class="material-icons" style="color:#6f6f6e">lens</i>
+ </a> -->
+ </div>
+ <!-- Card body -->
+ <div class="card-body ">
+ <div class="chart">
+ <vue3-chart-js
+ :id="linechart.id"
+ :type="linechart.type"
+ ref="chartRef"
+ :data="linechart.data"
+ :options="linechart.options"
+ />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'
+import zoomPlugin from 'chartjs-plugin-zoom'
+import dataLabels from 'chartjs-plugin-datalabels'
+import { onBeforeMount, ref } from 'vue'
+
+// globally registered and available for all charts
+Vue3ChartJs.registerGlobalPlugins([zoomPlugin])
+
+export default {
+ name: 'DynamicData',
+ components: {
+ Vue3ChartJs
+ },
+ setup () {
+ const chartRef = ref(0) // ref(0)
+ const connection = new WebSocket('ws://localhost:6868')
+ var samplePeriod = 0.300 // sample period of 300 ns depends on telemetry provider
+ var time = 0 // at start of Program set time to null
+ const linechart = {
+ id: 'line',
+ type: 'line',
+ // locally registered and available for this chart
+ plugins: [dataLabels],
+ data: {
+ labels: ['', '2', '3'],
+ datasets: [
+ {
+ label: 'Accerlometer X-axis',
+ data: [0, 0, 1],
+ borderColor: ['Blue'],
+ backgroundColor: 'Blue',
+ borderWidth: 2,
+ tension: 0.4
+ },
+ {
+ label: 'Accerlometer Y-axis',
+ data: [0, 0, 1],
+ borderColor: ['Green'],
+ backgroundColor: 'Green',
+ borderWidth: 2,
+ tension: 0.4
+ },
+ {
+ label: 'Accerlometer Z-axis',
+ data: [0, 0, 1],
+ borderColor: ['Red'],
+ backgroundColor: 'Red',
+ cubicInterpolationMode: 'monotone',
+ borderWidth: 2,
+ tension: 0.4
+ }
+
+ ]
+ },
+ options: {
+ responsive: true,
+ plugins: {
+ zoom: {
+ zoom: {
+ wheel: {
+ enabled: true
+ },
+ pinch: {
+ enabled: true
+ },
+ mode: 'x'
+ },
+ pan: {
+ enabled: true,
+ mode: 'x'
+ }
+ },
+ datalabels: {
+ backgroundColor: function (context) {
+ return context.dataset.backgroundColor
+ },
+ borderRadius: 4,
+ color: 'white',
+ font: {
+ weight: 'bold'
+ },
+ formatter: Math.round,
+ padding: 6
+ }
+ },
+ scales: {
+ x: {
+ display: true,
+ titel: {
+ display: true,
+ text: 'Time in sec',
+ color: '#911',
+ font: {
+ family: 'Comic Sans MS',
+ size: 20,
+ weight: 'bold',
+ lineHeight: 1.2
+ },
+ padding: { top: 20, left: 0, right: 0, bottom: 0 }
+ },
+ min: 0,
+ max: 1000
+ }
+ }
+ }
+ }
+ onBeforeMount(async () => {
+ console.log('Starting connection to WebSocket Server')
+ connection.onopen = function (event) {
+ console.log(event)
+ console.log('Successfully connected to the echo websocket server...')
+ }
+ connection.onmessage = function (event) {
+ const data = JSON.parse(event.data)
+ const sensors = data.sensors
+ const x = sensors[0].value0
+ const y = sensors[0].value1
+ const z = sensors[0].value2
+ console.log(x)
+ linechart.data.datasets[0].data.push(x)
+ linechart.data.datasets[1].data.push(y)
+ linechart.data.datasets[2].data.push(z)
+ linechart.data.labels.push(Math.fround(time).toFixed(2))
+ time += samplePeriod
+ linechart.options.scales.x.max++
+ if (linechart.options.scales.x.max > 1200) {
+ linechart.options.scales.x.min++
+ }
+ chartRef.value.update()
+ }
+ })
+ return {
+ linechart,
+ chartRef
+ }
+ },
+ methods: {
+ sendMessage: function (message) {
+ console.log(this.connection)
+ this.connection.send(message)
+ }
+ },
+ data () {
+ return {
+ isHovering1: false,
+ isHovering2: false,
+ isHovering3: false,
+ isHovering4: false,
+ isHovering5: false,
+ isHovering6: false
+ }
+ }
+}
+</script>
+
+<style>
+
+</style>
--
GitLab