Loading

Configuration

discovery-dashboard

This is the main Web Component.

Attributes

PropertyAttributeTypeDefaultDescription
autoRefreshauto-refreshnumber-1Reloads the dashboard each x seconds, -1 to disable it
cellHeightcell-heightnumber220If type = "scada", cell height in pixels
colscolsnumber12If type = "scada", number of columns of the grid
dashboardTitledashboard-titlestringundefinedTitle of the dashboard, not mandatory, could be overridden by the dashboard definition (see Dashboard Definition below).
debugdebugbooleanfalseEnable debug messages
optionsoptionsParam / stringnew Param()Serialized JSON options (see Params below)
typetype"dashboard" / "scada"'dashboard'Dashboard means a grid of cols columns, each tile is places in a cell with x and y. Scada means a free placement of tiles in pixels with x, y and z
urlurlstringundefinedexec url of your Warp 10 endpoint

Payload

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

<discovery-dashboard url="https://warp.senx.io/api/v0/exec" dashboard-title="Test">
{
  '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 
      %>
    }
  ]
}
</discovery-dashboard>

Macro as tiles definition

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

<discovery-dashboard url="https://warp.senx.io/api/v0/exec" dashboard-title="Test">
{
  '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  }
}
</discovery-dashboard>

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.

NameTypeDefaultDescription
typestring 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
endpointstring exec url of your Warp 10 endpoint, could also be a WebSocket endpoint (autoRefresh will be mandatory)
titlestring Tile title
unitstring Unit to be displayed
xnumber X position of the Tile.
ynumber Y position of the Tile.
wnumber Width the Tile.
hnumber Height the Tile.
znumber 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.
optionsOption 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.

<discovery-dashboard url="https://warp.senx.io/api/v0/exec" dashboard-title="Test">
{
  '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  }
}
</discovery-dashboard>

Execution result (DataModel)

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

NameTypeDescription
dataGTS, GTS[], string, numberData to display depending on the chart type
globalParamsOptionGlobal options (see above) concerning this tile
paramsOption[]List of options (see above) concerning each displayed data depending of the index of this array
eventsEvents[]List of events to emit (see below)

Common CSS vars

NameDefault
--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-colortransparent

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.

options

NameTypeDefaultDescription
typestring 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)
timeModestring'date'date, timestamp or custom
timeZonestring'UTC'Timezone, you can set it to 'AUTO' in order to use the browser's timezone
timeUnitstring'us'Warp 10 time unit (us, ms, ns)
timeFormatstring'ddd DD MMM YY HH:mm:ss'Displayed time format, Discovery uses the browser's locale
schemestring'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 )
showLegendbooleanfalseDisplay the chart legend
unitstring Unit to be displayed
bgColorstring Background color of tiles
datasetColorstring Only for the param field in execution result. Color of the trace
fontColorstring Font color in tiles
borderColorstring Border color in tiles
showLegendbooleanfalseDisplay chart legend
hideYAxisbooleanfalseHide Y axis on some charts (the line family)
showRangeSelectorbooleanfalseDisplay the skyline below line or area charts
autoRefreshnumber-1if positive value, will refresh with a request each autoRefresh second, in case of WebSockets, it is in milliseconds
showErrorsbooleantrueDisplay errors if any
showStatusbooleantrueDisplay the Warp 10 execution status
expandAnnotationbooleanfalseExpand annotations
schemestring'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)
eventHandlerstring'type=Regexp,tag=Regexp'Only applies on Tiles and Dashboard. See the events chapter below
customStylesobject Key/value map used to add custom CSS (see Theming)
httpHeadersobject Key/value map used to add custom http headers to the request
fullDateDisplaybooleanfalseOnly relevant for the line-family charts (line, area, stepped, etc...) and annotations, display dates on axis in ISO format

Specific charts configuration, CSS styles and samples

EventDescriptionType
draw CustomEvent<void>


Next step: Events Mechanism