function moreInfo ( ) {
return {
lineChart : { } ,
entityGroup : Alpine . store ( 'entity' ) . entityGroup ,
entityId : selectedEntityId || Alpine . store ( 'entity' ) . id ,
dopen : false ,
copen : false ,
loading : false ,
isGrid : Alpine . store ( 'entity' ) . hasOwnProperty ( 'cellcode' ) ,
d : { } ,
c : { } ,
tagName ( type , id ) {
if ( id == null )
return ;
if ( type === 'd' ) {
return this . d . find ( i => i . id == id ) . code ;
} else if ( type === 'c' ) {
return this . c . find ( i => i . id == id ) . code ;
}
} ,
did : null ,
cid : [ ] ,
date : { } ,
search ( ) {
this . drawDataChart ( ) ;
// check if entity has an external source
if ( this . $store . entity . hasOwnProperty ( 'ctStationCode' ) ) {
requestExternalData ( this . did , this . cid , this . date . from , this . date . to , this . entityGroup , this . entityId ) ;
} else {
requestEntityData ( this . did , this . cid , this . date . from , this . date . to , this . entityGroup , this . entityId ) ;
}
} ,
selectEntry ( element , entry ) {
console . debug ( element . text . substr ( 0 , element . text . indexOf ( ' ' ) ) ) ;
if ( element . id . split ( '-' ) [ 1 ] === 'desc' ) {
// highlight
element . parentElement . querySelectorAll ( 'a' ) . forEach ( el => el . classList . remove ( 'is-active' ) ) ;
element . classList . add ( 'is-active' ) ;
// update variables;
this . cid = [ ] ;
this . did = entry ;
this . dopen = false ;
} else if ( element . id . split ( '-' ) [ 1 ] === 'crit' ) {
// toggle
element . classList . toggle ( 'is-active' ) ;
// update variables;
this . cid . indexOf ( entry ) === - 1 ? this . cid . push ( entry ) : this . cid = this . cid . filter ( function ( id ) { return id !== entry } ) ;
this . copen = false ;
// add tag
}
} ,
getDropdownData ( dropdown ) {
Alpine . store ( 'loading' , true ) ;
let url = BASE _URL ;
let gridCode ;
if ( this . isGrid ) {
gridCode = Alpine . store ( 'entity' ) . cellcode . substr ( 0 , 4 ) ;
}
switch ( dropdown ) {
case 'd' :
url += '/interface/dropdowns/descriptors?entity_id=' + this . entityId + '&cellcode=' + gridCode ;
break ;
case 'c' :
url += '/interface/dropdowns/criterias?desc_id=' + this . did + '&cellcode=' + gridCode ;
break ;
}
fetch ( url )
. then ( res => res . json ( ) )
. then ( data => {
Alpine . store ( 'loading' , false ) ;
eval ( 'this.' + dropdown + '=data' ) ;
} ) ;
} ,
loadCal ( ) {
const calendars = bulmaCalendar . attach ( '[type=date]' , { dateFormat : 'dd/MM/yyyy' , isRange : true } ) ;
// Loop on each calendar initialized
calendars . forEach ( calendar => {
calendar . on ( 'save' , data => {
this . date = {
from : calendar . startDate . toLocaleDateString ( ) ,
to : calendar . endDate . toLocaleDateString ( )
}
} ) ;
} ) ;
} ,
populateFeatureGrid ( grid ) {
const features = Alpine . store ( 'entity' ) ;
console . debug ( features ) ;
const featureCols = Object . getOwnPropertyNames ( Alpine . store ( 'entity' ) ) . filter ( name => aliasMap . has ( name ) ) ;
const featureVals = featureCols . map ( col => { return { feature : aliasMap . get ( col ) , value : features [ col ] } } ) ;
console . debug ( featureVals ) ;
new gridjs . Grid ( {
data : featureVals
} ) . render ( grid ) ;
} ,
drawDataChart ( ) {
Alpine . store ( 'entity' ) . params . split ( ' ' ) . forEach ( ( param , idx ) => {
this . addCheckbox ( param , idx ) ;
} ) ;
console . debug ( 'drawing poseidon chart...' ) ;
this . lineChart = { } ;
var ctx = document . getElementById ( 'data-chart' ) . getContext ( '2d' ) ;
// Alpine.store('loading', true);
// if (this.entityGroup != 'POSEIDON')
// return;
console . debug ( 'fetching...' ) ;
console . debug ( Alpine . store ( 'entity' ) . params ) ;
const url = ` /data/external/POSEIDON/ ${ Alpine . store ( 'entity' ) . tspr } _ ${ Alpine . store ( 'entity' ) . type } _ ${ Alpine . store ( 'entity' ) . pid } ` ;
fetch ( url )
. then ( res => res . json ( ) )
. then ( data => {
Alpine . store ( 'loading' , false ) ;
console . debug ( "data poseidon: " , data ) ;
let chartData = [ ] ;
for ( var i = 0 ; i < data . length ; i ++ ) {
var item = data [ i ] ;
chartData . push ( {
x : new Date ( item . dt ) ,
y : item . val
} ) ;
}
this . lineChart = new Chart (
ctx ,
{
type : 'line' ,
data : {
labels : chartData . map ( row => row . x ) ,
datasets : [
{
label : 'PARAM' ,
data : chartData . map ( row => row . y )
}
]
} ,
options : {
scales : {
xAxes : [ {
type : 'time' ,
time : {
unit : 'day'
}
} ]
}
} }
) ;
} ) ;
} ,
addCheckbox ( type , index ) {
var label = document . createElement ( 'label' ) ;
var checkbox = document . createElement ( 'input' ) ;
checkbox . type = 'checkbox' ;
checkbox . checked = ( index === 0 ) ;
checkbox . addEventListener ( 'change' , function ( ) {
this . lineChart . data . datasets [ index ] . hidden = ! checkbox . checked ;
this . lineChart . update ( ) ;
} ) ;
label . appendChild ( checkbox ) ;
label . appendChild ( document . createTextNode ( type ) ) ;
document . getElementById ( 'checkbox-container' ) . appendChild ( label ) ;
}
} ;
}
function poseidonChart ( data ) {
var typeGroups = { } ;
for ( var i = 0 ; i < data . length ; i ++ ) {
var item = data [ i ] ;
if ( ! typeGroups [ item . type ] ) {
typeGroups [ item . type ] = [ ] ;
}
typeGroups [ item . type ] . push ( {
x : item . date ,
y : item . value
} ) ;
}
var datasets = [ ] ;
var index = 0 ;
for ( var type in typeGroups ) {
datasets . push ( {
label : type ,
data : typeGroups [ type ] ,
borderColor : getRandomColor ( ) ,
fill : false ,
hidden : false
} ) ;
addCheckbox ( type , index ++ ) ;
}
var ctx = document . getElementById ( 'myChart' ) . getContext ( '2d' ) ;
var myChart = new Chart ( ctx , {
type : 'line' ,
data : {
datasets : datasets
} ,
options : {
scales : {
xAxes : [ {
type : 'time' ,
time : {
unit : 'week'
}
} ]
}
}
} ) ; }
function getRandomColor ( ) {
var letters = '0123456789ABCDEF' ;
var color = '#' ;
for ( var i = 0 ; i < 6 ; i ++ ) {
color += letters [ Math . floor ( Math . random ( ) * 16 ) ] ;
}
return color ;
}