discovery-dashboard

This is the main Web Component.

Properties

Property	Attribute	Description	Type	Default
autoRefresh	auto-refresh		number	-1
cellHeight	cell-height		number	220
cols	cols		number	12
dashboardTitle	dashboard-title		string	undefined
data	data		Dashboard | string	undefined
debug	debug		boolean	false
options	options		Param | string	new Param()
type	type		"dashboard" | "flex" | "scada"	'dashboard'
url	url		string	undefined
vars	vars		any	'{}'
warpscript	warpscript		string	undefined

Payload

Insert directly your dashboard definition as a WarpScript inside the HTML tag:

{
  'title' 'Test'
  'description' 'Dashboard test'
  'tiles' [
  {
    'title' 'test'
    'options' { 'autoRefresh' 1 }
    'x' 0 'y' 0 'w' 12 'h' 2
    'type' 'area' 'macro' <%
        1 4 <% DROP
          NEWGTS 'g' STORE
          1 10 <%
            'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP
          %> FOR
          $g
        %> FOR
      %>
    }
  ]
}

Macro as tiles definition

Allow to use a macro as a tile definition and can be polymorphic through auto-refreshes.

{
  'endpoint' 'https://sandbox.senx.io/api/v0/exec'
  'title' 'My Polymorphic Dashboard'
  'description' 'Change over a random tile count display each 10 seconds'
  'tiles' <% [
      RAND 10 * ROUND 'value' STORE
      0 $value <%
          'i' STORE
          {
              'type' 'display'
              'w' 1 'h' 1 'x' $i 'y' 0
              'data' $i
          }
      %> FOR
  ] %>
  'options' { 'autoRefresh' 10  }
}

Tile definition

• If the dashboard type is 'dashboard', x, y, h and w are expressed in cells. x and y begin at 0, the top left corner, w and h begin at 1.
• If the dashboard type is 'scada', x, y, h and w are expressed in pixels. x and y begin at 0, the top left corner. z represents the z-index.

Data are displayed either with data or with macro. Auto-refresh for tiles only applies for macro.

