svg
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
<div style="height: 250px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="svg">
@xav/svg
</discovery-tile>
</div>
@xav/svg
Dynamic SVG
<div style="height: 250px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="svg" options='{ "autoRefresh": 5 }'>
<% 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
</discovery-tile>
</div>
<% 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