-
Notifications
You must be signed in to change notification settings - Fork 3
/
charts.html.tmpl
128 lines (120 loc) · 2.89 KB
/
charts.html.tmpl
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {"packages":["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable({{.Data}});
var options = {{.Options}};
var chart = new {{.Class}}(document.getElementById("gchart"));
chart.draw(data, options);
}
</script>
{{template "Style"}}
</head>
<body>
{{/* Index */}}
<div>
<h3>Index</h3>
<ol>
<li><a href="#plot">Plot</a></li>
{{if .Stream}}
<li><a href="#streams">Streams</a></li>
{{end}}
{{if .Packet}}
<li><a href="#packets">Packet Flows</a></li>
{{end}}
</ol>
</div>
{{/* Google Charts element, referenced from JS */}}
<h3 id="plot">Plot</h3>
<div style="font-style: italic">Note: in plot area, left click and drag to zoom, right click to reset</div>
<div id="gchart"></div>
{{/* Streams Table */}}
{{if .Stream}}
<h3 id="streams">Streams</h3>
<div>
<table>
<tr>
<th>ID</th>
<th>T<sub>0</sub> (Sec.)</th>
<th>Completion Time (Sec.)</th>
<th>Length (Bytes)</th>
<th>Goodput (Mbps)</th>
</tr>
{{range .Stream}}
<tr>
<td>{{.Flow}}</td>
<td>{{(index .Sent 0).T.Duration.Seconds}}</td>
<td>{{.FCT.Seconds}}</td>
<td>{{.Length.Bytes}}</td>
<td>{{.Goodput.Mbps}}</td>
</tr>
{{end}}
</table>
</div>
{{end}}
{{/* Packet Flows Table */}}
{{if .Packet}}
<h3 id="packets">Packet Flows</h3>
<div>
<table>
<tr>
<td>
<td>
<th colspan="1">RTT</th>
<th colspan="7">Up</th>
<th colspan="7">Down</th>
</tr>
<tr>
<th>ID</th>
<th>T<sub>0</sub></th>
<th>Mean</th>
<!-- Up -->
<th>OWD</th>
<th>Sent</th>
<th>Rcvd</th>
<th>Lost</th>
<th>Early</th>
<th>Late</th>
<th>Dup</th>
<!-- Down -->
<th>OWD</th>
<th>Sent</th>
<th>Rcvd</th>
<th>Lost</th>
<th>Early</th>
<th>Late</th>
<th>Dup</th>
</tr>
{{range .Packet}}
<tr>
<td>{{.Flow}}</td>
<td>{{(index .ClientSent 0).T.Duration.Seconds}} s</td>
<td>{{printf "%.3f ms" .RTTMean}}</td>
<!-- Up -->
<td>{{printf "%.3f ms" .Up.OWDMean}}</td>
<td>{{len .ClientSent}}</td>
<td>{{len .ServerRcvd}}</td>
<td>{{len .Up.Lost}} ({{printf "%.2f" .Up.LostPct}}%)</td>
<td>{{len .Up.Early}}</td>
<td>{{len .Up.Late}}</td>
<td>{{len .Up.Dup}}</td>
<!-- Down -->
<td>{{printf "%.3f ms" .Down.OWDMean}}</td>
<td>{{len .ServerSent}}</td>
<td>{{len .ClientRcvd}}</td>
<td>{{len .Down.Lost}} ({{printf "%.2f" .Down.LostPct}}%)</td>
<td>{{len .Down.Early}}</td>
<td>{{len .Down.Late}}</td>
<td>{{len .Down.Dup}}</td>
</tr>
{{end}}
</table>
</div>
{{end}}
</body>
</html>