Commit 04fc3a1b authored by Omar Elkadi's avatar Omar Elkadi
Browse files

add the dynamic data visualizatior component and implement it

parent a1b98a3d
......@@ -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"
......
......@@ -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({
......
<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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment