Loading

Events mechanism

Tiles emit events, they also trap events. A Dashboard also traps particular events.

Events are defined in the exec result of a tile, events are emitted when parsing done.

Tiles register handlers on particular tags and event's type. You can use regular expression.

Sample

Events

{
    'title' 'My Dashboard With events'
    'tiles' [
      {
        'type' 'display'
        'title' 'Tile A'
        'w' 2 'h' 1 'x' 2 'y' 0
        'data' ''
        'options' { 'eventHandler' 'type=(data|style),tag=tes.*' } // Events handler
      }
      {
         'type' 'button'
         'title' 'Tile B'
         'options' { 'button' { 'label' 'Click me' } }
         'w' 2 'h' 1 'x' 0 'y' 0
         'macro' <% 
            { 
            'data' <%
                RAND 100 * ROUND 'v' STORE // compute a random value
                { 
                    'data' ''
                    'events' [
                      { 'tags' [ 'test' ] 'type' 'data' 'value' $v } // Event emitter
                    ]
                }
            %> 
            } 
         %>
       }
    ]
}

{ 'title' 'My Dashboard With events' 'tiles' [ { 'type' 'display' 'title' 'Tile A' 'w' 2 'h' 1 'x' 2 'y' 0 'data' '' 'options' { 'eventHandler' 'type=(data|style),tag=tes.*' } // Events handler } { 'type' 'button' 'title' 'Tile B' 'options' { 'button' { 'label' 'Click me' } } 'w' 2 'h' 1 'x' 0 'y' 0 'macro' <% { 'data' <% RAND 100 * ROUND 'v' STORE // compute a random value { 'data' '' 'events' [ { 'tags' [ 'test' ] 'type' 'data' 'value' $v } // Event emitter ] } %> } %> } ] }

Event's types

data

NameTypeDescription
typedata
tagsstring[]Targets
valueGTS, GTS[], string, number, custom dataThe event emitter send data to the receiver, could be any kind of data including single value, GTS list or complex data. The receiver treat this event as an execution result.
{ 'tags' [ 'random' ] 'type' 'data' 'value' 42 } }

style

NameTypeDescription
typestyle
tagsstring[]Targets
value{key:sting, value:string}Send CSS style to be applied by the receiver with a CSS selector as key
{ 
  'tags' [ 'foo' ] 
  'type' 'style' 
  'value' {
    '.discovery-tile' 'background-color: red !important;'
    '.value' 'color: #ffffff;' 
  }
}

zoom

Only relevant for line, area, step, annotation and bar charts.

NameTypeDescription
typezoom
tagsstring[]Targets
{
 'title' 'My Dashboard with zoom sync'
 'tiles' [
    {
      'type' 'bar' 'x' 0 'y' 0 'w' 6 'h' 1
      'options' { 'eventHandler' 'type=zoom,tag=chart1' }
      'macro' <%
        NOW 'now' STORE
        [ 1 4 <% DROP NEWGTS 'g' STORE
          1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND ADDVALUE DROP %> FOR
          $g
        %> FOR ] 'data' STORE
        {
          'data' $data
          'events' [
            { 'tags' [ 'chart2' ] 'type' 'zoom' }
          ]
        }
      %>
    }
    {
      'type' 'line' 'x' 6 'y' 0 'w' 6 'h' 1
      'options' { 'eventHandler' 'type=zoom,tag=chart2' }
      'macro' <%
        NOW 'now' STORE
        [ 1 4 <% DROP NEWGTS 'g' STORE
          1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND ADDVALUE DROP %> FOR
          $g
        %> FOR ] 'data' STORE
        {
          'data' $data
          'events' [
            { 'tags' [ 'chart1' ] 'type' 'zoom' }
          ]
        }
      %>
    }
 ]
}

xpath

Only relevant for SVG targets.

NameTypeDescription
typexpath
tagsstring[]Targets
value{key:sting, value:string}, stringAttributes map or XML string for node replacement
selectorstringXPath selector starting at SVG (ie: /svg/g/g[2]/ellipse[3] )

If value is a string, the node targeted by the XPath selector is replaced by the XML provided in value.

If value is a map, the attributes of the node targeted by the XPath selector will be overridden with the values provided in the map. The key of the map must correspond to an attribute's name.

{  // Node replacement
  'tags' [ 'svg' ] 
  'type' 'xpath'
  'value' '<' 'ellipse rx="15" ry="18" style="stroke:none;fill: red;" cx="50" cy="200"' + '/>' + 
  'selector' '/svg/g/g[2]/ellipse[1]'
}
{ // Attributes replacement
  'tags' [ 'svg' ]
  'type' 'xpath'
  'value' { 'rx' $v 'ry' $v }
  'selector' '/svg/g/g[2]/ellipse[3]'
}

The only target is the Dashboard itself, you must declare handlers at the dashboard level.

Dashboard Event handler declaration:

{
    'title' 'My Dashboard With events'
    'options' { 'eventHandler' 'type=popup,tag=foo' }
    'tiles' [ ... ]
}

When event is trapped, a popup opens with a content.

NameTypeDescription
typepopup
tagsstring[]Targets
valueTile, DashboardOpen a Tile or a complete dashboard in a popup.
{ 
  'tags' [ 'foo' ] 
  'type' 'popup'
  'value' { // a Tile
     'type' 'area'
     'data' [
       NEWGTS 'data' RENAME 0.0 'v' STORE
       1 500 <% 1 s * NOW SWAP - NaN NaN NaN $v RAND 0.5 - + DUP 'v' STORE ADDVALUE %> FOR
     ]
  }
}

variable

You can inject variables into macro defined in Tiles and modify value with an event. But variables must be declared at the Dashboard level with an initial value.

NameTypeDescription
typevariable
tagsstring[]Targets
valueanyNew value for this variable
selectorstringVariable's name
<discovery-dashboard url="https://sandbox.senx.io/api/v0/exec" dashboard-title="Test">
{
  'title' 'My Dashboard With events'
  'vars' {
    'myVar' 42
  }
  'tiles' [
    {
      'type' 'input:text'
      'title' 'Input emitter'
      'options' {
        'button' { 'label' 'Send' }
      }
      'w' 2 'h' 1 'x' 0 'y' 0
      'macro' <% { 'data' $myVar 'events' [ { 'tags' [ 'random' ] 'type' 'variable' 'selector' 'myVar' } ] } %>
    }
    {
      'type' 'display'
      'title' 'Event var receiver'
      'w' 2 'h' 1 'x' 2 'y' 0
      'macro' <% $myVar %>
      'options' { 'eventHandler' 'type=(variable),tag=random' }
    } 
  ]
}
</discovery-dashboard>

{ 'title' 'My Dashboard With events' 'vars' { 'myVar' 42 } 'tiles' [ { 'type' 'input:text' 'title' 'Input emitter' 'options' { 'button' { 'label' 'Send' } } 'w' 2 'h' 1 'x' 0 'y' 0 'macro' <% { 'data' $myVar 'events' [ { 'tags' [ 'random' ] 'type' 'variable' 'selector' 'myVar' } ] } %> } { 'type' 'display' 'title' 'Event var receiver' 'w' 2 'h' 1 'x' 2 'y' 0 'macro' <% $myVar %> 'options' { 'eventHandler' 'type=(variable),tag=random' } } ] }

Next step: Tips & tricks