Start working on our own stacked bar chart system

....but we've only just got the scaffolding in place.

Apexcharts is cool, but I'm doubtful that it's gonna cooperate with us, 
and it keeps throwing random error messages that aren't explained very 
well - and indeed the docs aren't particularly helpful here either.

package-lock.json

@@ -24,11 +24,11 @@
 			"devDependencies": {
 				"@svgdotjs/svg.js": "^3.1.2",
 				"@types/mime": "^2.0.3",
-				"apexcharts": "^3.35.0",
 				"emel": "^2.5.1",
 				"esbuild": "^0.14.30",
 				"fork-awesome": "^1.2.0",
-				"nightink": "^1.0.1"
+				"nightink": "^1.0.1",
+				"svg.js": "^2.7.1"
 			}
 		},
 		"node_modules/@emmetio/abbreviation": {
@@ -77,20 +77,6 @@
 			"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
 			"integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g=="
 		},
-		"node_modules/apexcharts": {
-			"version": "3.35.0",
-			"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.0.tgz",
-			"integrity": "sha512-oipJRkaxt8DPGRmn1kur6aPzML1JSpf2M3ecu+gyw+8xiNmT2C0p1uuuqPZrk+Lr2hmDxzNBPR7TvxwRl3ozgw==",
-			"dev": true,
-			"dependencies": {
-				"svg.draggable.js": "^2.2.2",
-				"svg.easing.js": "^2.0.0",
-				"svg.filter.js": "^2.0.2",
-				"svg.pathmorphing.js": "^0.1.3",
-				"svg.resize.js": "^1.4.3",
-				"svg.select.js": "^3.0.1"
-			}
-		},
 		"node_modules/applause-cli": {
 			"version": "1.8.0",
 			"resolved": "https://registry.npmjs.org/applause-cli/-/applause-cli-1.8.0.tgz",
@@ -627,97 +613,12 @@
 				"node": ">= 4"
 			}
 		},
