client: start work on UIGauge, but it's far from finished
This commit is contained in:
parent
fd6e088a7e
commit
54cae732ce
4 changed files with 121 additions and 2 deletions
|
@ -20,6 +20,7 @@ class InfoBroker {
|
|||
// Note that the order here is the order in the web interface
|
||||
cpu_live: async () => {
|
||||
return {
|
||||
// TODO: Add percentage CPU use here
|
||||
frequency: await sysinfo.cpuCurrentSpeed(),
|
||||
temperature: await sysinfo.cpuTemperature()
|
||||
};
|
||||
|
|
10
src/static/js/misc/find_in_obj.mjs
Normal file
10
src/static/js/misc/find_in_obj.mjs
Normal file
|
@ -0,0 +1,10 @@
|
|||
"use strict";
|
||||
|
||||
export default function(obj, path) {
|
||||
const current = obj;
|
||||
for(const part of path.split(`.`)) {
|
||||
if(typeof current[part] === "undefined") return undefined;
|
||||
current = current[part];
|
||||
}
|
||||
return current;
|
||||
}
|
|
@ -24,13 +24,14 @@ export default {
|
|||
name: "Temperature (°C)",
|
||||
type: "guage",
|
||||
guage: { min: 0, max: 100 },
|
||||
content: "main",
|
||||
content: (table) => table.temperature.cores
|
||||
.reduce((acc, next) => acc + next, 0) / table.temperature.cores.length,
|
||||
},
|
||||
{
|
||||
name: "Chipset temperature (°C)",
|
||||
type: "guage",
|
||||
guage: { min: 0, max: 100 },
|
||||
content: "main"
|
||||
content: "temperature.chipset"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
107
src/static/js/ui/UIGauge.mjs
Normal file
107
src/static/js/ui/UIGauge.mjs
Normal file
|
@ -0,0 +1,107 @@
|
|||
"use strict";
|
||||
|
||||
import AbstractUIItem from './AbstractUIItem.mjs';
|
||||
|
||||
import find_in_obj from '../misc/find_in_obj.mjs';
|
||||
|
||||
class UIGauge extends AbstractUIItem {
|
||||
constructor(el, def) {
|
||||
super(el, def);
|
||||
|
||||
this.chart_options = {
|
||||
series: [{
|
||||
name: def.name,
|
||||
data: [] // TODO: Fill this with data values
|
||||
}],
|
||||
chart: {
|
||||
type: "bar",
|
||||
//height: 350,
|
||||
},
|
||||
plotOptions: { bar: {
|
||||
horizontal: false,
|
||||
|
||||
} },
|
||||
xaxis: {
|
||||
categories: [], // TODO: Fill this with hostname / ids
|
||||
},
|
||||
fill: { opacity: 1 },
|
||||
}
|
||||
}
|
||||
|
||||
#__update_chart() {
|
||||
this.chart.updateOptions(this.chart_options);
|
||||
this.chart.render();
|
||||
}
|
||||
|
||||
clear() {
|
||||
super.clear();
|
||||
|
||||
this.chart_options.series[0].data.length = 0;
|
||||
this.chart_options.xaxis.categories.length = 0;
|
||||
|
||||
this.__update_chart();
|
||||
}
|
||||
|
||||
append(peer, table) {
|
||||
|
||||
// TODO: Update this.chart_options.series[0].data & this.chart_options.xaxis.categories
|
||||
|
||||
this.__update_chart();
|
||||
}
|
||||
}
|
||||
|
||||
export default UIGauge;
|
||||
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
|
||||
}, {
|
||||
name: 'Free Cash Flow',
|
||||
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
endingShape: 'rounded'
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: '$ (thousands)'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function(val) {
|
||||
return "$ " + val + " thousands"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
||||
chart.render();
|
Loading…
Reference in a new issue