Skip to content

Commit

Permalink
Added normalized benchmark graphs (denoland#2919)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucacasonato @ry
lucacasonato authored and ry committed Sep 11, 2019
1 parent a197623 commit f38bd45
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 12 deletions.
120 changes: 117 additions & 3 deletions website/app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,37 @@ export function createColumns(data, benchmarkName) {
]);
}

export function createNormalizedColumns(
data,
benchmarkName,
baselineBenchmark,
baselineVariety
) {
const varieties = getBenchmarkVarieties(data, benchmarkName);
return varieties.map(variety => [
variety,
...data.map(d => {
if (d[baselineBenchmark] != null) {
if (d[baselineBenchmark][baselineVariety] != null) {
const baseline = d[baselineBenchmark][baselineVariety];
if (d[benchmarkName] != null) {
if (d[benchmarkName][variety] != null && baseline != 0) {
const v = d[benchmarkName][variety];
if (benchmarkName == "benchmark") {
const meanValue = v ? v.mean : 0;
return meanValue || null;
} else {
return v / baseline;
}
}
}
}
}
return null;
})
]);
}

export function createExecTimeColumns(data) {
return createColumns(data, "benchmark");
}
Expand All @@ -46,10 +77,23 @@ export function createProxyColumns(data) {
return createColumns(data, "req_per_sec_proxy");
}

export function createNormalizedProxyColumns(data) {
return createNormalizedColumns(
data,
"req_per_sec_proxy",
"req_per_sec",
"hyper"
);
}

export function createReqPerSecColumns(data) {
return createColumns(data, "req_per_sec");
}

export function createNormalizedReqPerSecColumns(data) {
return createNormalizedColumns(data, "req_per_sec", "req_per_sec", "hyper");
}

export function createMaxLatencyColumns(data) {
return createColumns(data, "max_latency");
}
Expand Down Expand Up @@ -128,6 +172,10 @@ export function formatReqSec(reqPerSec) {
return reqPerSec / 1000;
}

export function formatPercentage(decimal) {
return (decimal * 100).toFixed(2);
}

