0๐
โ
I finnaly did it using a table. The lights are updated from my controller every second. Each light has a colors array containing number โ each number has its color
<table class="ui celled table" ng-hide="loadingLights">
<tr ng-repeat="l in lights track by $index">
<td style="width: 10%;">{{l.name}}</td>
<td style="width: 90%;">
<div ng-repeat-start="c in l.colors track by $index" class="status-box" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div>
<div ng-repeat-end class="empty-status-box"></div>
</td>
</tr>
</table>
Each second is represented by a small div displayed as table-cell
.status-box {
width: 1rem;
height: 2rem;
margin-right: 0.5rem;
display: table-cell;
}
It is not as beautiful as a graph but it does what I wanted to do
Source:stackexchange.com