133 lines
4.4 KiB
JavaScript
133 lines
4.4 KiB
JavaScript
Vue.component('tt-graph', {
|
|
template: `
|
|
<!-- use chart js with datasets etc everything needed for chart.js here to be usable width and height aswell -->
|
|
<tt-card>
|
|
<template v-slot:header>
|
|
<h3 style="text-align: center;user-select: none">{{ header }}</h3>
|
|
</template>
|
|
|
|
<div ref="container">
|
|
<canvas ref="chart" :style="{width: width + 'px', height: height + 'px'}"></canvas></div>
|
|
</tt-card>
|
|
`,
|
|
props: ['data', 'labels', 'header'],
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
width: 400,
|
|
height: 220
|
|
}
|
|
},
|
|
mounted() {
|
|
const ctx = this.$refs.chart.getContext('2d');
|
|
this.chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: this.labels,
|
|
datasets: this.data
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
},
|
|
x: {
|
|
type: 'time',
|
|
time: {
|
|
// time is epoch
|
|
parser: 'X',
|
|
// unit: 'hour',
|
|
displayFormats: {
|
|
minute: 'DD.M. HH:mm',
|
|
}
|
|
},
|
|
// min: '00:00:00',
|
|
// max: '24:00:00',
|
|
ticks: {
|
|
autoSkipPadding: 25,
|
|
autoSkip: true,
|
|
maxRotation: 0
|
|
}
|
|
}
|
|
},
|
|
responsive: true,
|
|
},
|
|
});
|
|
|
|
// set width and height to the canvas element actual width and height
|
|
this.width = this.$refs.container.width;
|
|
this.height = this.$refs.container.height;
|
|
|
|
}
|
|
})
|
|
|
|
Vue.component('device-graphing', {
|
|
template: `
|
|
<div style="display: grid; grid-template-columns: 45vw 45vw; gap: 1rem;">
|
|
<h3 style="text-align: center;user-select: none;grid-column: 1 / span 2;">{{ hostname }}</h3>
|
|
|
|
<tt-loader v-if="graphs.length === 0"></tt-loader>
|
|
|
|
<template v-for="graph in graphs">
|
|
<tt-graph :data="graph.data" :labels="graph.labels" :header="graph.name"></tt-graph>
|
|
</template>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
graphs: [],
|
|
hostname: ''
|
|
}
|
|
},
|
|
async mounted() {
|
|
// get hostname from url params
|
|
this.hostname = new URLSearchParams(window.location.search).get('hostname');
|
|
console.log(this.hostname);
|
|
// get id from url params
|
|
const id = new URLSearchParams(window.location.search).get('id');
|
|
const response = await axios.get('/Graphing/data?id=' + id);
|
|
const data = response.data;
|
|
|
|
const graphs = {};
|
|
|
|
for (const item in data) {
|
|
// Create graphs.[item.name.split(':')[0]] if it doesn't exist
|
|
if (!graphs[data[item].name.split(':')[0]]) {
|
|
graphs[data[item].name.split(':')[0]] = {
|
|
name: data[item].name.split(':')[0],
|
|
data: [],
|
|
labels: []
|
|
}
|
|
}
|
|
|
|
// Add the data to the graph but check if it's received or sent and already exists
|
|
|
|
if (data[item].name.split(':')[1].includes('received') && graphs[data[item].name.split(':')[0]].data.find(data => data.label.includes('received'))) {
|
|
continue;
|
|
}
|
|
|
|
if (data[item].name.split(':')[1].includes('sent') && graphs[data[item].name.split(':')[0]].data.find(data => data.label.includes('sent'))) {
|
|
continue;
|
|
}
|
|
|
|
|
|
graphs[data[item].name.split(':')[0]].data.push({
|
|
label: data[item].name.split(':')[1],
|
|
data: data[item].values.map(value => value.value),
|
|
fill: false,
|
|
borderColor: data[item].name.includes('received') ? 'rgb(75, 192, 192)' : 'rgb(192, 75, 75)',
|
|
tension: 0.1
|
|
});
|
|
}
|
|
|
|
// Add the labels to the this.graphs
|
|
for (const graph in graphs) {
|
|
graphs[graph].labels = data[Object.keys(data).find(key => data[key].name.includes(graph))].values.map(value => value.clock);
|
|
this.graphs.push(graphs[graph]);
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
}); |