/**
* @param {string} id The id of dom element
* @param {string[]} categories categories for x-axis values
Expand All @@ -144,7 +192,8 @@ function generate(
onclick,
yLabel = "",
yTickFormat = null,
zoomEnabled = true
zoomEnabled = true,
onrendered = () => {}
) {
const yAxis = {
padding: { bottom: 0 },
Expand Down Expand Up @@ -172,6 +221,7 @@ function generate(
// @ts-ignore
c3.generate({
bindto: id,
onrendered,
data: {
columns,
onclick
Expand Down Expand Up @@ -249,7 +299,9 @@ export async function drawChartsFromBenchmarkData(dataUrl) {
const execTimeColumns = createExecTimeColumns(data);
const throughputColumns = createThroughputColumns(data);
const reqPerSecColumns = createReqPerSecColumns(data);
const normalizedReqPerSecColumns = createNormalizedReqPerSecColumns(data);
const proxyColumns = createProxyColumns(data);
const normalizedProxyColumns = createNormalizedProxyColumns(data);
const maxLatencyColumns = createMaxLatencyColumns(data);
const maxMemoryColumns = createMaxMemoryColumns(data);
const binarySizeColumns = createBinarySizeColumns(data);
Expand All @@ -266,21 +318,43 @@ export async function drawChartsFromBenchmarkData(dataUrl) {
);
};

function gen(id, columns, yLabel = "", yTickFormat = null) {
function gen(
id,
columns,
yLabel = "",
yTickFormat = null,
onrendered = () => {}
) {
generate(
id,
sha1ShortList,
columns,
viewCommitOnClick(sha1List),
yLabel,
yTickFormat
yTickFormat,
true,
onrendered
);
}

gen("#exec-time-chart", execTimeColumns, "seconds", logScale);
gen("#throughput-chart", throughputColumns, "seconds", logScale);
gen("#req-per-sec-chart", reqPerSecColumns, "1000 req/sec", formatReqSec);
gen(
"#normalized-req-per-sec-chart",
normalizedReqPerSecColumns,
"% of hyper througput",
formatPercentage,
hideOnRender("normalized-req-per-sec-chart")
);
gen("#proxy-req-per-sec-chart", proxyColumns, "req/sec");
gen(
"#normalized-proxy-req-per-sec-chart",
normalizedProxyColumns,
"% of hyper througput",
formatPercentage,
hideOnRender("normalized-proxy-req-per-sec-chart")
);
gen("#max-latency-chart", maxLatencyColumns, "milliseconds", logScale);
gen("#max-memory-chart", maxMemoryColumns, "megabytes", formatMB);
gen("#binary-size-chart", binarySizeColumns, "megabytes", formatMB);
Expand All @@ -289,6 +363,34 @@ export async function drawChartsFromBenchmarkData(dataUrl) {
gen("#bundle-size-chart", bundleSizeColumns, "kilobytes", formatKB);
}

function hideOnRender(elementID) {
return () => {
const chart = window["document"].getElementById(elementID);
if (!chart.getAttribute("data-inital-hide-done")) {
chart.setAttribute("data-inital-hide-done", "true");
chart.classList.add("hidden");
}
};
}

function registerNormalizedSwitcher(checkboxID, chartID, normalizedChartID) {
const checkbox = window["document"].getElementById(checkboxID);
const regularChart = window["document"].getElementById(chartID);
const normalizedChart = window["document"].getElementById(normalizedChartID);

checkbox.addEventListener("change", event => {
// If checked is true the normalized variant should be shown
// @ts-ignore
if (checkbox.checked) {
regularChart.classList.add("hidden");
normalizedChart.classList.remove("hidden");
} else {
normalizedChart.classList.add("hidden");
regularChart.classList.remove("hidden");
}
});
}

export function main(): void {
window["chartWidth"] = 800;
const overlay = window["document"].getElementById("spinner-overlay");
Expand All @@ -312,5 +414,17 @@ export function main(): void {
}
updateCharts();

registerNormalizedSwitcher(
"req-per-sec-chart-show-normalized",
"req-per-sec-chart",
"normalized-req-per-sec-chart"
);

registerNormalizedSwitcher(
"proxy-req-per-sec-chart-show-normalized",
"proxy-req-per-sec-chart",
"normalized-proxy-req-per-sec-chart"
);

window["onhashchange"] = updateCharts;
}
24 changes: 15 additions & 9 deletions website/benchmarks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,11 @@ <h3 id="req-per-sec">Req/Sec <a href="#req-per-sec">#</a></h3>

<div id="req-per-sec-chart"></div>

<div id="normalized-req-per-sec-chart"></div>

<input type="checkbox" id="req-per-sec-chart-show-normalized" />
<label for="req-per-sec-chart-show-normalized">Show Normalized</label>

<h3 id="proxy-req-per-sec">
Proxy Req/Sec <a href="#proxy-eq-per-sec">#</a>
</h3>
Expand Down Expand Up @@ -151,6 +156,13 @@ <h3 id="proxy-req-per-sec">

<div id="proxy-req-per-sec-chart"></div>

<div id="normalized-proxy-req-per-sec-chart"></div>

<input type="checkbox" id="proxy-req-per-sec-chart-show-normalized" />
<label for="proxy-req-per-sec-chart-show-normalized"
>Show Normalized</label
>

<h3 id="max-latency">Max Latency <a href="#max-latency">#</a></h3>

<p>
Expand Down Expand Up @@ -234,17 +246,11 @@ <h3 id="bundles">Bundle size <a href="#syscalls">#</a></h3>

<ul>
<li>
<a
href="https://deno.land/std/http/file_server.ts"
>file_server</a
>
<a href="https://deno.land/std/http/file_server.ts">file_server</a>
</li>

<li>
<a
href="https://deno.land/std/examples/gist.ts"
>gist</a
>
<a href="https://deno.land/std/examples/gist.ts">gist</a>
</li>
</ul>

Expand All @@ -257,7 +263,7 @@ <h3 id="bundles">Bundle size <a href="#syscalls">#</a></h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script src="app.bundle.js"></script>
<script>
requirejs(['app'], (app) => app.main());
requirejs(["app"], app => app.main());
</script>
</body>
</html>
4 changes: 4 additions & 0 deletions website/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,3 +158,7 @@ code {
border-top-color: #000;
animation: spinner .6s linear infinite;
}

.hidden {
display: none;
}

0 comments on commit f38bd45

Please sign in to comment.