@alexzer Here's an example of both approaches. Change the url in the page to try the two different approaches:
Page (dashboard markup):
<ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="33366719-20b2-4f57-8d86-61145fc36354" watch-list-xid="WL_f942f3de-bafb-4318-93ee-1932762031a8"></ma-watch-list-get>
<div class="ma-designer-root" id="8a47a1c9-b651-497e-8a7c-64b350497174" style="width: 1366px; height: 768px; position: relative;">
<ma-svg id="9f7c2bd8-5268-4ff0-a1a2-d29bdfbe8e21" ng-include="'/rest/v2/file-stores/public/drawing-ng-repeat.svg'" style="position: absolute; left: 0px; top: 0px;"></ma-svg>
<ma-point-values id="f10206bd-bfd9-43ad-8d7c-72b2ac7cf540" points="designer.points" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" style="position: absolute; left: 0px; top: 600px;" values="combined"></ma-point-values>
</div>
drawing.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 800 600"
height="600"
width="800">
<g
transform="translate(0,0)">
<rect
y="0"
x="0"
height="50"
width="100"
style="fill:none;stroke:#000000;stroke-width:2;" ng-style="{fill: combined[0]['value_binary'] ? 'red' : 'green'}" />
<text
y="30"
x="10"><tspan>Row 1, col 1</tspan></text>
</g>
<g
transform="translate(100,0)">
<rect
y="0"
x="0"
height="50"
width="100"
style="fill:none;stroke:#000000;stroke-width:2;" ng-style="{fill: combined[0]['value_voltage'] > 10 ? 'red' : 'green'}" />
<text
y="30"
x="10"><tspan>Row 1, col 2</tspan></text>
</g>
<g
transform="translate(0,50)">
<rect
y="0"
x="0"
height="50"
width="100"
style="fill:none;stroke:#000000;stroke-width:2;" ng-style="{fill: combined[1]['value_binary'] ? 'red' : 'green'}" />
<text
y="30"
x="10"><tspan>Row 2, col 1</tspan></text>
</g>
<g
transform="translate(100,50)">
<rect
y="0"
x="0"
height="50"
width="100"
style="fill:none;stroke:#000000;stroke-width:2;" ng-style="{fill: combined[1]['value_voltage'] > 10 ? 'red' : 'green'}" />
<text
y="30"
x="10"><tspan>Row 2, col 2</tspan></text>
</g>
</svg>
drawing-ng-repeat.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 800 600"
height="600"
width="800">
<g ng-repeat="value in combined | limitTo: 10" ng-attr-transform="translate(0,{{$index * 50}})">
<g ng-repeat="pt in designer.points" ng-attr-transform="translate({{$index * 100}},0)">
<rect
y="0"
x="0"
height="50"
width="100"
style="fill:none;stroke:#000000;stroke-width:2;" ng-style="{fill: value['value_' + pt.xid] ? 'red' : 'green'}" />
<text
y="30"
x="10"><tspan>{{pt.xid}} @ {{value.timestamp | maMoment:'format':'l LTS'}}</tspan></text>
</g>
</g>
</svg>
