mirror of
https://github.com/Lissy93/dashy.git
synced 2025-12-06 08:34:14 +01:00
68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<template>
|
|
<div class="glances-load-wrapper">
|
|
<div
|
|
:id="`load-${chartId}`" class="load-chart"
|
|
v-tooltip="$t('widgets.glances.system-load-desc')"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import WidgetMixin from '@/mixins/WidgetMixin';
|
|
import ChartingMixin from '@/mixins/ChartingMixin';
|
|
|
|
export default {
|
|
mixins: [WidgetMixin, ChartingMixin],
|
|
computed: {
|
|
hostname() {
|
|
if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
|
|
return this.options.hostname;
|
|
},
|
|
endpoint() {
|
|
return `${this.hostname}/api/3/load`;
|
|
},
|
|
},
|
|
methods: {
|
|
fetchData() {
|
|
this.makeRequest(this.endpoint).then(this.processData);
|
|
},
|
|
processData(loadData) {
|
|
const chartData = {
|
|
labels: ['1 Min', '5 Mins', '15 Mins'],
|
|
datasets: [
|
|
{ values: [loadData.min1, loadData.min5, loadData.min15] },
|
|
],
|
|
};
|
|
const chartTitle = `Load Averages over ${loadData.cpucore} Cores`;
|
|
this.renderChart(chartData, chartTitle);
|
|
},
|
|
renderChart(loadBarChartData, chartTitle) {
|
|
return new this.Chart(`#load-${this.chartId}`, {
|
|
title: chartTitle,
|
|
data: loadBarChartData,
|
|
type: 'bar',
|
|
height: 180,
|
|
colors: ['#04e4f4'],
|
|
barOptions: {
|
|
spaceRatio: 0.2,
|
|
},
|
|
tooltipOptions: {
|
|
formatTooltipY: d => `${d} Tasks`,
|
|
},
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.glances-load-wrapper {
|
|
p.desc {
|
|
color: var(--widget-text-color);
|
|
opacity: var(--dimming-factor);
|
|
font-size: 0.8rem;
|
|
margin: 0;
|
|
visibility: hidden;
|
|
}
|
|
&:hover p.desc { visibility: visible; }
|
|
}
|
|
</style>
|