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>

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, 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
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

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
timeUnitstring'us'Warp 10 time unit (us, ms, ns)
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
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 Tips & Tricks)

Specific charts configuration, CSS styles and samples

EventDescriptionType
draw CustomEvent<void>

Next step: Events Mechanism