[]
        
(Showing Draft Content)

testreportdesigner

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.


The following sections describe the module: dashboard/types.

Enumerations

Classes

Type Aliases

Enumerations

Enumeration: CommandName

The event name dashboard supported.

Enumeration Members

Drill

Drill = "Drill"


DrillDown

DrillDown = "DrillDown"


DrillReset

DrillReset = "ResetDrill"


DrillUp

DrillUp = "DrillUp"


HideScenario

HideScenario = "HideScenario"


ShowScenario

ShowScenario = "ShowScenario"


SwitchPage

SwitchPage = "SwitchPage"


SwitchTab

SwitchTab = "SwitchTab"


ToggleScenario

ToggleScenario = "ToggleScenario"

Enumeration: DesignerEventType

Enumeration Members

Close

Close = "close"


Dashboard designer close event.


DatabindingPanelHidden

DatabindingPanelHidden = "databindingPanelHidden"


Data binding panel hidden event


DatabindingPanelShown

DatabindingPanelShown = "databindingPanelShown"


Data binding panel display event


Error

Error = "error"


Dashboard designer error event


InspectorShown

InspectorShown = "inspectorShown"


Property panel display event


InspetorHidden

InspetorHidden = "inspetorHidden"


Property panel hidden event


Loaded

Loaded = "loaded"


Dashboard designer loading complete event


MobileViewEntered

MobileViewEntered = "mobileViewEntered"


Enter the mobile view event


MobileViewExited

MobileViewExited = "mobileViewExited"


Exit mobile view event


PreviewEntered

PreviewEntered = "previewEntered"


Enter the preview state event


PreviewExited

PreviewExited = "previewExited"


Exit preview state event


Rendered

Rendered = "rendered"


Dashboard designer rendering complete event


Saved

Saved = "saved"


Dashboard document save complete event

Enumeration: InteractionMouseEventAction

Enumeration Members

DrillTo

DrillTo = "drillTo"


Exclude

Exclude = "exclude"


JumpTo

JumpTo = "jumpTo"


Keep

Keep = "keep"


None

None = "none"


ShowTooltip

ShowTooltip = "showTooltip"

Enumeration: Toolbar

Enumeration Members

Auto

Auto = "auto"


Default

Default = "default"


Hide

Hide = "hide"


Show

Show = "show"

Class: DashboardDesigner

Constructor

new DashboardDesigner()

Methods

addVisual

addVisual(visualName, width?, height?, left?, top?): Promise<string>


Adds a new scenario to the current document.

Parameters

Name

Type

Description

visualName

string

The visual name of the new scenario.

Here are some built-in visual names, "richEditor", "picture","container", "tabContainer", "spreadChart", "mergedChart", "embeddedDashboard", "embeddedReport", "treeSlicer", "dateRangeSlicer", "comboBoxSlicer", "labelSlicer", "relativeDateSlicer", "dataRangeSlicer", "column", "stackedColumn", "percentStackedColumn", "rangeColumn", "bar", "stackedBar", "percentStackedBar", "rangeBar", "line""area", "stackedArea", "percentStackedArea", "rangeArea", "pie", "donut", "rose", "radialStackedBar", "stackedBarInPolar", "sunburst", "barInPolar", "radar", "filledRadar", "scatter", "bubble", "treeMap", "combined", "funnel", "gauge", "indicator", "KPI", "pivotTable", "dataTable", "kpiMatrix", "map", "webContent", "floorPlan", "card", "candlestick", "KpiKanban", etc.

If the added scenario is a custom visual chart, the visual name is defined by its author.

width?

number

The width of the new scenario.

height?

number

The height of the new scenario.

left?

number

The left position of the new scenario.

top?

number

The top position of the new scenario.

Returns

Promise<string>


Sample Code

designer.addVisual( 
		visualName: 'column',
		width: 400,
		height: 300,
		left: 0,
		top: 0
);

destroy

destroy(): void


Releases the resources of the dashboard designer instance.

Returns

void


hideDataBindingPanel

hideDataBindingPanel(): void


Hides the data binding panel of the dashboard designer.

Returns

void


hideInspector

hideInspector(): void


