diff options
| -rw-r--r-- | website/app.ts | 120 | ||||
| -rw-r--r-- | website/benchmarks.html | 24 | ||||
| -rw-r--r-- | website/style.css | 4 |
3 files changed, 136 insertions, 12 deletions
diff --git a/website/app.ts b/website/app.ts index 326e02f63..c22c0d2c2 100644 --- a/website/app.ts +++ b/website/app.ts @@ -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"); } @@ -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"); } @@ -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 @@ -144,7 +192,8 @@ function generate( onclick, yLabel = "", yTickFormat = null, - zoomEnabled = true + zoomEnabled = true, + onrendered = () => {} ) { const yAxis = { padding: { bottom: 0 }, @@ -172,6 +221,7 @@ function generate( // @ts-ignore c3.generate({ bindto: id, + onrendered, data: { columns, onclick @@ -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); @@ -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); @@ -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"); @@ -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; } diff --git a/website/benchmarks.html b/website/benchmarks.html index 68e1fa57d..a8d480780 100644 --- a/website/benchmarks.html +++ b/website/benchmarks.html @@ -102,6 +102,11 @@ <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> @@ -151,6 +156,13 @@ <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> @@ -234,17 +246,11 @@ <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> @@ -257,7 +263,7 @@ <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> diff --git a/website/style.css b/website/style.css index 5f377663b..ac0c8018a 100644 --- a/website/style.css +++ b/website/style.css @@ -158,3 +158,7 @@ code { border-top-color: #000; animation: spinner .6s linear infinite; } + +.hidden { + display: none; +} |