Fenix-ui-dashboard NPM

FENIX Dashboard

var Dashboard = require('fx-dashboard/start');

var dashboard = new Dashboard({
        uid : "FENIX_resource_uid",
        items : [
            { 
            id : "chart-1",
             /* item configuration goes here */ 
            }, 
            { ... }
        ]
    });

<div data-item='chart-1'></div>

Configuration

Check fx-dashboard/config/config.js to have a look of the default configuration.

Item configuration

API

//This is an example
dashboard.refresh({...});

new dashboard( config ) : dashboard creator
dashboard.refresh( values ) : refresh dashboard items with new filter values (FENIX filter plain format)
dashboard.on(event, callback[, context]) : pub/sub
dashboard.dispose() : dispose the dashboard instance

Events

ready : triggered when the dashboard and all its items are rendered

Process composition flow

FENIX dashboard composes dynamically the FENIX process to be use to retrieve the data for each dashboard item. The FENIX process composition is based on the nature (typeof) of item.filterFor: if it is defined as array or as object.

The request is actually performed by FENIX Bridge, using the process created by the FENIX dashboard

`item.filterFor` as array

dashboard.preProcess
item.preProcess
calculated filter step from item.filter and item.filterFor
item.postProcess
dashboard.postProcess

Example

...

filterFor : ["year"],
    
preProcess : [
    { 
        rid : "step_1",
        ...
    }
    ],

postProcess : [
    { 
        rid : "step_2",
        ...
    }
    ],
...

In the previous example the filter step will be placed between preProcess and postProcess

`item.filterFor` as object

dashboard.preProcess
item.preProcess
item.postProcess
dashboard.postProcess

item.filter is now applied as following: given item.filterFor as object, its key set represents the set of step to consider for filtering. Each key of the key set represents in fact a step rid (i.e. the identification of a step). The array relative to each key is used to calculate a FENIX process filter step that will extend the original step.

Example

...

filterFor : {
        step_1 : ["year"],
        step_2 : ["indicator"]
    },
    
preProcess : [
    { 
        rid : "step_1",
        ...
    }
    ],
preProcess : [
    { 
        rid : "step_2",
        ...
    }
    ],
...

In the previous example the filter step will extend step_1 ( for year values) and to step_2 ( for indicator values).

Custom Plugin

Mandatory configuration

Mandatory API

new plugin( config ) : plugin creator
plugin.refresh( values ) : refresh plugin with new filter values (FENIX filter plain format)
plugin.on(event, callback[, context]) : pub/sub
plugin.dispose() : dispose the plugin instance

Events

this.controller._trigger(event,data);

// Example use
this.controller._trigger('indicators_ready',{payload: {size: this.model.data.length}});

this.dashboard.on(event, handler);

// Example use
this.dashboard.on('indicators_ready', function (data) {
    if(data.payload.size > 0){
        $(this.el).show();
    }
});