Hides the inspector panel of the dashboard designer.

Returns

void


initialize

initialize(initOption): Promise<void>


Initializes a designer instance and returns a promise.

Parameters

Name

Type

initOption

DashboardDesignerInitOption

Returns

Promise<void>


Sample Code

	designer.initialize({
		container: document.querySelector("#dashboard"),
		defaults: {
			datasetId
		},
		features: {
			actionbarItems : ["focus","annotation","shareScenario"]
		},
		onLoaded: (docName) => { 
			document.title = docName;
		}
});

isDocumentDirty

isDocumentDirty(): boolean


Returns a bool value whether the state of the current document is dirty.

Returns

boolean


off

off(eventType, eventHandler): void


Unsubscribes to a dashboard event.

Parameters

Name

Type

eventType

DesignerEventType

eventHandler

(...args: any[]) => void

Returns

void


on

on(eventType, eventHandler): void


Subscribes to a dashboard event.

Parameters

Name

Type

eventType

DesignerEventType

eventHandler

(...args: any[]) => void

Returns

void


save

save(option?): Promise<boolean>


Saves the current document.

Parameters

Name

Type

option?

DocumentSaveOption

Returns

Promise<boolean>


Sample Code

designer.save({
		name: 'xxxxx',
		categories: ['xx'],
		comment: 'xxxx',
		shouldPublish: true
});

setDatasetId

setDatasetId(datasetId): void


Specifies a dataset for the current scenario.

Parameters

Name

Type

Description

datasetId

string

The dataset id.

Returns

void


showDataBindingPanel

showDataBindingPanel(): void


Shows the data binding panel of the dashboard designer.

Returns

void


showInspector

showInspector(): void


Shows the inspector panel of the dashboard designer.

Returns

void


togglePreview

togglePreview(option?): void


Switches designer's view mode. If the designer is now in the 'Design' state, then it will go to the 'Preview' state and vice versa.

Parameters

Name

Type

option?

DocumentSyncOption

Returns

void

Class: DashboardLiteViewer

Constructors

new DashboardLiteViewer()

Methods

destroy

destroy(): void


Releases the resources of the lite viewer instance.

Returns

void


executeCommand

executeCommand(option): Promise<void>


Provides some events for users to control the current document.

Parameters

Name

Type

option

CommandOption

Returns

Promise<void>


Sample Code

	liteViewer.executeCommand({
		name: 'DrillDown', // or 'Drill'
		payload: {
			target: 'column',
			drillDimension: 'Region',
		}
}).then(() => {
		// drill down successfully
}).catch((err) => {
		console.log(err);
});

getDatasets

getDatasets(): Promise<any[]>


Returns all the used datasets.

Returns

Promise<any[]>


initialize

initialize(initOption): Promise<any>


Initializes a lite viewer instance and returns a promise.

Parameters

Name

Type

initOption

DashboardLiteViewerInitOption

Returns

Promise<any>


Sample Code

	liteViewer.initialize({
		container: document.querySelector("#dashboard"),
		defaults: {
			dashboardId: 'xxxxxx',
		},
		features: {
			actionbarItems : ["focus","annotation","shareScenario"]
		},
		onLoaded: (docName) => { 
			document.title = docName;
		}
});

requestFullScreen

requestFullScreen(): void


Makes the current document enter the full screen mode.

Returns

void


setParameterValue

setParameterValue(parameters): void


Sets parameters value for the current document.

Parameters

Name

Type

parameters

Object

Returns

void


Sample code

viewer.setParameterValue({
		p1: ['product1'], 
		p2: [['dd1', '2018'], ['dd2', '2017']]
})

Class: DashboardViewer

Constructors

new DashboardViewer()

Methods

destroy

destroy(): void


Releases the resources of the viewer instance.

Returns

void


executeCommand

executeCommand(option): Promise<void>


Provides some events for users to control the current document.

Parameters

Name

Type

option

CommandOption

Returns

Promise<void>


Sample Code

	viewer.executeCommand({
		name: 'DrillDown', // or 'Drill'
		payload: {
			target: 'column',
			drillDimension: 'Region',
		}
}).then(() => {
		// drill down successfully
}).catch((err) => {
		console.log(err);
});

