Dashboard API
This document elaborates the API to create a complete dashboard interface using the designer and the viewer components. You can create, edit, and save dashboards in dashboard designer, and view dashboards in dashboard viewer.
Wyn Enterprise also offers a Lite Viewer for high-speed rendering in case of a large screen dashboard display. For more details, visit Dashboard Lite Viewer API page.
Define Dashboard Instance
create(CreationType, )
Description
Creates a dashboard designer or a dashboard viewer.
Arguments
Description
Specify the interface you want to create for a dashboard - the designer or the viewer.
Acceptable Values
'DashboardDesigner' | 'DashboardViewer'
Description
Specify the options/properties for the created dashboard designer or dashboard viewer, as described in the following sections.
Properties Common to Designer and Viewer
dashboardId
Description
The dashboard document id.
Type
string
Required
No
datasetId
Description
The datasetId for the default dataset. This dataset is selected by adding a scenario in the designer.
Type
string
Required
No
baseUrl
Description
The Wyn Enterprise Server URL. If your integration and wyn server are not on the same site, you should provide your wyn server host.
Type
string
Required
No
token
Description
The access token. The token is generated from the Admin portal.
Type
string
Required
No
lng
Description
Set the language of the user interface. See this for more information on document parameters.
Type
Acceptable Values
'zh' | 'en' | 'en-gb' | 'zh-tw' | 'pl' | 'es'
Required
No
dp
Description
The dashboard parameters.
Type
string
Acceptable Values
any[]
Required
No
theme
Description
The dashboard theme.
Type
string
Required
No
Additional Properties Specific to Viewer
toolbar
Description
Control the visibility of the viewer toolbar; that is, whether to show or hide the viewer toolbar. Default value is 'show'.
Type
Toolbar
Acceptable Values
'hide' | 'show'
Required
No
pageNumber
Description
The viewer page number, starts from 1.
Type
number
Required
No
size
Description
Set the display mode of the dashboard in the viewer.
Type
PageDisplayMode
Acceptable Values
'fitheight' | 'fittoheight' | 'fitwidth' | 'fittowidth' | 'fitscreen' | 'fittoscreen' | 'auto'
Required
No
width
Description
The viewer page width.
Type
number
Required
No
height
Description
The viewer page height.
Type
number
Required
No
Examples
To create designer instance
const designerInstance = WynDashboards.create('DashboardDesigner', {
dashboardId: '8b75d061-0420-40ca-9b6b-35d0356f0327',
userId: username,
token: 'token',
baseUrl: 'http://example.wyn.com',
lng: 'en',
dp: '',
theme: 'default'
});
To create viewer instance
const viewerInstance = WynDashboards.create('DashboardViewer', {
dashboardId: '8b75d061-0420-40ca-9b6b-35d0356f0327',
userId: username,
token: 'token',
baseUrl: 'http://example.wyn.com',
lng: 'en',
toolbar: 'hide',
pageNumber: 1,
size: "fitToScreen",
width: 10,
height: 10
});
Initialize Dashboard
API to Initialize Designer Class and Viewer Class
container
Description
The HTML node on which the instance is mounted.
Type
HTMLDivElement
Required
Yes
setParameters
Description
Set the parameters for the Dashboard to view or design. Takes an object of key, value pairs.
Return Type void
Argument (Type)
{ parameterName (string) : parameterValue (any) }
onMount
Description
Triggered after the instance creation has finished.
Return Type
void
onLoaded
Description
Triggered after the dashboard document is fetched.
Return Type
void
Argument (type)
docName: (string)
onClose
Description
Triggered after the instance is closed.
Return Type
void
destroy
Description
Close the dashboard and release the dashboard resources.
Return Type
void
Additional API Specific to Designer Class
onSave
Description
Triggered after successfully saving the document.
Return Type
void
Arguments (type)
docName: (string)
docId: (string)
Examples
To initialize designer class
designerInstance.initialize({
container: document.querySelector('#designer'),
onClose: () => {
console.log('close');
},
onSave: (docName) => {
console.log('save', docName);
},
onLoaded: (docName) => {
console.log('loaded', docName);
},
});
To initialize viewer class
viewerInstance.initialize({
container: document.querySelector('#viewer'),
onClose: () => {
console.log('close');
},
onLoaded: (docName) => {
console.log('loaded', docName);
},
});
To destroy a designer instance
designerInstance.destroy();
To destroy a viewer instance
viewerInstance.destroy();