-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
GlCpuHistory.vue
84 lines (80 loc) · 2.15 KB
/
GlCpuHistory.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
<div class="glances-cpu-history-wrapper">
<div class="gl-history-chart" :id="chartId"></div>
</div>
</template>
<script>
import WidgetMixin from '@/mixins/WidgetMixin';
import GlancesMixin from '@/mixins/GlancesMixin';
import ChartingMixin from '@/mixins/ChartingMixin';
import { timestampToTime, getTimeAgo } from '@/utils/MiscHelpers';
export default {
mixins: [WidgetMixin, GlancesMixin, ChartingMixin],
components: {},
data() {
return {};
},
computed: {
limit() {
return this.options.limit || 100;
},
endpoint() {
return this.makeGlancesUrl(`cpu/history/${this.limit}`);
},
},
methods: {
processData(cpuData) {
const { system, user } = cpuData;
const labels = [];
const systemValues = [];
const userValues = [];
system.forEach((dataPoint) => {
labels.push(timestampToTime(dataPoint[0]));
systemValues.push(dataPoint[1]);
});
user.forEach((dataPoint) => {
userValues.push(dataPoint[1]);
});
const chartTitle = this.makeTitle(system);
const datasets = [
{ name: 'System', type: 'bar', values: systemValues },
{ name: 'User', type: 'bar', values: userValues },
];
this.generateChart({ labels, datasets }, chartTitle);
},
makeTitle(system) {
return `CPU Usage over past ${getTimeAgo(system[0][0]).replace('ago', '')}`;
},
generateChart(timeChartData, chartTitle) {
return new this.Chart(`#${this.chartId}`, {
title: chartTitle,
data: timeChartData,
type: 'axis-mixed',
height: this.chartHeight,
colors: ['#9b5de5', '#00f5d4'],
truncateLegends: true,
lineOptions: {
regionFill: 1,
hideDots: 1,
},
axisOptions: {
xIsSeries: true,
xAxisMode: 'tick',
},
tooltipOptions: {
formatTooltipY: d => `${Math.round(d)}%`,
// formatTooltipX: d => timestampToTime(d),
},
});
},
},
created() {
this.overrideUpdateInterval = 20;
},
};
</script>
<style scoped lang="scss">
.glances-cpu-history-wrapper {
.gl-history-chart {}
}
</style>