UIGauge: Fill in the details
As usual, it's all untested haha
This commit is contained in:
parent
54cae732ce
commit
501acad134
1 changed files with 59 additions and 2 deletions
|
@ -1,10 +1,15 @@
|
|||
"use strict";
|
||||
|
||||
import ApexCharts from 'apexcharts';
|
||||
|
||||
import AbstractUIItem from './AbstractUIItem.mjs';
|
||||
|
||||
import find_in_obj from '../misc/find_in_obj.mjs';
|
||||
|
||||
class UIGauge extends AbstractUIItem {
|
||||
#chart_labels() { return this.chart_options.xaxis.categories; }
|
||||
#chart_data() { return this.chart_options.series[0].data; }
|
||||
|
||||
constructor(el, def) {
|
||||
super(el, def);
|
||||
|
||||
|
@ -26,6 +31,8 @@ class UIGauge extends AbstractUIItem {
|
|||
},
|
||||
fill: { opacity: 1 },
|
||||
}
|
||||
|
||||
this.chart = new ApexCharts(el, this.chart_options);
|
||||
}
|
||||
|
||||
#__update_chart() {
|
||||
|
@ -33,6 +40,35 @@ class UIGauge extends AbstractUIItem {
|
|||
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() {
|
||||
super.clear();
|
||||
|
||||
|
@ -43,8 +79,28 @@ class UIGauge extends AbstractUIItem {
|
|||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
@ -52,7 +108,7 @@ class UIGauge extends AbstractUIItem {
|
|||
|
||||
export default UIGauge;
|
||||
|
||||
|
||||
/*
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
|
@ -105,3 +161,4 @@ var options = {
|
|||
|
||||
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
||||
chart.render();
|
||||
*/
|
||||
|
|
Loading…
Reference in a new issue