getDatasets

getDatasets(): Promise<any[]>


Returns all the used datasets.

Returns

Promise<any[]>


initialize

initialize(initOption): Promise<void>


Initializes a standard viewer instance and returns a promise.

Parameters

Name

Type

initOption

DashboardViewerInitOption

Returns

Promise<void>


Sample Code

	viewer.initialize({
		container: document.querySelector("#viewer"),
		defaults: {
			dashboardId: 'xxxxxx',
		},
		features: {
			actionbarItems : ["focus","annotation","shareScenario"]
		},
		onLoaded: (docName) => { 
			document.title = docName;
		}
});

requestFullScreen

requestFullScreen(): void


Makes the current document enter the full screen mode.

Returns

void


setParameterValue

setParameterValue(parameters): void


Sets parameters value for the current document.

Parameters

Name

Type

parameters

Object

Returns

void


Sample code

viewer.setParameterValue({
		p1: ['product1'], 
		p2: [['dd1', '2018'], ['dd2', '2017']]
})

Type Aliases

CommandOption

Ƭ CommandOption: Object


The options of executing the command.

Type declaration

Name

Type

name

CommandName

payload

SwitchTabCommandPayload | SwitchPageCommandPayload | DrillDownCommandPayload | DrillUpCommandPayload | DrillResetCommandPayload | ToggleScenarioCommandPayload | ShowScenarioCommandPayload | HideScenarioCommandPayload

name: CommandName


The event name of the command.


payload: SwitchTabCommandPayload | SwitchPageCommandPayload | DrillDownCommandPayload | DrillUpCommandPayload | DrillResetCommandPayload | ToggleScenarioCommandPayload | ShowScenarioCommandPayload | HideScenarioCommandPayload


The payload of each command.



DashboardDesignerConfig

Ƭ DashboardDesignerConfig: DashboardDesignerInitOption & Partial<DashboardDesignerDefaults> & WynBIOption & commonConfig


DashboardDesignerDefaults

Ƭ DashboardDesignerDefaults: Object


The default properties of DashboardDesignerInitOption.

Type declaration

Name

Type

clickAction?

string

containerFilterScope?

string

contextMenuActions?

string

dashboardId?

string

datasetId?

string

documentThemeId?

string

dp?

object | string

enableDeveloperMode?

boolean

lng?

string

notificationTime?

number

templateId?

string

theme?

string

clickAction?: string


The dashboard click actions.


containerFilterScope?: string


The dashboard container filter scope.


contextMenuActions?: string


The dashboard context menu actions


dashboardId?: string


The dashboard id.


datasetId?: string


The dashboard dataset id.


documentThemeId?: string


The dashboard document theme id.


dp?: object | string


The dashboard parameters.


enableDeveloperMode?: boolean


Enable developer mode for custom visual dev tools.


lng?: string


The language of the user interface.


notificationTime?: number


The setting of dashboard notification time.


templateId?: string


The templateId create dashboard with.


theme?: string


The dashboard theme.



DashboardDesignerFeatures

Ƭ DashboardDesignerFeatures: Object


The features properties of DashboardDesignerInitOption.

Type declaration

Name

Type

actionbarItems?

string[]

componentCategories?

string[]

disableAnimation?

boolean

disableChangeDataset?

boolean

showCloseButton?

boolean

showDataBindingPanel?

boolean

showHelpButton?

boolean

showInspector?

boolean

showInspectorWhenOpen?

boolean

showMobileDesigner?

boolean

showPanelWhenOpen?

boolean

showWizard?

boolean

toolbar?

"show" | "hide"

actionbarItems?: string[]


Define the action bar action white list.


componentCategories?: string[]


Control which component categories are available in the designer.


disableAnimation?: boolean


Control the animation enabled.


disableChangeDataset?: boolean


Control whether the user can change the binding dataset of the scenario.


showCloseButton?: boolean


Control the visibility of the close button.


showDataBindingPanel?: boolean


Control the visibility of the designer's data binding panel.


showHelpButton?: boolean


Control the visibility of the help button.


showInspector?: boolean


Control the visibility of the designer inspector.


