feat: improve htmlReport UX (#60)

* feat(html): improve UX * feat(html): WIP/clean * examples: update
RafaelGSS · Jan 27, 2025 · 79ce533 · 79ce533
1 parent 3eedd06
commit 79ce533
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 22 deletions.
diff --git a/examples/html-report/result.html b/examples/html-report/result.html
@@ -7,12 +7,16 @@
   <style>
     body {
       display: flex;
+      flex-direction: column;
       justify-content: center;
       align-items: center;
       height: 100vh;
       margin: 0;
       background: #f4f4f4;
-      font-family: Arial, sans-serif;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+    .env {
+      width: 400px;
     }
 
     .container {
@@ -25,7 +29,7 @@
 
     .label {
       position: absolute;
-      left: -120px; /* Place labels outside the box */
+      left: -130px; /* Place labels outside the box */
       width: 100px;
       text-align: right;
       font-size: 14px;
@@ -38,13 +42,31 @@
       position: absolute;
     }
 
+    .number {
+      font-family: 'Times New Roman', Times, serif;
+    }
+
+    .made-with {
+      position: fixed;
+      bottom: 10px;
+      right: 10px;
+      padding: 10px;
+      font-size: 12px;
+    }
+    .made-with a {
+      color: #2C682C;
+    }
+    .made-with a:hover {
+      text-decoration: none;
+    }
+
 
       #label-single-with-matcher {
         top: 20px;
       }
 
       #circle-single-with-matcher {
-        background-color: green;
+        background-color: blue;
         top: 20px;
       }
 
@@ -53,13 +75,36 @@
       }
 
       #circle-Multiple-replaces {
-        background-color: blue;
+        background-color: orange;
         top: 100px;
       }
 
+
+    /* Dark theme */
+    @media (prefers-color-scheme: dark) {
+      body {
+        background: #333;
+        color: #fff;
+      }
+
+      .container {
+        border-color: #fff;
+        background: #444;
+      }
+
+      .made-with a {
+        color: #84BA64;
+      }
+    }
   </style>
 </head>
 <body>
+  <div class="env">
+    <p>Node.js version: <span class="number">v20.18.1</span></p>
+	<p>Platform: <span class="number">darwin arm64</span></p>
+	<p>CPU Cores: <span class="number">8</span> vCPUs | <span class="number">16.0GB Mem</span></p>
+  </div>  
+
   <div class="container">
 
       <div id="circle-single-with-matcher" class="circle"></div>
@@ -68,18 +113,24 @@
 
 
 
-      <div id="label-single-with-matcher" class="label">single-with-matcher
-
-      (743,310.95 ops/sec)</div>
+      <div id="label-single-with-matcher" class="label">
+	  single-with-matcher(<span class="number">660,788.4</span> ops/sec)
+	  </div>
 
-      <div id="label-Multiple-replaces" class="label">Multiple-replaces
-
-      (603,134.34 ops/sec)</div>
+      <div id="label-Multiple-replaces" class="label">
+	  Multiple-replaces(<span class="number">578,527</span> ops/sec)
+	  </div>
 
   </div>
 
+  <div class="made-with">
+    <p>Benchmark done with <a href="https://github.com/RafaelGSS/bench-node">bench-node</a></p>
+  </div>
+
+  </div>
+
   <script>
-    const durations = [{"name":"single-with-matcher","duration":10,"opsSecFormatted":"743,310.95"},{"name":"Multiple-replaces","duration":12.324135789335076,"opsSecFormatted":"603,134.34"}];
+    const durations = [{"name":"single-with-matcher","duration":10,"opsSecFormatted":"660,788.4"},{"name":"Multiple-replaces","duration":11.421911109342416,"opsSecFormatted":"578,527"}];
 
     const animateCircles = () => {
       const boxWidth = 400; // Width of the container box
@@ -103,7 +154,9 @@
           element.style.transform = `translateX(${circle.position}px)`;
         });
 
-        requestAnimationFrame(update);
+        setTimeout(() => {
+          requestAnimationFrame(update);
+        }, 1000 / 120); // "60 FPS"
       };
 
       update();

diff --git a/lib/reporter/html.js b/lib/reporter/html.js
@@ -1,3 +1,4 @@
+const { platform, arch, cpus, totalmem } = require("node:os");
 const fs = require("node:fs");
 const path = require("node:path");
 
