Wyn Enterprise: 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
• UIWidget
• UIDashboard
• UIPage
• UIContainer
• UIScenario

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 err
});

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 that does this 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 refresh data and resize 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