showInspectorWhenOpen?: boolean


Control the visibility of the inspector when open.


showMobileDesigner?: boolean


Control the visibility of the mobile designer.


showPanelWhenOpen?: boolean


Control the visibility of the panel when open.


showWizard?: boolean


Control the visibility of the wizard.


toolbar?: "show" | "hide"


Control the visibility of the toolbar.



DashboardDesignerInitOption

Ƭ DashboardDesignerInitOption: Object


The options of initializing a dashboard designer.

Type declaration

Name

Type

container?

Element

defaults?

DashboardDesignerDefaults

features?

DashboardDesignerFeatures

onClose?

() => void

onError?

(errorInfo: object) => void

onLoaded?

(docName: string) => void

onMount?

() => void

onSave?

(docName: string, id: string) => void

container?: Element


A DOM element used to mount the dashboard designer.


defaults?: DashboardDesignerDefaults


Default options of initializing a dashboard designer.


features?: DashboardDesignerFeatures


Features options of initializing a dashboard designer.


onClose?: () => void


This is a callback function, it will be invoked when the designer is closed.


onError?: (errorInfo: object) => void


This is a callback function, it will be invoked when the document has any error message.


onLoaded?: (docName: string) => void


This is a callback function, it will be invoked after the designer loaded.


onMount?: () => void


This is a callback function, it will be invoked after the designer mounted.


onSave?: (docName: string, id: string) => void


This is a callback function, it will be invoked when users save a document .



DashboardLiteViewerConfig

Ƭ DashboardLiteViewerConfig: DashboardLiteViewerInitOption & Partial<DashboardLiteViewerDefaults> & WynBIOption & commonConfig


DashboardLiteViewerDefaults

Ƭ DashboardLiteViewerDefaults: Object


The default properties of DashboardLiteViewerInitOptions.

Type declaration

Name

Type

clickAction?

string

containerFilterScope?

string

contextMenuActions?

string

dashboardId

string

documentThemeId?

string

dp?

object | string

hideErrors?

boolean

lng?

string

notificationTime?

number

pageNumber?

string

scenario?

string

showScenarioTitle?

boolean

theme?

string

clickAction?: string


The dashboard click actions.


containerFilterScope?: string


The dashboard container filter scope.


contextMenuActions?: string


The dashboard context menu actions


dashboardId: string


The dashboard id.


documentThemeId?: string


The dashboard document theme id.


dp?: object | string


The dashboard parameters.


hideErrors?: boolean


Hide all dashboard error notifications.


lng?: string


The language of the user interface.


notificationTime?: number


The setting of dashboard notification time.


pageNumber?: string


The viewer page number starts from 1.


scenario?: string


The single scenario name.


showScenarioTitle?: boolean


Allow show scenario title only when do single scenario integration.


theme?: string


The dashboard theme.



DashboardLiteViewerFeatures

Ƭ DashboardLiteViewerFeatures: Object


The features properties of DashboardLiteViewerInitOptions.

Type declaration

Name

Type

actionbarItems?

string[]

disableAnimation?

boolean

disableAutoScroll?

boolean

disableAutoSwitchPage?

boolean

actionbarItems?: string[]


Define the action bar action white list.


disableAnimation?: boolean


Control the animation enabled.


disableAutoScroll?: boolean


Control the autoscroll enabled.


disableAutoSwitchPage?: boolean


Control the auto switch page enabled.



DashboardLiteViewerInitOption

Ƭ DashboardLiteViewerInitOption: Object


The options of initializing a dashboard lite viewer.

Type declaration

Name

Type

container?

Element

defaults?

DashboardViewerDefaults

features?

DashboardViewerFeatures

container?: Element


A DOM element used to mount the dashboard lite viewer.


defaults?: DashboardViewerDefaults


Default options of initializing a dashboard lite viewer.


features?: DashboardViewerFeatures


Features options of initializing a dashboard lite viewer.



DashboardViewerConfig

Ƭ DashboardViewerConfig: DashboardViewerInitOption & Partial<DashboardViewerDefaults> & WynBIOption & commonConfig


DashboardViewerDefaults

Ƭ DashboardViewerDefaults: Object


