Dashboard Lite Viewer API
This page elaborates the API to integrate the dashboard lite viewer component into your web applications. With the help of this API, you can easily modify the dashboard layout and add custom animations to your dashboard.
EventType
The event sequence is mounted -> (update) -> render -> rendered
mounted
Description
Trigger after the widget is mounted to the HTML DOM element
Example
dashboard.on('mounted', () => {
console.log('>>> mounted');
});
render
Description
Trigger when the widget begins to render
Example
dashboard.on('render', () => {
console.log('>>> render');
});
rendered
Description
Trigger after the widget is rendered completely
Example
dashboard.on('rendered', () => {
console.log('>>> rendered');
});
update
Description
Only applicable to UIScenario. Triggered before the component is updated. The difference between updating and rendering is that updating means that the data is ready but not yet rendered.
Example
scenario.on('update', () => {
console.log('>>> update');
});
error
Description
Trigger when an error occurs
Example
dashboard.on('error', (dashboardId, sourceId, err: IError) => {
//sourcerId is the id of widget which cause this error
});
interface IError {
id: string;
title: string;
content: string;
}
selectionChange
Description
Trigger when the selection of chart is changed (either by user or API)
Example
dashboard.on('selectionChange', (dashboardId, sourceId, dataPoints: IDataPoint[]) => {
//sourcerId is the id of widget which selection changed, dataPoints is the selected data point list
});
interface IDataPoint {
[columnName: string]: string | number | boolean;
}
//example:
{
amount: 100,
department: 'DTD2',
product: 'WYN'
}
UIWidget
Description
It is the base class for dashboard / page / scenario
Example
connect(container: HTMLElement): void // Connect the widget on a dom.
isConnected(): boolean // Indicate whether the widget has been connected on a dom.
disconnect(): void // Disconnect this widget. Do something to clean up.
getName(): string // get the widget name
on(type: EventType, cb: (...args) => void): void // Register event listener.
once(type: EventType, cb: (...args) => void): void // Register event listener for once.
off(type: EventType, cb: (...args) => void): void // Remove event listener.
refresh(): void // Refresh the widget. Including refreshing data and resizing this widget
resize(): void // Resize the widget.
suspend(): void // Freeze the render of every scenario.
resume(): void // Recover the render of every scenario.
UIDashboard
Description
UIDashboard extends UIWidget
Example
pages: UIPage[] // All the visible pages.
getCurrentPage(): UIPage // Get current rendered page.
showPrevPage(): UIPage // Switch to prev page.
showNextPage(): UIPage // Switch to next page.
getPageByName(pageName: string): UIPage // Get page by page name.
getPageByID(id: string): UIPage // Get page by page id.
getScenarioByName(scenarioName: string): UIScenario // get scenario by scenario name
getScenarioByID(scenarioID: string): UIScenario // get scenario by scenario id
UIPage
Description
UIPage extends UIWidget
Example
scenarios: UIScenario[] // All the scenarios(exclude container/tabContainer/group) on the page.
containers: UIScenario[] // All the containers(container/tabContainer/group) on the page.
widgets: UIScenario[] // All ths widgets(scenarios and containers) on page.
getScenarioByName(scenarioName: string): UIScenario // get scenario by scenario name
getScenarioByID(scenarioID: string): UIScenario // get scenario by scenario id
Users can connect widgets to the HTML Dom elements with 'widgets'. If there is special logic for container / tabContainer / group (for example, not render groups, extract all the scenarios in it), user 'scenarios' and 'containers' instead.
UIContainer
Description
UIContainer extends UIWidget
Example
scenarios: UIScenario[] // All the scenarios on the container/group/tab container.
scenarioType: ScenarioType
getScenarioByName(scenarioName: string): UIScenario // get scenario by scenario name
getScenarioByID(scenarioID: string): UIScenario // get scenario by scenario id
UIScenario
Description
UIScenario extends UIWidget
Example
scenarioType: ScenarioType