svg

<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="svg">
  ...
</discovery-tile>
{
  'type' 'svg'
  ...
  'macro' <% %>
}
Name Type Description
data string[] SVG to display
globalParams Option Global options (see above) concerning this tile
params Option[] List of options (see above) concerning each displayed dataset depending of the index of this array
events Events[] List of events to emit (see below)

Sample

Simple SVG

@xav/svg
@xav/svg

Dynamic SVG

<% RAND 0.5 > %>
<% 'red' 'color' STORE %>
<% 'green'  'color' STORE %> IFTE

'<' 'svg width="400" height="180">' +
'<' + 'rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:{{color}};stroke:black;stroke-width:5;opacity:0.5" />' +
'<' + '/svg>' +
{
  'color' $color
}
TEMPLATE
<% RAND 0.5 > %> <% 'red' 'color' STORE %> <% 'green' 'color' STORE %> IFTE '<' 'svg width="400" height="180">' + '<' + 'rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:{{color}};stroke:black;stroke-width:5;opacity:0.5" />' + '<' + '/svg>' + { 'color' $color } TEMPLATE

Emit event on click

You can handle clicks on particular SVG elements.

{
  'title' 'SVG With event' 
  'options' {
    'eventHandler' 'type=.*,tag=popup'
    'popup' {
      'width' '50%25'
      'height' '400px'
      'bgColor' '#404040'
      'fontColor' '#ffffff'
    } 
  }
  'tiles' [ 
    {
      'type' 'svg'
      'x' 0 'y' 0 'w' 12 'h' 4
      'macro' <%
        {
          'data' @xav/factory
          'globalParams' {
            'svg' {
              'handlers' [
                {
                  'selector' '#Calque_3 > g:nth-child(2) > circle'
                  'click' T
                  'event' {
                    'tags' [ 'popup' ]
                    'type' 'popup'
                    'value' {
                      'type' 'bar'
                      'title' 'my data 1'
                      'options' { 'scheme' 'CHARTANA' 'fontColor' '#ffffff' }
                      'w' 3 'h' 1 'x' 0 'y' 0
                      'data' [ NEWGTS 1 100 <% NaN NaN NaN RAND ADDVALUE %> FOR ]
                    }
                  }
                }
                {
                  'selector' '#Calque_3 > g:nth-child(1) > circle'
                  'click' T
                  'event' {
                    'tags' [ 'popup' ]
                    'type' 'popup'
                    'value' {
                      'type' 'area'
                      'options' { 'scheme' 'BU_GN' 'fontColor' '#ffffff' }
                      'title' 'my data 2'
                      'w' 3 'h' 1 'x' 0 'y' 0
                      'data' [ NEWGTS 1 100 <% NaN NaN NaN RAND ADDVALUE %> FOR ]
                    }
                  }
                }
              ]
            }
          }
        }     
      %> 
    }
  ] 
}
{ 'title' 'SVG With event' 'options' { 'eventHandler' 'type=.*,tag=popup' 'popup' { 'width' '50%25' 'height' '400px' 'bgColor' '#404040' 'fontColor' '#ffffff' } } 'tiles' [ { 'type' 'svg' 'x' 0 'y' 0 'w' 12 'h' 4 'macro' <% { 'data' @xav/factory 'globalParams' { 'svg' { 'handlers' [ { 'selector' '#Calque_3 > g:nth-child(2) > circle' 'click' T 'event' { 'tags' [ 'popup' ] 'type' 'popup' 'value' { 'type' 'bar' 'options' { 'scheme' 'CHARTANA' 'fontColor' '#ffffff' } 'title' 'my data 1' 'w' 3 'h' 1 'x' 0 'y' 0 'data' [ NEWGTS 1 100 <% NaN NaN NaN RAND ADDVALUE %> FOR ] } } } { 'selector' '#Calque_3 > g:nth-child(1) > circle' 'click' T 'event' { 'tags' [ 'popup' ] 'type' 'popup' 'value' { 'type' 'area' 'options' { 'scheme' 'BU_GN' 'fontColor' '#ffffff' } 'title' 'my data 2' 'w' 3 'h' 1 'x' 0 'y' 0 'data' [ NEWGTS 1 100 <% NaN NaN NaN RAND ADDVALUE %> FOR ] } } } ] } } } %> } ] }

Found an issue on this page or something missing?

Tell us onSlack iconThe Lounge, the Warp 10 Community Slack.