Wondering what’s next for npm?Check out our public roadmap! »


    2.0.0-beta.104 • 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






    Unpacked Size

    9.57 MB

    Total Files


    Last publish


    • avatar