Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


2.0.0-beta.94 • Public • Published

FENIX Visualization box

var Box = require('fx-box/start');
var box = new Box(options);


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

Parameter Type Default Value Example Description
el CSS3 Selector/JavaScript DOM element/jQuery DOM element - "#container" component container
cache boolean false true whether or not to use FENIX bridge cache
status string "loading" "ready" Initial box status
size string "full" "half" Box size: "full" "half"
face string "front" "back" Box displayed face
faces Array of string ["front", "back"] ["front"] Box faces to render
menu Array of object - [ { label: "Test", url: "", parent_id: "root", id: "test" } ] Top left menu configuration
pluginRegistry object { 'blank': { path: 'fx-box/js/tabs/blank' }, 'table': { path: 'fx-box/js/tabs/table' }, 'map': { path: 'fx-box/js/tabs/map' }, 'chart': { path:'fx-box/js/tabs/chart' }, 'metadata': { path:'fx-box/js/tabs/metadata' }, 'filter': { path:'fx-box/js/tabs/filter' }, 'download': { path:'fx-box/js/tabs/download' } }, - Keyset: plugins' ids. Value: object. path: plugin module path
tabs object { //'blank': {tabOpts : {}}, 'table': {tabOpts : {}}, 'metadata': {tabOpts : {}}, 'filter': {tabOpts : {}}, 'map': {tabOpts : {}}, 'chart': {tabOpts : {type : "line"}}, 'download': { tabOpts : {}} } "half" Candidate tabs to be shown. In order to be shown Tab.isSuitable() fn has to return true
toolbarPosition string "up" "down" Toolbar start position
loadResourceServiceQueryParams object { dsd : true } - D3P compatible string parameters
maxDataSize number 7200 5000 Max number of record allowed
hideToolbar boolean false true Hide tab toolbar
hideMenu boolean false true Hide top left menu
hideMetadataButton boolean false true Hide metadata button
hideRemoveButton boolean false true Hide remove button
hideDownloadButton boolean false true Hide download button
hideCloneButton boolean false true Hide clone button
hideFlipButton boolean false true Hide flip button
hideMinimizeButton boolean false true Hide minimize button
title string/function get i18n metadata title or degrades to uid - String or function to create the box title


//This is an example
box.on("clone", function (state) {...});
  • box.render() : used to pass asynchronously the box model
  • box.on(event, callback[, context]) : pub/sub
  • box.dispose() : dispose the catalog instance
  • box.setStatus( state ) : set box status
  • box.showTab( tab ) : show a specific tab. Use tabs id passed from configuration
  • box.setSize( size ) : set AVB size
  • box.flip( face ) : flip the AVB to desired face. If not face is provided, front is applied.
  • box.getState() : get the AVB internal state


  • remove : triggered when the box is removed
  • dispose : triggered when the box is disposed
  • clone : triggered when the box is cloned. Event's payload will be the box's state
  • minimize : triggered when the box is minimized. Event's payload will be the box's state
  • resize : triggered when the box is resized. Event's payload will be the box's state

Box statutes

  • ready : if everything is fine with the AVB
  • error : if and error occurred during the visualization process
  • loading : when the AVB is retrieving the required resource or is waiting for async model
  • empty : when AVB model is empty
  • huge : when AVB model is too big to be displayed

Available tab plugin

The following are the default available tabs. The plugin registry can be extended with the pluginRegistry configuration. In order to choose a specific tab use the tabs's id configuration.

Chart tab

This tab is used to show charts. It wraps the FENIX chart creator.

Download tab

This tab is used to allow the user to configure the download options.

Filter tab

This tab used to show filters and selectors. It wr aps the FENIX filter.

Map tab

This tab is used to show maps. It wraps the FENIX map creator.

Metadata tab

This tab is used to display the metadata information of the current AVB's resource. It wraps the FENIX metadata viewer.

Table tab

This tab is used to show tables. It wraps the FENIX table creator.


npm i fenix-ui-visualization-box

Downloadsweekly downloads








last publish


  • avatar
  • avatar