systemquery/src/static/js/ui/UIGauge.mjs

"use strict";

import Emel from 'emel';
import forkawesome_emel from './forkawesome_emel.mjs';
import ApexCharts from 'apexcharts';

import AbstractUIItem from './AbstractUIItem.mjs';

import find_in_obj from '../misc/find_in_obj.mjs';

class UIGauge extends AbstractUIItem {
	get #chart_labels() { return this.chart_options.xaxis.categories; }
	get #chart_data() { return this.chart_options.series[0].data; }
	
	constructor(el, def) {
		super(el, def);
		
		this.emel = new Emel().emel;
		this.el.replaceChildren(this.emel(`h3{?}+div[class="container-gauge"]`, {
			placeholders: [ this.def.name ]
		}));
		
		this.chart_options = {
			series: [{
				name: def.name,
				data: [] // TODO: Fill this with data values
			}],
			chart: {
				type: "bar",
				//height: 350,
			},
			plotOptions: { bar: {
				horizontal: false,
				
			} },
			xaxis: {
				categories: [], // TODO: Fill this with hostname / ids
			},
			fill: { opacity: 1 },
		}
		
		this.chart = new ApexCharts(el.querySelector(".container-gauge"), this.chart_options);
	}
	
	#__update_chart() {
		this.chart.updateOptions(this.chart_options, true);
		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();
		
		this.chart_options.series[0].data.length = 0;
		this.chart_options.xaxis.categories.length = 0;
		
		this.__update_chart();
	}
	
	append(peer, table) {
		super.append(peer, table);
		
		let label = peer.name;
		let data_item = null;
		switch(typeof this.def.content) {
			case "function":
				data_item = this.def.content(table);
				break;
			case "string":
				data_item = find_in_obj(table, this.def.content);
				break;
			default:
				console.warn(`Warning: Unknown UIGauge content type '${typeof this.def.content}' for def with name '${this.def.name}'.`);
				this.el.querySelector(".container-gauge").replaceChildren(
					this.emel(`div[class="message-error"]>${forkawesome_emel("exclamation-circle")}+{Oops! An error occurred while rendering this chart. Check the developer tools for more information.}`)
				)
				return false;
		}
		
		if(data_item == null) {
			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();
	}
}

export default UIGauge;

/*
var options = {
	series: [{
		name: 'Net Profit',
		data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
	}, {
		name: 'Revenue',
		data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
	}, {
		name: 'Free Cash Flow',
		data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
	}],
	chart: {
		type: 'bar',
		height: 350
	},
	plotOptions: {
		bar: {
			horizontal: false,
			columnWidth: '55%',
			endingShape: 'rounded'
		},
	},
	dataLabels: {
		enabled: false
	},
	stroke: {
		show: true,
		width: 2,
		colors: ['transparent']
	},
	xaxis: {
		categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
	},
	yaxis: {
		title: {
			text: '$ (thousands)'
		}
	},
	fill: {
		opacity: 1
	},
	tooltip: {
		y: {
			formatter: function(val) {
				return "$ " + val + " thousands"
			}
		}
	}
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
*/