Merge pull request #1990 from s7tya/log-scale-dashboard

Add an option to switch between linear scale and log scale on the dashboard page.

site/frontend/src/pages/dashboard.ts

@@ -3,6 +3,22 @@ import {DASHBOARD_DATA_URL} from "../urls";
 
 import {getJson} from "../utils/requests";
 
+type ScaleKind = "linear" | "log";
+let scale: ScaleKind = "linear";
+
+const buttons = Array.from(
+  document.querySelectorAll<HTMLInputElement>("#scale-select-form input")
+);
+
+buttons.map((button) => {
+  button.addEventListener("change", () => {
+    if (button.checked) {
+      scale = button.value as ScaleKind;
+      make_data();
+    }
+  });
+});
+
 interface DashboardCompileBenchmarkCases {
   clean_averages: [number];
   base_incr_averages: [number];
@@ -44,7 +60,8 @@ function render(
     },
     yAxis: {
       title: {text: "Seconds"},
-      min: 0,
+      min: scale === "linear" ? 0 : undefined,
+      type: scale === "log" ? "logarithmic" : undefined,
     },
     xAxis: {
       categories: versions,
@@ -100,7 +117,8 @@ function renderRuntime(element: string, data: [number], versions: [string]) {
     },
     yAxis: {
       title: {text: "Miliseconds"},
-      min: 0,
+      min: scale === "linear" ? 0 : undefined,
+      type: scale === "log" ? "logarithmic" : undefined,
     },
     xAxis: {
       categories: versions.slice(nullCount),
@@ -126,8 +144,12 @@ function populate_data(response: DashboardResponse) {
   renderRuntime("runtime-average-times", data.runtime, data.versions);
 }
 
+let response: DashboardResponse | null = null;
 async function make_data() {
-  const response = await getJson<DashboardResponse>(DASHBOARD_DATA_URL);
+  if (!response) {
+    response = await getJson<DashboardResponse>(DASHBOARD_DATA_URL);
+  }
+
   populate_data(response);
 }
 

site/frontend/templates/pages/dashboard.html

@@ -24,6 +24,17 @@
     compiled by a given version of the Rust compiler.
 </details>
 
+<form id="scale-select-form">
+    <label>
+        <input type="radio" name="scale-select" value="linear" checked />
+        Linear-scale
+    </label>
+    <label>
+        <input type="radio" name="scale-select" value="log" />
+        Log-scale
+    </label>
+</form>
+
 <div class="graphs">
     <div id="check-average-times"></div>
     <div id="debug-average-times"></div>