108 lines
1.8 KiB
JavaScript
108 lines
1.8 KiB
JavaScript
"use strict";
|
|
|
|
import AbstractUIItem from './AbstractUIItem.mjs';
|
|
|
|
import find_in_obj from '../misc/find_in_obj.mjs';
|
|
|
|
class UIGauge extends AbstractUIItem {
|
|
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 },
|
|
}
|
|
}
|
|
|
|
#__update_chart() {
|
|
this.chart.updateOptions(this.chart_options);
|
|
this.chart.render();
|
|
}
|
|
|
|
clear() {
|
|
super.clear();
|
|
|
|
this.chart_options.series[0].data.length = 0;
|
|
this.chart_options.xaxis.categories.length = 0;
|
|
|
|
this.__update_chart();
|
|
}
|
|
|
|
append(peer, table) {
|
|
|
|
// TODO: Update this.chart_options.series[0].data & this.chart_options.xaxis.categories
|
|
|
|
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();
|