Skip to content

Instantly share code, notes, and snippets.

@vietj

vietj/index.html

Last active November 7, 2022 14:26
Show Gist options
  • Save vietj/bd09a8b0e3b3901c87c9616e714a0c53 to your computer and use it in GitHub Desktop.
Save vietj/bd09a8b0e3b3901c87c9616e714a0c53 to your computer and use it in GitHub Desktop.
Download ZIP
TFB 202-11-01 Json
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perflab results</title>
<style>
body {
font-family: monospace;
font-size: 12pt;
}
em {
font-style: italic;
}
nav a {
color: blue;
}
nav a:visited {
color: blue;
}
div.table {
overflow-x: auto;
}
table {
border: 1px solid;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
word-wrap: break-word;
caption-side: bottom;
font-size: 10pt;
}
th {
border: 1px solid;
width: 100px;
}
td {
border: 1px solid;
text-align: right;
}
caption {
margin-top: 1em;
font-style: italic;
}
div#chart {
width: 1400px;
height: 1000px;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="application/javascript">
function round(num) {
return Math.round((num + Number.EPSILON) * 100) / 100
}
function average(values) {
let total = 0;
for (const value of values) {
total += value;
}
return round(total / values.length);
}
function standardDeviation(values, average) {
let total = 0;
for (const value of values) {
total += (value - average) * (value - average);
}
return round(Math.sqrt(total / (values.length - 1)));
}
function compileTemplate(hb, id) {
return hb.compile(document.querySelector(id).innerHTML);
}
</script>
</head>
<body>
<script id="title-template" type="text/x-handlebars">
<h1><em>{{benchmark}}</em> benchmark results</h1>
</script>
<script id="nav-template" type="text/x-handlebars">
<h2>Summary</h2>
<ul>
{{#each branches}}
<li><a href="#{{this}}">Results for branch <em>{{this}}</em></a></li>
{{/each}}
<li><a href="#chart">Chart</a></li>
</ul>
</script>
<script id="table-template" type="text/x-handlebars">
<h3>Results for branch <em>{{branch}}</em></h3>
<table>
<caption>{{branch}} - {{benchmark}}</caption>
<thead>
<tr>
<th>&nbsp;</th>
{{#each iterations}}
{{#if @first}}
{{#each values}}
<th>{{inc @index}}</th>
{{/each}}
{{/if}}
{{/each}}
<th>Avg</th>
<th>Stddev</th>
<th>Rel Stddev</th>
<th>Min</th>
<th>Max</th>
</tr>
</thead>
<tbody>
{{#each iterations}}
<tr>
<th>{{concurrency}}</th>
{{#each values}}
<td>{{this}}</td>
{{/each}}
<td>{{avg}}</td>
<td>{{stddev}}</td>
<td>{{relstddev}}%</td>
<td>{{min}}</td>
<td>{{max}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
<script id="chart-template" type="text/x-handlebars">
<h3><em>{{benchmark}}</em> benchmark results chart</h3>
</script>
<script id="results" type="application/json">
{
"benchmark" : "json",
"data" : [
{
"branch" : "master",
"iterations" : [
{
"concurrency" : 8,
"values" : [
115637.57,
118543.15,
119007.09,
118222.66,
112599.19
]
},
{
"concurrency" : 16,
"values" : [
195426.21,
193086.46,
193726.42,
193280.75,
191503.55
]
},
{
"concurrency" : 32,
"values" : [
290709.91,
297071.39,
287792.62,
289715.94,
292306.34
]
},
{
"concurrency" : 64,
"values" : [
382818.85,
390493.41,
376040.94,
377353.39,
386593.11
]
},
{
"concurrency" : 128,
"values" : [
415273.27,
420571.98,
419120.29,
419236.55,
413396.89
]
},
{
"concurrency" : 256,
"values" : [
445139.64,
451105.85,
448122.35,
446060.31,
448395.78
]
}
]
},
{
"branch" : "virtual-threads",
"iterations" : [
{
"concurrency" : 8,
"values" : [
70400.67,
69292.65,
71052.08,
71604.73,
69626.06
]
},
{
"concurrency" : 16,
"values" : [
117163.79,
116598.77,
117498.84,
117929.33,
117843.38
]
},
{
"concurrency" : 32,
"values" : [
191138.27,
193636.16,
202006.13,
200665.23,
191592.92
]
},
{
"concurrency" : 64,
"values" : [
296460.92,
298100.55,
293535.3,
296217.46,
294718.38
]
},
{
"concurrency" : 128,
"values" : [
330979.74,
333761.81,
329593.58,
330375.5,
325938.91
]
},
{
"concurrency" : 256,
"values" : [
366152.76,
384988.94,
365443.97,
396009.23,
359059.33
]
}
]
},
{
"branch" : "virtual-threads-event-loop",
"iterations" : [
{
"concurrency" : 8,
"values" : [
67863.24,
65411.44,
67076,
67269.45,
66304.23
]
},
{
"concurrency" : 16,
"values" : [
113854.37,
112253.53,
113785.26,
113986.46,
113358.69
]
},
{
"concurrency" : 32,
"values" : [
181103.31,
177551.97,
180092.32,
179482.5,
180236.99
]
},
{
"concurrency" : 64,
"values" : [
258715.15,
255753.83,
257492.96,
259025.8,
256328.27
]
},
{
"concurrency" : 128,
"values" : [
277830.02,
268669.62,
276000.17,
278447.86,
274592.77
]
},
{
"concurrency" : 256,
"values" : [
306298.79,
316909.68,
305636.99,
306899.15,
311768.72
]
}
]
}
]
}
</script>
<script id="results-sample" type="application/json">
{
"benchmark" : "plaintext",
"data" : [
{
"branch" : "oct22-4.1.4",
"iterations" : [
{
"concurrency" : 256,
"values" : [
156727760,
155759616,
157254816,
156559792,
159958480,
158659072,
158183968,
159137296,
165708144,
164706752
]
},
{
"concurrency" : 1024,
"values" : [
199564272,
197151808,
194545232,
193772416,
198594704,
198366976,
196662720,
195458960,
196324768,
192449888
]
},
{
"concurrency" : 4096,
"values" : [
193034144,
189667440,
186151984,
186435504,
192040944,
192837712,
188253760,
187313312,
189127824,
184370528
]
},
{
"concurrency" : 16384,
"values" : [
185129104,
183016688,
179138992,
180670160,
184818832,
183895152,
181635008,
181818768,
182377568,
177928880
]
}
]
},
{
"branch" : "oct22-4.3.3",
"iterations" : [
{
"concurrency" : 256,
"values" : [
160214704,
155017760,
160644512,
156656080,
161479200,
162079344,
157070352,
160220640,
157914496,
156130368
]
},
{
"concurrency" : 1024,
"values" : [
191760816,
193519840,
189691824,
190042272,
194549120,
189168112,
186736704,
189591728,
198427296,
189589936
]
},
{
"concurrency" : 4096,
"values" : [
184101344,
185671952,
182230672,
182944592,
186202864,
182178928,
180546960,
182449008,
190922912,
183281776
]
},
{
"concurrency" : 16384,
"values" : [
178642224,
178672128,
176392016,
176981712,
180903232,
176566112,
174267152,
176784800,
183117024,
176189008
]
}
]
},
{
"branch" : "oct22-4.3.4",
"iterations" : [
{
"concurrency" : 256,
"values" : [
157115008,
156171248,
160244336,
157100896,
158777696,
159395344,
162272144,
160066992,
160840400,
161439840
]
},
{
"concurrency" : 1024,
"values" : [
194645280,
185893600,
190015376,
194778352,
185906096,
189741680,
193831760,
200660512,
194202848,
192093808
]
},
{
"concurrency" : 4096,
"values" : [
185596816,
179253616,
182262128,
186692976,
179245056,
182426032,
185597136,
193070048,
186618320,
184398240
]
},
{
"concurrency" : 16384,
"values" : [
179799536,
173211018,
177589328,
180694416,
172679936,
175337776,
180338800,
183618800,
180874704,
179009472
]
}
]
}
]
}
</script>
<script type="application/javascript">
let resultsText = document.querySelector("#results").innerHTML;
if (resultsText.trim().length === 0) {
resultsText = document.querySelector("#results-sample").innerHTML;
}
const results = JSON.parse(resultsText);
const branches = results.data.map(d => d.branch);
for (const data of results.data) {
for (const iteration of data.iterations) {
iteration.avg = average(iteration.values);
iteration.stddev = standardDeviation(iteration.values, iteration.avg);
iteration.relstddev = round(100 * (iteration.stddev / iteration.avg));
iteration.min = Math.min(...iteration.values);
iteration.max = Math.max(...iteration.values);
}
}
Handlebars.registerHelper("inc", value => parseInt(value) + 1);
document.title = `${results.benchmark} benchmark results`
const titleTemplateFunc = compileTemplate(Handlebars, "#title-template");
const titleElem = document.createElement("div");
titleElem.innerHTML = titleTemplateFunc({benchmark: results.benchmark});
document.body.appendChild(titleElem);
const navTemplateFunc = compileTemplate(Handlebars, "#nav-template");
const navElem = document.createElement("nav");
navElem.innerHTML = navTemplateFunc({branches: branches});
document.body.appendChild(navElem);
const tableTemplateFunc = compileTemplate(Handlebars, "#table-template");
for (const data of results.data) {
const tableElem = document.createElement("div");
tableElem.id = data.branch;
tableElem.className = "table";
tableElem.innerHTML = tableTemplateFunc({benchmark: results.benchmark, ...data});
document.body.appendChild(tableElem);
}
const chartTemplateFunc = compileTemplate(Handlebars, "#chart-template");
const chartElem = document.createElement("div");
chartElem.innerHTML = chartTemplateFunc({benchmark: results.benchmark});
const charTarget = document.createElement("div");
charTarget.id = "chart";
chartElem.appendChild(charTarget);
document.body.appendChild(chartElem);
google.charts.load("current", {"packages": ["corechart"]});
google.charts.setOnLoadCallback(function () {
const data = new google.visualization.DataTable();
data.addColumn("string", "Concurrency");
branches.forEach(b => {
data.addColumn("number", b);
for (let i = 0; i < results.data[0].iterations[0].values.length; i++) {
data.addColumn({id: `value${i.toString()}`, type: "number", role: "interval"});
}
});
for (let i = 0; i < results.data[0].iterations.length; i++) {
const row = [];
for (const data of results.data) {
const iteration = data.iterations[i];
if (row.length === 0) {
row.push(iteration.concurrency.toString());
}
row.push(iteration.avg);
const sorted = new Array(...iteration.values).sort();
for (let i = 0; i < sorted.length; i++) {
row.push(sorted[i]);
}
}
data.addRow(row);
}
const options = {
title: `Throughput in '${results.benchmark}' benchmark`,
vAxis: {
viewWindowMode: "explicit",
viewWindow: {min: 0},
title: "Requests/sec"
},
hAxis: {
title: "Concurrency"
},
intervals: {style: "bars", color: "#333333"},
fontName: "monospace"
};
const chart = new google.visualization.ColumnChart(document.getElementById("chart"));
chart.draw(data, options);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment