Skip to content
This repository was archived by the owner on Feb 22, 2018. It is now read-only.

Commit 9802966

Browse files
jeffbcrossjbdeboer
jeffbcross
authored and
jbdeboer
committed
feat(benchmark): improve layout of data by moving averages to dedicated row
1 parent e4773fa commit 9802966

File tree

2 files changed

+74
-68
lines changed

2 files changed

+74
-68
lines changed

‎benchmark/web/bp.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ bp.Document.addLinks = function() {
276276
};
277277

278278
bp.Document.addInfo = function() {
279-
bp.Document.infoDiv = bp.Document.container().querySelector('tbody.info');
279+
bp.Document.infoDiv = bp.Document.container().querySelector('div.info');
280280
if (bp.Document.infoDiv) {
281281
bp.Document.infoTemplate = _.template(bp.Document.container().querySelector('#infoTemplate').innerHTML);
282282
}

‎benchmark/web/tree.html

Lines changed: 73 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@
99
<link rel="stylesheet" href="bootstrap.min.css">
1010
<style>
1111
.bpLink { background: lightblue; padding: 1em; margin-bottom: 1.5em; }
12-
td.average { font-weight: bold; }
13-
.sampleContainer {max-height:250px; overflow-y: auto; }
14-
.testTimeCol { display: inline-block; width: 24%; }
12+
.row.average { font-weight: bold; background: #eee; border-bottom: 1px solid #CCC; padding: 12px 0; margin-bottom: 12px; }
13+
.row.headings { font-size: 18px; font-weight: bold; }
14+
.average .title { font-size: 28px; }
15+
.scrollable { max-height:250px !important; overflow-y: auto; }
1516
</style>
1617
</head>
1718

@@ -41,76 +42,81 @@
4142
</div>
4243
<hr>
4344

44-
<table class="table table-striped results-table">
45-
<thead>
46-
<tr>
47-
<th>step</th>
48-
<th>average</th>
49-
<th>
50-
<div class="testTimeCol">
51-
test time (ms)
52-
</div>
53-
<div class="testTimeCol" style="margin-left:-8px">
54-
gc time (ms)
55-
</div>
56-
<div class="testTimeCol">
57-
garbage (KB)
58-
</div>
59-
<div class="testTimeCol" style="margin-left:-8px">
60-
retained memory (KB)
61-
</div>
62-
</th>
63-
</tr>
64-
</thead>
65-
<tbody class="info" style="font-family: monospace"></tbody>
66-
</table>
45+
<div class="table table-striped results-table">
46+
<div class="thead">
47+
<div class="row headings">
48+
<div class="th col-md-2 col-md-offset-2">
49+
test time (ms)
50+
</div>
51+
<div class="th col-md-2">
52+
gc time (ms)
53+
</div>
54+
<div class="th col-md-2">
55+
garbage (KB)
56+
</div>
57+
<div class="th col-md-2">
58+
retained memory (KB)
59+
</div>
60+
</div>
61+
</div>
62+
<div class="tbody info"></div>
63+
</div>
64+
6765
<script type="template" id="infoTemplate">
68-
<tr class="sampleContainer">
69-
<td><%= name %></td>
70-
<td class="average">
71-
test:<%= testTime.avg.mean.toFixed(2) %>ms
72-
<br>
73-
deviation: <%= testTime.avg.stdDev.toFixed(2) %>
74-
<br>
75-
coefficient of variation: <%= Math.round(testTime.avg.coefficientOfVariation * 100) %>%
76-
<br>
77-
gc:<%= gcTime.avg.mean.toFixed(2) %>ms
66+
<div class="row average">
67+
<div class="td col-md-2 title"><%= name %></div>
68+
<div class="td col-md-2">
69+
mean: <%= testTime.avg.mean.toFixed(2) %>ms
70+
&plusmn; <%= Math.round(testTime.avg.coefficientOfVariation * 100) %>%
7871
<br>
79-
combined: <%= (testTime.avg.mean + gcTime.avg.mean).toFixed(2) %>ms
72+
(stddev <%= testTime.avg.stdDev.toFixed(2) %>)
73+
</div>
74+
<div class="td col-md-2">
75+
mean: <%= gcTime.avg.mean.toFixed(2) %>ms
8076
<br>
81-
garbage: <%= (garbageCount.avg.mean / 1e3).toFixed(2) %>KB
82-
<br>
83-
retained: <%= (retainedCount.avg.mean / 1e3).toFixed(2) %>KB
84-
</td>
85-
<td>
77+
(combined: <%= (testTime.avg.mean + gcTime.avg.mean).toFixed(2) %>ms)
78+
</div>
79+
<div class="td col-md-2">
80+
mean: <%= (garbageCount.avg.mean / 1e3).toFixed(2) %>KB
81+
</div>
82+
<div class="td col-md-2">
83+
mean: <%= (retainedCount.avg.mean / 1e3).toFixed(2) %>KB
84+
</div>
85+
</div>
86+
<div class="row scrollable">
87+
<div class="td col-md-2 col-md-offset-2">
88+
<div class="sampleContainer">
89+
<% _.each(testTime.history, function(time) { %>
90+
<%= time.toFixed(2) %>
91+
<br>
92+
<% }); %>
93+
</div>
94+
</div>
95+
<div class="td col-md-2">
96+
<div class="sampleContainer">
97+
<% _.each(gcTime.history, function(time) { %>
98+
<%= time.toFixed(2) %>
99+
<br>
100+
<% }); %>
101+
</div>
102+
</div>
103+
<div class="td col-md-2">
86104
<div class="sampleContainer">
87-
<div class="testTimeCol">
88-
<% _.each(testTime.history, function(time) { %>
89-
<%= time.toFixed(2) %>
90-
<br>
91-
<% }); %>
92-
</div>
93-
<div class="testTimeCol">
94-
<% _.each(gcTime.history, function(time) { %>
95-
<%= time.toFixed(2) %>
96-
<br>
97-
<% }); %>
98-
</div>
99-
<div class="testTimeCol">
100105
<% _.each(garbageCount.history, function(count) { %>
101-
<%= (count / 1e3).toFixed(2) %>
102-
<br>
103-
<% }); %>
104-
</div>
105-
<div class="testTimeCol">
106-
<% _.each(retainedCount.history, function(count) { %>
107-
<%= (count / 1e3).toFixed(2) %>
108-
<br>
109-
<% }); %>
110-
</div>
106+
<%= (count / 1e3).toFixed(2) %>
107+
<br>
108+
<% }); %>
109+
</div>
110+
</div>
111+
<div class="td col-md-2">
112+
<div class="sampleContainer">
113+
<% _.each(retainedCount.history, function(count) { %>
114+
<%= (count / 1e3).toFixed(2) %>
115+
<br>
116+
<% }); %>
111117
</div>
112-
</td>
113-
</tr>
118+
</div>
119+
</div>
114120
</script>
115121
</div>
116122
</div>

0 commit comments

Comments
 (0)