sfTable

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!-- For debugging sort
<pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
-->
<div class="sf-table-container">
<table class="sub-filter-table table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th></th>
<th colspan="2">Transport</th>
<th colspan="2">Storage</th>
</tr>
</thead>
<tbody class="sub-filter-body">
<tr>
<th>#</th>
<th class="sort-header header-name" ng-click="reverse = !reverse; sort('name')">{{filter | capitalize}} Name</th>
<th class="sort-header header-contract_transport" ng-click="reverse = !reverse; sort('contract_transport')">Contracts</th>
<th class="sort-header header-volume_transport" ng-click="reverse = !reverse; sort('volume_transport')">Volume</th>
<th class="sort-header header-contract_storage" ng-click="reverse = !reverse; sort('contract_storage')">Contracts</th>
<th class="sort-header header-volume_storage" ng-click="reverse = !reverse; sort('volume_storage')">Volume</th>
</tr>
<tr ng-repeat="data in aggregate_data">
<td>{{$index}}</td>
<td>{{data.name}}</td>
<td>{{data.contract_transport}}</td>
<td>{{data.volume_transport}}</td>
<td>{{data.contract_storage}}</td>
<td>{{data.volume_storage}}</td>
</tr>
</tbody>
</table>
</div>
<br/>
<div class="chart-toggle-container">
<label class="chart-toggle-elem">Display:</label>
<!--<select ng-model="toggleCharts" class="form-control chart-toggle-elem" id="chart-toggle-elem">-->
<!--<option value="both">Transport and Storage</option>-->
<!--<option value="transport">Transport</option>-->
<!--<option value="storage">Storage</option>-->
<!--</select>-->
<select ng-model="toggleCharts" ng-init="toggleCharts='set1'" class="form-control chart-toggle-elem" id="chart-toggle-elem">
<option ng-repeat="val in toggleOptions" value="{{val.value}}">{{val.name}}</option>
</select>
</div>
<div class="chart-field-control">
<!--<input type="radio" ng-model="field" value="volume">By Volume<br/>-->
<!--<input type="radio" ng-model="field" value="contract">By # of Contracts<br/>-->
<p ng-repeat="val in radioValues[toggleCharts]">
<input type="radio" value="{{val.value}}" ng-model="$parent.field" >{{val.name}}
</p>
</div>
<!-- Chart Directives -->
<sf-Chart
data="aggregate_data"
type="transport"
field="{{field}}"
class="sf-chart"
display="both"
>
</sf-Chart>
<sf-Chart
data="aggregate_data"
type="storage"
field="{{field}}"
class="sf-chart"
display="both"
>
</sf-Chart>