FENIX Dashboard
var Dashboard = ; var dashboard = uid : "FENIX_resource_uid" items : id : "chart-1" /* item configuration goes here */ ... ;
Configuration
Check fx-dashboard/config/config.js
to have a look of the default configuration.
Parameter | Type | Default Value | Example | Description |
---|---|---|---|---|
uid | string | - | "UNECA_Education" | FENIX resource uid to use to build the dashboard |
version | string | - | 1.0 | FENIX resource version to use to build the dashboard |
el | CSS3 Selector/JavaScript DOM element/jQuery DOM element | - | "#container" | Optional component container. if specified items's will be searched within it otherwise within the whole document. |
items | Object | - | - | The dashboard's visualization items to render. Check the Item configuration. |
environment | string | 'develop' | 'production' | Server environment |
preProcess | FENIX resource process | - | - | Common initial process to be applied to each dashboard item. Check Process composition flow for more details |
postProcess | FENIX resource process | - | - | Common final process to be applied to each dashboard item. Check Process composition flow for more details |
filter | FENIX filter plain format. Keys are resource dimensions' id, values are array containing the values to include | - | { year : ["2002", "2003"], product : ["cod_1", "code_2"] } | Common filter values to be applied to each dashboard item. Check Process composition flow for more details |
cache | boolean | false | true | whether or not to use FENIX bridge cache |
itemsRegistry | object | { 'chart': { path: selectorPath + 'chart' }, 'map': { path: selectorPath + 'map' }, 'table': { path: selectorPath + 'table' } } | - | Keyset: plugins' ids. Value: object. path: plugin module path |
Item configuration
Parameter | Type | Default Value | Example | Description |
---|---|---|---|---|
id | string | - | "chart-1" | Specifies the visualization item id and its container. The param is used to search for the HTML with the `data-item=:id` attribute within the dashboard `el`. If no `el` is specified the whole document is considered |
type | string | - | chart || map || table || box | The visualization item type. For native plugin, rendering process will be proxied to FENIX chart, table, map creators or to FENIX Visualization box accordingly. In case custom plugin are used, specify here the plugin id |
config | object | - | - | Configuration proxied to visualization component. Its content is linked to the item `type` configuration. Check FENIX creators documentation for configuration details. (e.g. if `item.type="chart"` than `config` is the FENIX chart creator config) |
preProcess | FENIX resource process | - | - | Initial process to be applied to item. Check Process composition flow for more details |
postProcess | FENIX resource process | - | - | Final process to be applied to item. Check Process composition flow for more details |
filter | FENIX filter plain format. Keys are resource dimensions' id, values are array containing the values to include | - | { year : ["2002", "2003"], product : ["cod_1", "code_2"] } | Filter values to be applied to item. Check Process composition flow for more details |
filterFor | Array of dimensions' id || object: keys are step process rid, values are Array of dimensions' ids | - | ["year"] | Used to define what filter values should be applied to the item process. Check Process composition flow |
API
//This is an exampledashboard;
new dashboard( config )
: dashboard creatordashboard.refresh( values )
: refresh dashboard items with new filter values (FENIX filter plain format)dashboard.on(event, callback[, context])
: pub/subdashboard.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
anditem.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
Parameter | Type | Default Value | Example | Description |
---|---|---|---|---|
controller | FENIX dashboard instance | - | - | FENIX dashboard that is the controller of the custom plugin |
el | CSS3 Selector/JavaScript DOM element/jQuery DOM element | - | "#container" | Plug container. |
Mandatory API
new plugin( config )
: plugin creatorplugin.refresh( values )
: refresh plugin with new filter values (FENIX filter plain format)plugin.on(event, callback[, context])
: pub/subplugin.dispose()
: dispose the plugin instance
Events
Trigger Event
thiscontroller; // Example usethiscontroller;
Handle Event
thisdashboard; // Example usethisdashboard;