-		"node_modules/svg.draggable.js": {
-			"version": "2.2.2",
-			"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
-			"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
-			"dev": true,
-			"dependencies": {
-				"svg.js": "^2.0.1"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/svg.easing.js": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
-			"integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
-			"dev": true,
-			"dependencies": {
-				"svg.js": ">=2.3.x"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/svg.filter.js": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
-			"integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
-			"dev": true,
-			"dependencies": {
-				"svg.js": "^2.2.5"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
 		"node_modules/svg.js": {
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
 			"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
 			"dev": true
 		},
-		"node_modules/svg.pathmorphing.js": {
-			"version": "0.1.3",
-			"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
-			"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
-			"dev": true,
-			"dependencies": {
-				"svg.js": "^2.4.0"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/svg.resize.js": {
-			"version": "1.4.3",
-			"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
-			"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
-			"dev": true,
-			"dependencies": {
-				"svg.js": "^2.6.5",
-				"svg.select.js": "^2.1.2"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/svg.resize.js/node_modules/svg.select.js": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
-			"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
-			"dev": true,
-			"dependencies": {
-				"svg.js": "^2.2.5"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/svg.select.js": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
-			"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
-			"dev": true,
-			"dependencies": {
-				"svg.js": "^2.6.5"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
 		"node_modules/systeminformation": {
 			"version": "5.11.9",
 			"resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.11.9.tgz",
@@ -792,20 +693,6 @@
 			"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
 			"integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g=="
 		},
-		"apexcharts": {
-			"version": "3.35.0",
-			"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.0.tgz",
-			"integrity": "sha512-oipJRkaxt8DPGRmn1kur6aPzML1JSpf2M3ecu+gyw+8xiNmT2C0p1uuuqPZrk+Lr2hmDxzNBPR7TvxwRl3ozgw==",
-			"dev": true,
-			"requires": {
-				"svg.draggable.js": "^2.2.2",
-				"svg.easing.js": "^2.0.0",
-				"svg.filter.js": "^2.0.2",
-				"svg.pathmorphing.js": "^0.1.3",
-				"svg.resize.js": "^1.4.3",
-				"svg.select.js": "^3.0.1"
-			}
-		},
 		"applause-cli": {
 			"version": "1.8.0",
 			"resolved": "https://registry.npmjs.org/applause-cli/-/applause-cli-1.8.0.tgz",
@@ -1103,78 +990,12 @@
 			"resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
 			"integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg=="
 		},
-		"svg.draggable.js": {
-			"version": "2.2.2",
-			"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
-			"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
-			"dev": true,
-			"requires": {
-				"svg.js": "^2.0.1"
-			}
-		},
-		"svg.easing.js": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
-			"integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
-			"dev": true,
-			"requires": {
-				"svg.js": ">=2.3.x"
-			}
-		},
-		"svg.filter.js": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
-			"integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
-			"dev": true,
-			"requires": {
-				"svg.js": "^2.2.5"
-			}
-		},
 		"svg.js": {
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
 			"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
 			"dev": true
 		},
-		"svg.pathmorphing.js": {
-			"version": "0.1.3",
-			"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
-			"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
-			"dev": true,
-			"requires": {
-				"svg.js": "^2.4.0"
-			}
-		},
-		"svg.resize.js": {
-			"version": "1.4.3",
-			"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
-			"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
-			"dev": true,
-			"requires": {
-				"svg.js": "^2.6.5",
-				"svg.select.js": "^2.1.2"
-			},
-			"dependencies": {
-				"svg.select.js": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
-					"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
-					"dev": true,
-					"requires": {
-						"svg.js": "^2.2.5"
-					}
-				}
-			}
-		},
-		"svg.select.js": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
-			"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
-			"dev": true,
-			"requires": {
-				"svg.js": "^2.6.5"
-			}
-		},
 		"systeminformation": {
 			"version": "5.11.9",
 			"resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.11.9.tgz",

package.json

@@ -34,11 +34,11 @@
 	"devDependencies": {
 		"@svgdotjs/svg.js": "^3.1.2",
 		"@types/mime": "^2.0.3",
-		"apexcharts": "^3.35.0",
 		"emel": "^2.5.1",
 		"esbuild": "^0.14.30",
 		"fork-awesome": "^1.2.0",
-		"nightink": "^1.0.1"
+		"nightink": "^1.0.1",
+		"svg.js": "^2.7.1"
 	},
 	"___comment": "The browser field is used by esbuild. fs isn't a thing in the browser, ",
 	"browser": {

src/static/js/tabledefs/cpu_live.mjs

@@ -14,12 +14,12 @@ export default {
 				"average": "frequency.avg"
 			}
 		},
-		{
+		// {
-			name: "Frequency per-core (GHz)",
+		// 	name: "Frequency per-core (GHz)",
-			type: "gauge",
+		// 	type: "gauge",
-			gauge: { min: 0, max: 6 },
+		// 	gauge: { min: 0, max: 6 },
-			content: (table) => table.frequency.cores
+		// 	content: (table) => table.frequency.cores // This is an array, which isn't implemented yet
-		},
+		// },
 		{
 			name: "Temperature (°C)",
 			type: "gauge",

src/static/js/ui/GlobalUI.mjs

@@ -43,7 +43,6 @@ class GlobalUI {
 			}
 			
 			const emel_icon = forkawesome_emel(icondef);
-			console.log(`emel_icon`, emel_icon);
 			result.append(this.emel(`li>a[href="?"]>${emel_icon}+span{?}`, {
 				placeholders: [
 					`#table/${table_name}`,

src/static/js/ui/UIGauge.mjs

@@ -43,7 +43,7 @@ class UIGauge extends AbstractUIItem {
 	}
 	
 	#__update_chart() {
-		this.chart.updateOptions(this.chart_options);
+		this.chart.updateOptions(this.chart_options, true);
 		this.chart.render();
 	}
 	
@@ -70,7 +70,6 @@ class UIGauge extends AbstractUIItem {
 				return;
 			}
 		}
-		console.log("CHART_LABELS", this.#chart_labels);
 		this.#chart_labels.push(label);
 		this.#chart_data.push(data_item);
 		
@@ -109,9 +108,14 @@ class UIGauge extends AbstractUIItem {
 			console.warn(`Warning: Got null when evaluating value for UIGauge.`);
 			return false;
 		}
+		if(typeof data_item !== "number") {
+			console.warn(`Warning: Got '${typeof daata_item}' when evaluating value for UIGuage.`);
+			return false;
+		}
 		
 		this.#__insert_item(label, data_item);
-		
+		console.log(`def ${this.def.name} | chart_labels`, this.#chart_labels);
+		console.log(`def ${this.def.name} | chart_data`, this.#chart_data);
 		this.#__update_chart();
 	}
 }

src/static/js/ui/charts/ChartStackedBar.mjs

@@ -0,0 +1,38 @@
+"use strict";
+
+class ChartStackedBar {
+	constructor(el) {
+		this.el = el;
+		
+		/**
+		 * The category names and their properties.
+		 * @type {Object[]}
+		 */
+		this.categories = [
+			// { name: "Some category name", colour: "hsl(46, 80%, 50%)" }
+			// ....
+		]
+		/**
+		 * Whether to normalise all bars to be the same height or not.
+		 * @type {Boolean}
+		 */
+		this.percentage = false;
+		/**
+		 * The bars to render.
+		 * Additional properties can be specified on the objects passed and
+		 * this class will ignore them. It's strongly recommended though that
+		 * any additional properties start with an underscore.
+		 * @type {Object[]}
+		 */
+		this.bars = [
+			// { name: "bar name 1", values: [ { value: 3, cat: 1 }, .... ] }
+			// ....
+		];
+	}
+	
+	render() {
+		
+	}
+}
+
+export default ChartStackedBar;