Skip to content
Snippets Groups Projects
Commit 04fc3a1b authored by Omar Elkadi's avatar Omar Elkadi
Browse files

add the dynamic data visualizatior component and implement it

parent a1b98a3d
No related branches found
No related tags found
No related merge requests found
......@@ -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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment