diff --git a/src/static/js/ui/UIGauge.mjs b/src/static/js/ui/UIGauge.mjs index 3db0eb8..8bebaca 100644 --- a/src/static/js/ui/UIGauge.mjs +++ b/src/static/js/ui/UIGauge.mjs @@ -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(); +*/