Name	Type	Default	Description
type	string		Chart type (line, area, scatter, step-area, spline-area, spline, step, step-after, step-before, annotation, bar, display, image, map, gauge, compass, linear-gauge, circle, pie, plot, doughnut, rose, tabular, svg, input:text, input:list, input:secret, input:autocomplete, input:slider, input:date, input:date-range, button
endpoint	string		exec url of your Warp 10 endpoint, could also be a WebSocket endpoint (autoRefresh will be mandatory)
title	string		Tile title
unit	string		Unit to be displayed
x	number		X position of the Tile.
y	number		Y position of the Tile.
w	number		Width the Tile.
h	number		Height the Tile.
z	number		Z index the Tile.
data	[]		Array of static data computed when the dashboard is rendered. See Execution Result below.
macro	<% macro %>		A macro executed when the tile loads in the display. See Execution Result below.
options	Option		Options (see above) concerning this tile

Macro as tile definition

Allow to use a macro as a tile definition and can be polymorphic through auto-refreshes.

{
  'endpoint' 'https://sandbox.senx.io/api/v0/exec'
  'title' 'My Polymorphic Dashboard'
  'description' 'Change over a random tile count display each 10 seconds'
  'tiles' <% [
      RAND 10 * ROUND 'value' STORE
      0 $value <%
          'i' STORE
          {
              'type' 'display'
              'w' 1 'h' 1 'x' $i 'y' 0
              'data' $i
          }
      %> FOR
  ] %>
  'options' { 'autoRefresh' 10  }
}

Execution result (DataModel)

You could either return a single value ( GTS, number or string depending on the chart type), or a complex data structure:

Name	Type	Description
data	GTS, GTS[], string, number	Data to display depending on the chart type
globalParams	Option	Global options (see above) concerning this tile
params	Option[]	List of options (see above) concerning each displayed data depending of the index of this array
events	Events[]	List of events to emit (see below)

Common CSS vars

Name	Default
--gts-classname-font-color	#004eff
--gts-labelname-font-color	#19A979
--gts-attrname-font-color	#ED4A7B
--gts-separator-font-color	#a0a0a0
--gts-labelvalue-font-color	#000000
--gts-attrvalue-font-color	#000000
--warp-view-font-color	#000000
--warp-view-bg-color	transparent

Params / Options

Options inherit from higher level. You can use options as an attribute in <discovery-dashboard />, as a field in the dashboard definition, as a field in a tile definition and as a field in execution result.

Name	Type	Default	Description
type	string		Chart type (line, area, scatter, step-area, spline-area, spline, step, step-after, step-before, annotation, bar, display, image, map, gauge, linear-gauge, circle, pie, plot, doughnut, rose, tabular, svg, input:text, input:list, input:secret, input:autocomplete, input:slider, input:date, input:date-range, button)
timeMode	string	'date'	date, timestamp or custom
timeZone	string	'UTC'	Timezone, you can set it to 'AUTO' in order to use the browser's timezone
timeUnit	string	'us'	Warp 10 time unit (us, ms, ns)
timeFormat	string	'ddd DD MMM YY HH:mm:ss'	Displayed time format, Discovery uses the browser's locale
scheme	string	'WARP10'	Color scheme (COHESIVE, COHESIVE_2, BELIZE, VIRIDIS, MAGMA, INFERNO, PLASMA, YL_OR_RD, YL_GN_BU, BU_GN, WARP10, NINETEEN_EIGHTY_FOUR, ATLANTIS, DO_ANDROIDS_DREAM, DELOREAN, CTHULHU, ECTOPLASM, T_MAX_400_FILM )
showLegend	boolean	false	Display the chart legend
unit	string		Unit to be displayed
bgColor	string		Background color of tiles
datasetColor	string		Only for the param field in execution result. Color of the trace
fontColor	string		Font color in tiles
borderColor	string		Border color in tiles
showLegend	boolean	false	Display chart legend
hideYAxis	boolean	false	Hide Y axis on some charts (the line family)
showRangeSelector	boolean	false	Display the skyline below line or area charts
autoRefresh	number	-1	if positive value, will refresh with a request each autoRefresh second, in case of WebSockets, it is in milliseconds
showErrors	boolean	true	Display errors if any
showStatus	boolean	true	Display the Warp 10 execution status
expandAnnotation	boolean	false	Expand annotations
scheme	string	'WARP10'	Color scheme ( COHESIVE, COHESIVE_2, BELIZE, VIRIDIS, MAGMA, INFERNO, PLASMA, YL_OR_RD, YL_GN_BU, BU_GN, WARP10, NINETEEN_EIGHTY_FOUR, ATLANTIS, DO_ANDROIDS_DREAM, DELOREAN, CTHULHU, ECTOPLASM, T_MAX_400_FILM, MATRIX, CHARTANA)
eventHandler	string	'type=Regexp,tag=Regexp'	Only applies on Tiles and Dashboard. See the events chapter below
customStyles	object		Key/value map used to add custom CSS (see Theming)
httpHeaders	object		Key/value map used to add custom http headers to the request
fullDateDisplay	boolean	false	Only relevant for the line-family charts (line, area, stepped, etc…) and annotations, display dates on axis in ISO format

Events

Event	Description	Type
rendered	Triggerd when the dashboard id drawn.	CustomEvent<void>
statusError	Triggered if a WarpScript error occurs	CustomEvent<any>
statusHeaders	Triggered when HTTP headers are send	CustomEvent<string[]>

Methods

getDashboardStructure() => Promise<Dashboard>

Retrieves the pseudo JSON structure of the Dashboard.

Returns

Type: Promise<Dashboard>

getPDF(save?: boolean, output?: string) => Promise<any>

Generates a PDF.

Returns

Type: Promise<any>

getVars() => Promise<any>

Get the dashboard variable states.

Returns

Type: Promise<any>

Next steps

• Learn more about the dashboard-result web component
• Learn how to inject variables
• Learn more about the event mechanism
• Discover chart types