84 lines
1.8 KiB
Vue
84 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<dygraphs ref="dg" width="800" :graphData="series" :graphOptions="options"></dygraphs>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['raw_data'],
|
|
name: "LineBase",
|
|
data() {
|
|
return {
|
|
options: {
|
|
legend: 'always',
|
|
title: 'Disk Graph',
|
|
xlabel: 'Dátum',
|
|
labels: ['Dátum','Celkom','Pouzita','Volna','Percent'],
|
|
ylabel: 'Bytes',
|
|
y2label: 'Percent',
|
|
|
|
fillGraph: true,
|
|
series: {
|
|
'Percent': {
|
|
axis: 'y2'
|
|
},
|
|
},
|
|
axes: {
|
|
y: {
|
|
axisLabelWidth: 60,
|
|
labelsKMG2: true,
|
|
},
|
|
y2: {
|
|
// set axis-related properties here
|
|
labelsKMB: false
|
|
}
|
|
},
|
|
},
|
|
series: [],
|
|
};
|
|
},
|
|
created: function () {
|
|
// `this` points to the vm instance
|
|
console.log('created');
|
|
|
|
let last_time = null;
|
|
let last_total = 0;
|
|
let last_free = 0;
|
|
let last_used = 0;
|
|
|
|
for (var index = 0; index < this.raw_data.length; ++index) {
|
|
let row = this.raw_data[index];
|
|
let disk = [row["disk_total"],row["disk_used"], row["disk_free"],row["disk_percent"]];
|
|
let created_at = row["created_at"];
|
|
|
|
let time = moment(created_at);
|
|
|
|
if (last_time == null || time.unix() - last_time.unix() > 900 ) {
|
|
if (last_time != null) {
|
|
this.series.push([last_time.toDate(),0,0,0,0]);
|
|
}
|
|
|
|
this.series.push([time.toDate(),0,0,0,0]);
|
|
|
|
last_time = time;
|
|
|
|
continue;
|
|
}
|
|
|
|
this.series.push([time.toDate()].concat(disk));
|
|
|
|
last_time = time;
|
|
}
|
|
console.log(this.series);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
</style>
|