@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>