The default properties of DashboardViewerInitOptions.

Type declaration

Name

Type

clickAction?

string

containerFilterScope?

string

contextMenuActions?

string

dashboardId

string

documentThemeId?

string

dp?

object | string

hideErrors?

boolean

lng?

string

notificationTime?

number

pageNumber?

string

scenario?

string

showScenarioTitle?

boolean

size?

"fitheight" | "fittoheight" | "fitwidth" | "fittowidth" | "fitscreen" | "fittoscreen" | "auto"

theme?

string

clickAction?: string


The dashboard click actions.


containerFilterScope?: string


The dashboard container filter scope.


contextMenuActions?: string


The dashboard context menu actions


dashboardId: string


The dashboard id.


documentThemeId?: string


The dashboard document theme id.


dp?: object | string


The dashboard parameters.


hideErrors?: boolean


Hide all dashboard error notifications.


lng?: string


The language of the user interface.


notificationTime?: number


The setting of dashboard notification time.


pageNumber?: string


The viewer page number starts from 1.


scenario?: string


The single scenario name.


showScenarioTitle?: boolean


Show scenario title only when do single scenario integration.


size?: "fitheight" | "fittoheight" | "fitwidth" | "fittowidth" | "fitscreen" | "fittoscreen" | "auto"


Set the display mode of the dashboard in the viewer


theme?: string


The dashboard theme.



DashboardViewerFeatures

Ƭ DashboardViewerFeatures: Object


The features properties of DashboardViewerInitOptions.

Type declaration

Name

Type

actionbarItems?

string[]

disableAnimation?

boolean

disableAutoScroll?

boolean

disableAutoSwitchPage?

boolean

hideToolbarActions?

boolean

actionbarItems?: string[]


Define the action bar action white list.


disableAnimation?: boolean


Control the animation enabled.


disableAutoScroll?: boolean


Control the autoscroll enabled.


disableAutoSwitchPage?: boolean


Control the auto switch page enabled.


hideToolbarActions?: boolean


Control the hidden toolbar action items.



DashboardViewerInitOption

Ƭ DashboardViewerInitOption: Object


The options of initializing a dashboard standard viewer.

Type declaration

Name

Type

container?

Element

defaults?

DashboardViewerDefaults

features?

DashboardViewerFeatures

onClose?

() => void

onError?

(errorInfo: object) => void

onLoaded?

(docName: string, id: string) => void

onMount?

() => void

onRendered?

(docName: string) => void

container?: Element


A DOM element used to mount the dashboard standard viewer.


defaults?: DashboardViewerDefaults


Default options of initializing a dashboard standard viewer.


features?: DashboardViewerFeatures


Features options of initializing a dashboard standard viewer.


onClose?: () => void


Invoked when the designer is closed.


onError?: (errorInfo: object) => void


Invoked when the document has any error message.


onLoaded?: (docName: string, id: string) => void


Invoked after the designer loaded.


onMount?: () => void


Invoked after the designer mounted.


onRendered?: (docName: string) => void


Invoked after the designer rendered.



DocumentSaveOption

Ƭ DocumentSaveOption: Object


The options of saving the current document.

Type declaration

Name

Type

categories?

string[]

comment?

string

name?

string

shouldPublish?

boolean

categories?: string[]


Specify categories for the current document.


comment?: string


Add a comment for the current document.


name?: string


Specify a name for the current document.


shouldPublish?: boolean


Publish the current document when the server enables the draft function.



DocumentSyncOption

Ƭ DocumentSyncOption: Object


The options of whether synchronizing the state changes or not.

Type declaration

Name

Type

syncChanges?

boolean

syncChanges?: boolean


If there are some state changes in the preview, the designer will show the sync dialog. Use this parameter to synchronize changes to the current document and to control the visibility of the sync dialog.



DrillDownCommandPayload

Ƭ DrillDownCommandPayload: Object


The payload of executing 'DrillDown' command.

Type declaration

Name

Type

drillDimension?

string

target

string

drillDimension?: string


The name of a target dimension. Available only when the drill type is All or List, that is, if the drill type is Path, the drillDimension is ignored and drill to the dimension specified at data binding.


target: string


