Added normalized benchmark graphs (#2919)

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;
 }

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>

website/style.css

@@ -158,3 +158,7 @@ code {
   border-top-color: #000;
   animation: spinner .6s linear infinite;
 }
+
+.hidden {
+  display: none;
+}