@@ -13,8 +14,8 @@ const opsToDuration = (maxOps, ops, scalingFactor = 10) => {
 
 const generateHTML = (template, durations) => {
 	let css = "";
-	let circleDiv = "";
 	let labelDiv = "";
+	let circleDiv = "";
 	let position = 20;
 	const colors = [
 		"blue",
@@ -40,9 +41,9 @@ const generateHTML = (template, durations) => {
       }
     `;
 		circleDiv += `
-      <div id="label-${d.name}" class="label">${d.name}
-
-      (${d.opsSecFormatted} ops/sec)</div>
+      <div id="label-${d.name}" class="label">
+	  ${d.name}(<span class="number">${d.opsSecFormatted}</span> ops/sec)
+	  </div>
     `;
 		labelDiv += `
       <div id="circle-${d.name}" class="circle"></div>
@@ -51,12 +52,17 @@ const generateHTML = (template, durations) => {
 		position += 80;
 	}
 
+	const environmentDiv = `<p>Node.js version: <span class="number">${process.version}</span></p>
+	<p>Platform: <span class="number">${platform()} ${arch()}</span></p>
+	<p>CPU Cores: <span class="number">${cpus().length}</span> vCPUs | <span class="number">${(totalmem() / 1024 ** 3).toFixed(1)}GB Mem</span></p>`;
+
 	return template
-		.replaceAll("{{DURATIONS}}", JSON.stringify(durations))
+		.replaceAll("{{CONTAINER_HEIGHT}}", `${durations.length * 100}px;`)
 		.replaceAll("{{CSS}}", css)
+		.replaceAll("{{ENVIRONMENT_DIV}}", environmentDiv)
 		.replaceAll("{{LABEL_DIV}}", labelDiv)
 		.replaceAll("{{CIRCLE_DIV}}", circleDiv)
-		.replaceAll("{{CONTAINER_HEIGHT}}", `${durations.length * 100}px;`);
+		.replaceAll("{{DURATIONS}}", JSON.stringify(durations));
 };
 
 const templatePath = path.join(__dirname, "template.html");
@@ -73,7 +79,7 @@ function htmlReport(results) {
 
 	const htmlContent = generateHTML(template, durations);
 	fs.writeFileSync("result.html", htmlContent, "utf8");
-	process.stdout.write("HTML file has been generated: result.html");
+	process.stdout.write("HTML file has been generated: result.html\n");
 }
 
 module.exports = {

diff --git a/lib/reporter/template.html b/lib/reporter/template.html
@@ -7,12 +7,16 @@
   <style>
     body {
       display: flex;
+      flex-direction: column;
       justify-content: center;
       align-items: center;
       height: 100vh;
       margin: 0;
       background: #f4f4f4;
-      font-family: Arial, sans-serif;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+    .env {
+      width: 400px;
     }
 
     .container {
@@ -25,7 +29,7 @@
 
     .label {
       position: absolute;
-      left: -120px; /* Place labels outside the box */
+      left: -130px; /* Place labels outside the box */
       width: 100px;
       text-align: right;
       font-size: 14px;
@@ -38,16 +42,61 @@
       position: absolute;
     }
 
+    .number {
+      font-family: 'Times New Roman', Times, serif;
+    }
+
+    .made-with {
+      position: fixed;
+      bottom: 10px;
+      right: 10px;
+      padding: 10px;
+      font-size: 12px;
+    }
+    .made-with a {
+      color: #2C682C;
+    }
+    .made-with a:hover {
+      text-decoration: none;
+    }
+
     {{CSS}}
+
+    /* Dark theme */
+    @media (prefers-color-scheme: dark) {
+      body {
+        background: #333;
+        color: #fff;
+      }
+
+      .container {
+        border-color: #fff;
+        background: #444;
+      }
+
+      .made-with a {
+        color: #84BA64;
+      }
+    }
   </style>
 </head>
 <body>
+  <div class="env">
+    {{ENVIRONMENT_DIV}}
+  </div>  
+
   <div class="container">
     {{LABEL_DIV}}
 
     {{CIRCLE_DIV}}
   </div>
 
+  <div class="made-with">
+    <p>Benchmark done with <a href="https://github.com/RafaelGSS/bench-node">bench-node</a></p>
+  </div>
+
+  </div>
+
   <script>
     const durations = {{DURATIONS}};
 
@@ -73,7 +122,9 @@
           element.style.transform = `translateX(${circle.position}px)`;
         });
 
-        requestAnimationFrame(update);
+        setTimeout(() => {
+          requestAnimationFrame(update);
+        }, 1000 / 120); // "60 FPS"
       };
 
       update();