The name of a scenario that you want to control.



DrillResetCommandPayload

Ƭ DrillResetCommandPayload: Object


The payload of executing 'ResetDrill' command.

Type declaration

Name

Type

target

string

target: string


The name of a scenario that you want to control.



DrillUpCommandPayload

Ƭ DrillUpCommandPayload: Object


The payload of executing 'DrillUp' command.

Type declaration

Name

Type

target

string

target: string


The name of a scenario that you want to control.



HideScenarioCommandPayload

Ƭ HideScenarioCommandPayload: Object


The payload of executing 'HideScenario' command.

Type declaration

Name

Type

delay?

number

duration?

number

leaveAnimation?

"none" | "top" | "bottom" | "left" | "right" | "fadeIn"

scenarioId?

string

target

string

delay?: number


The delay time(s) of executing the command.


duration?: number


The duration time(s) of showing or hiding a scenario.


leaveAnimation?: "none" | "top" | "bottom" | "left" | "right" | "fadeIn"


The animation type of hiding a scenario.


scenarioId?: string


The id of a scenario.


target: string


The name of a scenario that you want to control.



ShowScenarioCommandPayload

Ƭ ShowScenarioCommandPayload: Object


The payload of executing 'ShowScenario' command.

Type declaration

Name

Type

delay?

number

duration?

number

enterAnimation?

"none" | "top" | "bottom" | "left" | "right" | "fadeIn"

scenarioId?

string

target

string

delay?: number


The delay time(s) of executing the command.


duration?: number


The duration time(s) of showing or hiding a scenario.


enterAnimation?: "none" | "top" | "bottom" | "left" | "right" | "fadeIn"


The animation type of showing a scenario.


scenarioId?: string


The id of a scenario.


target: string


The name of a scenario that you want to control.



SwitchPageCommandPayload

Ƭ SwitchPageCommandPayload: Object


The payload of executing 'SwitchPage' command.

Type declaration

Name

Type

index?

number

name?

string

pageId?

string

index?: number


The index of the page.


name?: string


The name of the page.


pageId?: string


The id of the page.



SwitchTabCommandPayload

Ƭ SwitchTabCommandPayload: Object


The payload of executing 'SwitchTab' command.

Type declaration

Name

Type

containerId?

string

index?

number

name?

string

target

string

containerId?: string


The id of the container.


index?: number


The index of a tab of the container.


name?: string


The name of a tab of the container.


target: string


The name of the container that you want to control.



ToggleScenarioCommandPayload

Ƭ ToggleScenarioCommandPayload: Object


The payload of executing 'ToggleScenario' command.

Type declaration

Name

Type

delay?

number

duration?

number

enterAnimation?

"none" | "top" | "bottom" | "left" | "right" | "fadeIn"

leaveAnimation?

"none" | "top" | "bottom" | "left" | "right" | "fadeIn"

scenarioId?

string

target

string

delay?: number


The delay time(s) of executing the command.


duration?: number


The duration time(s) of showing or hiding a scenario.


enterAnimation?: "none" | "top" | "bottom" | "left" | "right" | "fadeIn"


The animation type of showing a scenario.


leaveAnimation?: "none" | "top" | "bottom" | "left" | "right" | "fadeIn"


The animation type of hiding a scenario.


scenarioId?: string


The id of a scenario.


target: string


The name of a scenario that you want to control.



WynBIOption

Ƭ WynBIOption: Object


The basic option to create a WynBI instance.

Type declaration

Name

Type

baseUrl

string

token

string

baseUrl: string


The web address of your wyn server.


token: string


The access token. the token is generated from the Admin portal.



WynDashboardApp

Ƭ WynDashboardApp<T>: T extends "DashboardDesigner" ? DashboardDesigner : T extends "DashboardViewer" ? DashboardViewer : T extends "ViewerLite" ? DashboardLiteViewer : any

Type parameters

Name

Type

T

extends WynDashboardAppType


WynDashboardAppType

Ƭ WynDashboardAppType: "DashboardDesigner" | "DashboardViewer" | "ViewerLite"


commonConfig

Ƭ commonConfig: Object

Type declaration

Name

Type

version?

string

version?: string