2022-03-27 15:24:38 +00:00
"use strict" ;
2022-04-03 01:41:58 +00:00
import Emel from 'emel' ;
2022-04-03 01:53:41 +00:00
import forkawesome _emel from './forkawesome_emel.mjs' ;
2022-04-02 02:00:56 +00:00
import ApexCharts from 'apexcharts' ;
2022-03-27 15:24:38 +00:00
import AbstractUIItem from './AbstractUIItem.mjs' ;
import find _in _obj from '../misc/find_in_obj.mjs' ;
class UIGauge extends AbstractUIItem {
2022-04-03 01:36:26 +00:00
get # chart _labels ( ) { return this . chart _options . xaxis . categories ; }
get # chart _data ( ) { return this . chart _options . series [ 0 ] . data ; }
2022-04-02 02:00:56 +00:00
2022-03-27 15:24:38 +00:00
constructor ( el , def ) {
super ( el , def ) ;
2022-04-03 01:41:58 +00:00
this . emel = new Emel ( ) . emel ;
this . el . replaceChildren ( this . emel ( ` h3{?}+div[class="container-gauge"] ` , {
placeholders : [ this . def . name ]
} ) ) ;
2022-03-27 15:24:38 +00:00
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 } ,
}
2022-04-02 02:00:56 +00:00
2022-04-03 01:41:58 +00:00
this . chart = new ApexCharts ( el . querySelector ( ".container-gauge" ) , this . chart _options ) ;
2022-03-27 15:24:38 +00:00
}
# _ _update _chart ( ) {
2022-04-04 02:12:47 +00:00
this . chart . updateOptions ( this . chart _options , true ) ;
2022-03-27 15:24:38 +00:00
this . chart . render ( ) ;
}
2022-04-02 02:00:56 +00:00
# _ _insert _item ( label , data _item ) {
for ( let i in this . chart _labels ) {
2022-04-03 01:36:26 +00:00
if ( this . # chart _labels [ i ] === label ) {
this . # chart _labels [ i ] = label ;
this . # chart _data [ i ] = data _item ;
2022-04-02 02:00:56 +00:00
return ;
}
}
const comparer = new Intl . Collator ( navigator . language ) ;
2022-04-03 01:36:26 +00:00
for ( let i in this . # chart _labels ) {
2022-04-02 02:00:56 +00:00
const comp _name = comparer . compare (
label . toLowerCase ( ) ,
2022-04-03 01:36:26 +00:00
this . # chart _labels [ i ] . toLowerCase ( )
2022-04-02 02:00:56 +00:00
) ;
if ( comp _name < 0 ) { // Insert immediately before this index
2022-04-03 01:36:26 +00:00
this . # chart _labels . splice ( i , 0 , label ) ;
this . # chart _data . splice ( i , 0 , data _item ) ;
2022-04-02 02:00:56 +00:00
return ;
}
}
2022-04-03 01:36:26 +00:00
this . # chart _labels . push ( label ) ;
this . # chart _data . push ( data _item ) ;
2022-04-02 02:00:56 +00:00
}
2022-03-27 15:24:38 +00:00
clear ( ) {
super . clear ( ) ;
this . chart _options . series [ 0 ] . data . length = 0 ;
this . chart _options . xaxis . categories . length = 0 ;
this . _ _update _chart ( ) ;
}
append ( peer , table ) {
2022-04-02 02:00:56 +00:00
super . append ( peer , table ) ;
2022-03-27 15:24:38 +00:00
2022-04-02 02:00:56 +00:00
let label = peer . name ;
let data _item = null ;
2022-04-03 01:36:26 +00:00
switch ( typeof this . def . content ) {
2022-04-02 02:00:56 +00:00
case "function" :
2022-04-03 01:36:26 +00:00
data _item = this . def . content ( table ) ;
2022-04-02 02:00:56 +00:00
break ;
case "string" :
2022-04-03 01:36:26 +00:00
data _item = find _in _obj ( table , this . def . content ) ;
2022-04-02 02:00:56 +00:00
break ;
default :
2022-04-03 01:36:26 +00:00
console . warn ( ` Warning: Unknown UIGauge content type ' ${ typeof this . def . content } ' for def with name ' ${ this . def . name } '. ` ) ;
2022-04-03 01:53:41 +00:00
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.} ` )
)
2022-04-02 02:00:56 +00:00
return false ;
}
if ( data _item == null ) {
console . warn ( ` Warning: Got null when evaluating value for UIGauge. ` ) ;
return false ;
}
2022-04-04 02:12:47 +00:00
if ( typeof data _item !== "number" ) {
console . warn ( ` Warning: Got ' ${ typeof daata _item } ' when evaluating value for UIGuage. ` ) ;
return false ;
}
2022-04-02 02:00:56 +00:00
2022-04-03 01:36:26 +00:00
this . # _ _insert _item ( label , data _item ) ;
2022-04-04 02:12:47 +00:00
console . log ( ` def ${ this . def . name } | chart_labels ` , this . # chart _labels ) ;
console . log ( ` def ${ this . def . name } | chart_data ` , this . # chart _data ) ;
2022-04-03 01:36:26 +00:00
this . # _ _update _chart ( ) ;
2022-03-27 15:24:38 +00:00
}
}
export default UIGauge ;
2022-04-02 02:00:56 +00:00
/ *
2022-03-27 15:24:38 +00:00
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 ( ) ;
2022-04-02 02:00:56 +00:00
* /