UIGauge: Fill in the details

As usual, it's all untested haha

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();
+*/