mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-23 05:35:07 +02:00
✨ Builds CPU Gauge Chart
This commit is contained in:
parent
a889c0e78a
commit
37e8a003f9
64
src/components/Widgets/GlCpuGauge.vue
Normal file
64
src/components/Widgets/GlCpuGauge.vue
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<div class="glances-cpu-gauge-wrapper">
|
||||||
|
<GaugeChart :value="gaugeValue" :baseColor="background">
|
||||||
|
<p class="percentage">{{ gaugeValue }}%</p>
|
||||||
|
</GaugeChart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||||
|
import GaugeChart from '@/components/Charts/Gauge';
|
||||||
|
import { getValueFromCss } from '@/utils/MiscHelpers';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [WidgetMixin],
|
||||||
|
components: {
|
||||||
|
GaugeChart,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
gaugeValue: 0,
|
||||||
|
background: '#fff',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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/cpu`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchData() {
|
||||||
|
this.makeRequest(this.endpoint).then(this.processData);
|
||||||
|
},
|
||||||
|
processData(cpuData) {
|
||||||
|
this.gaugeValue = cpuData.total;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.background = getValueFromCss('widget-accent-color');
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.glances-cpu-gauge-wrapper {
|
||||||
|
.gauge-chart {
|
||||||
|
max-width: 18rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
p.percentage {
|
||||||
|
color: var(--widget-text-color);
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
x
Reference in New Issue
Block a user