UIGauge: Fill in the details

As usual, it's all untested haha
This commit is contained in:
Starbeamrainbowlabs 2022-04-02 03:00:56 +01:00
parent 54cae732ce
commit 501acad134
Signed by: sbrl
GPG key ID: 1BE5172E637709C2

View file

@ -1,10 +1,15 @@
"use strict"; "use strict";
import ApexCharts from 'apexcharts';
import AbstractUIItem from './AbstractUIItem.mjs'; import AbstractUIItem from './AbstractUIItem.mjs';
import find_in_obj from '../misc/find_in_obj.mjs'; import find_in_obj from '../misc/find_in_obj.mjs';
class UIGauge extends AbstractUIItem { class UIGauge extends AbstractUIItem {
#chart_labels() { return this.chart_options.xaxis.categories; }
#chart_data() { return this.chart_options.series[0].data; }
constructor(el, def) { constructor(el, def) {
super(el, def); super(el, def);
@ -26,6 +31,8 @@ class UIGauge extends AbstractUIItem {
}, },
fill: { opacity: 1 }, fill: { opacity: 1 },
} }
this.chart = new ApexCharts(el, this.chart_options);
} }
#__update_chart() { #__update_chart() {
@ -33,6 +40,35 @@ class UIGauge extends AbstractUIItem {
this.chart.render(); this.chart.render();
} }
#__insert_item(label, data_item) {
for(let i in this.chart_labels) {
if(this.chart_labels[i] === label) {
this.chart_labels[i] = label;
this.chart_data[i] = data_item;
return;
}
}
const comparer = new Intl.Collator(navigator.language);
for(let i in this.chart_labels) {
const comp_name = comparer.compare(
label.toLowerCase(),
this.chart_labels[i].toLowerCase()
);
if(comp_name < 0) { // Insert immediately before this index
this.chart_labels.splice(i, 0, label);
this.chart_data.splice(i, 0, data_item);
return;
}
}
this.chart_labels.push(label);
this.chart_data.push(data_item);
}
clear() { clear() {
super.clear(); super.clear();
@ -43,8 +79,28 @@ class UIGauge extends AbstractUIItem {
} }
append(peer, table) { append(peer, table) {
super.append(peer, table);
// TODO: Update this.chart_options.series[0].data & this.chart_options.xaxis.categories let label = peer.name;
let data_item = null;
switch(typeof def.content) {
case "function":
data_item = def.content(table);
break;
case "string":
data_item = find_in_obj(table, def.content);
break;
default:
console.warn(`Warning: Unknown UIGauge content type '${typeof def.content}'.`);
return false;
}
if(data_item == null) {
console.warn(`Warning: Got null when evaluating value for UIGauge.`);
return false;
}
this.__insert_item(label, data_item);
this.__update_chart(); this.__update_chart();
} }
@ -52,7 +108,7 @@ class UIGauge extends AbstractUIItem {
export default UIGauge; export default UIGauge;
/*
var options = { var options = {
series: [{ series: [{
name: 'Net Profit', name: 'Net Profit',
@ -105,3 +161,4 @@ var options = {
var chart = new ApexCharts(document.querySelector("#chart"), options); var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render(); chart.render();
*/