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
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
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 ]
}
}
}
]
}
}
}
%>
}
]
}
Found an issue on this page or something missing?
Tell us onThe Lounge, the Warp 10 Community Slack.