fenix-ui-visualization-box
Version:
FENIX resource visualization box
270 lines (250 loc) • 7.27 kB
Markdown
# FENIX Visualization box
```javascript
var Box = require('fx-box/start');
var box = new Box(options);
```
# Configuration
Check `fx-box/config/config.js` to have a look of the default configuration.
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Default Value</th>
<th>Example</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>el</td>
<td>CSS3 Selector/JavaScript DOM element/jQuery DOM element</td>
<td> - </td>
<td>"#container"</td>
<td>component container</td>
</tr>
<tr>
<td>cache</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>whether or not to use FENIX bridge cache</td>
</tr>
<tr>
<td>status</td>
<td>string</td>
<td>"loading"</td>
<td>"ready"</td>
<td>Initial box status</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>"full"</td>
<td>"half"</td>
<td>Box size: "full" "half"</td>
</tr>
<tr>
<td>face</td>
<td>string</td>
<td>"front"</td>
<td>"back"</td>
<td>Box displayed face</td>
</tr>
<tr>
<td>faces</td>
<td>Array of string</td>
<td>["front", "back"]</td>
<td>["front"]</td>
<td>Box faces to render</td>
</tr>
<tr>
<td>menu</td>
<td>Array of object</td>
<td>-</td>
<td>[
{
label: "Test",
url: "",
parent_id: "root",
id: "test"
}
]
</td>
<td>Top left menu configuration</td>
</tr>
<tr>
<td>pluginRegistry</td>
<td>object</td>
<td>{
'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'
}
},
</td>
<td>-</td>
<td>Keyset: plugins' ids. Value: object. path: plugin module path</td>
</tr>
<tr>
<td>tabs</td>
<td>object</td>
<td>{
//'blank': {tabOpts : {}},
'table': {tabOpts : {}},
'metadata': {tabOpts : {}},
'filter': {tabOpts : {}},
'map': {tabOpts : {}},
'chart': {tabOpts : {type : "line"}},
'download': { tabOpts : {}}
}
</td>
<td>"half"</td>
<td>Candidate tabs to be shown. In order to be shown Tab.isSuitable() fn has to return true</td>
</tr>
<tr>
<td>toolbarPosition</td>
<td>string</td>
<td>"up"</td>
<td>"down"</td>
<td>Toolbar start position</td>
</tr>
<tr>
<td>loadResourceServiceQueryParams</td>
<td>object</td>
<td>{
dsd : true
}
</td>
<td>-</td>
<td>D3P compatible string parameters</td>
</tr>
<tr>
<td>maxDataSize</td>
<td>number</td>
<td>7200</td>
<td>5000</td>
<td>Max number of record allowed </td>
</tr>
<tr>
<td>hideToolbar</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>Hide tab toolbar</td>
</tr>
<tr>
<td>hideMenu</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>Hide top left menu</td>
</tr>
<tr>
<td>hideMetadataButton</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>Hide metadata button</td>
</tr>
<tr>
<td>hideRemoveButton</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>Hide remove button</td>
</tr>
<tr>
<td>hideDownloadButton</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>Hide download button</td>
</tr>
<tr>
<td>hideCloneButton</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>Hide clone button</td>
</tr>
<tr>
<td>hideFlipButton</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>Hide flip button</td>
</tr>
<tr>
<td>hideMinimizeButton</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>Hide minimize button</td>
</tr>
<tr>
<td>title</td>
<td>string/function</td>
<td>get i18n metadata title or degrades to uid</td>
<td>-</td>
<td>String or function to create the box title</td>
</tr>
</tbody>
</table>
# API
```javascript
//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
# Events
- `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.