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 |
---|---|---|
|
| 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. |
|
| The width of the new scenario. |
|
| The height of the new scenario. |
|
| The left position of the new scenario. |
|
| 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 |
---|---|
|
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 |
---|---|
| |
| (... |
Returns
void
on
▸ on(eventType
, eventHandler
): void
Subscribes to a dashboard event.
Parameters
Name | Type |
---|---|
| |
| (... |
Returns
void
save
▸ save(option?
): Promise
<boolean
>
Saves the current document.
Parameters
Name | Type |
---|---|
|
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 |
---|---|---|
|
| 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 |
---|---|
|
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 |
---|---|
|
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 |
---|---|
|
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 |
---|---|
|
|
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 |
---|---|
|
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 |
---|---|
|
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 |
---|---|
|
|
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: 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
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
[]
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
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
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
[]
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
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
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
[]
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
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
[]
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
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
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
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
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
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
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
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
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
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
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 |
---|---|
| extends |
WynDashboardAppType
Ƭ WynDashboardAppType: "DashboardDesigner"
| "DashboardViewer"
| "ViewerLite"
commonConfig
Ƭ commonConfig: Object
Type declaration
Name | Type |
---|---|
|
|
version?: string