165 lines
3.1 KiB
JavaScript
165 lines
3.1 KiB
JavaScript
"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);
|
|
|
|
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, this.chart_options);
|
|
}
|
|
|
|
#__update_chart() {
|
|
this.chart.updateOptions(this.chart_options);
|
|
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 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();
|
|
}
|
|
}
|
|
|
|
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();
|
|
*/
|