client: start work on UIGauge, but it's far from finished

This commit is contained in:
Starbeamrainbowlabs 2022-03-27 16:24:38 +01:00
parent fd6e088a7e
commit 54cae732ce
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
4 changed files with 121 additions and 2 deletions

View file

@ -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()
};

View 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;
}

View file

@ -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"
}
]
};

View 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();