From 117e9c55b8593ee441e3b4d31cb379ae293c1bb7 Mon Sep 17 00:00:00 2001
From: Martin Kuba <martin@martinkuba.com>
Date: Tue, 3 Oct 2023 06:25:07 -0700
Subject: [PATCH] Update benchmarks page theme (#4176)

---
 benchmarks/index.html | 132 ++++++++++++++++++++++++++++++------------
 1 file changed, 96 insertions(+), 36 deletions(-)
diff --git a/benchmarks/index.html b/benchmarks/index.html
index 6c887805e87..0c10a17aa81 100644
--- a/benchmarks/index.html
+++ b/benchmarks/index.html
@@ -5,35 +5,43 @@
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes" />
     <style>
       html {
-        font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+        font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         background-color: #fff;
         font-size: 16px;
       }
+
       body {
+        margin: 0;
         color: #4a4a4a;
-        margin: 8px;
         font-size: 1em;
         font-weight: 400;
       }
+
       header {
-        margin-bottom: 8px;
+        width: 100%;
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
+        background-color: rgb(79, 98, 173);
       }
+
       main {
+        margin: 8px;
         width: 100%;
         display: flex;
         flex-direction: column;
       }
+
       a {
         color: #3273dc;
         cursor: pointer;
         text-decoration: none;
       }
+
       a:hover {
         color: #000;
       }
+
       button {
         color: #fff;
         background-color: #3298dc;
@@ -41,63 +49,118 @@
         cursor: pointer;
         text-align: center;
       }
+
       button:hover {
         background-color: #2793da;
         flex: none;
       }
+
       .spacer {
         flex: auto;
       }
+
       .small {
         font-size: 0.75rem;
       }
+
       footer {
         margin-top: 16px;
         display: flex;
         align-items: center;
       }
+
       .header-label {
         margin-right: 4px;
       }
+
       .benchmark-set {
         margin: 8px 0;
         width: 100%;
         display: flex;
         flex-direction: column;
       }
+
       .benchmark-title {
         font-size: 3rem;
         font-weight: 600;
         word-break: break-word;
         text-align: center;
       }
+
       .benchmark-graphs {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         justify-content: space-around;
         align-items: center;
         flex-wrap: wrap;
         width: 100%;
       }
+
       .benchmark-chart {
         max-width: 1000px;
       }
+
+      header nav {
+        width: 100%;
+        max-width: 1140px;
+        margin-left: auto;
+        margin-right: auto;
+        line-height: 24px;
+        min-height: 64px;
+        display: flex;
+        flex: 2;
+        align-items: center;
+      }
+
+      .logo svg {
+        height: 48px;
+        margin-left: 30px;
+      }
+
+      .header-item {
+        flex: 1;
+      }
+
+      div.container {
+        max-width: 1012px;
+        margin-right: auto;
+        margin-left: auto;
+      }
     </style>
-    <title>Benchmarks</title>
+    <title>JavaScript SDK Benchmarks</title>
   </head>
-
   <body>
     <header id="header">
-      <div class="header-item">
-        <strong class="header-label">Last Update:</strong>
+      <nav>
+        <div class="header-item logo">
+          <a href="https://opentelemetry.io">
+            <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="-15.54 -18.54 1016.08 381.08">
+              <title id="opentelemetry-logo-title">The OpenTelemetry Logo</title>
+              <style>
+                svg {
+                  enable-background: new 0 0 985.5 345.7
+                }
+              </style>
+              <path fill="#fff"
+                d="M185.6 188.8c-14.6 14.6-14.6 38.3.0 52.9s38.3 14.6 52.9.0c14.6-14.6 14.6-38.3.0-52.9-14.6-14.6-38.3-14.6-52.9.0zm39.6 39.6c-7.2 7.2-19 7.2-26.2.0s-7.2-19 0-26.2 19-7.2 26.2.0 7.2 19 0 26.2zm35.4-32h15.7v7.9c3.8-5.2 9.1-9 17.2-9 12.9.0 25.2 10.1 25.2 28.6v.2c0 18.5-12.1 28.6-25.2 28.6-8.4.0-13.5-3.8-17.2-8.3v23.7h-15.7v-71.7zm42.4 27.8v-.2c0-9.2-6.2-15.3-13.5-15.3s-13.4 6.1-13.4 15.3v.2c0 9.2 6.1 15.3 13.4 15.3 7.3-.1 13.5-6 13.5-15.3zm26.8.1v-.2c0-15.7 11.2-28.7 27.2-28.7 18.4.0 26.8 14.3 26.8 29.9.0 1.2-.1 2.7-.2 4.1h-38.3c1.5 7.1 6.5 10.8 13.5 10.8 5.2.0 9-1.6 13.4-5.6l8.9 7.9c-5.1 6.4-12.5 10.3-22.5 10.3-16.6-.1-28.8-11.7-28.8-28.5zm38.8-4.7c-.9-7-5-11.7-11.6-11.7-6.5.0-10.7 4.6-11.9 11.7h23.5zm26.4-23.2h16v8c3.7-4.7 8.4-9 16.5-9 12.1.0 19.1 8 19.1 20.9v36.4h-16v-31.4c0-7.6-3.6-11.4-9.7-11.4s-10 3.9-10 11.4v31.4h-16v-56.3zM237.9 4.9 215 27.8c-4.5 4.5-4.5 11.8.0 16.3l89.5 89.5c4.5 4.5 11.8 4.5 16.3.0l22.9-22.9c4.5-4.5 4.5-11.8.0-16.3L254.2 4.9c-4.5-4.5-11.8-4.5-16.3.0zM77.4 297.6c4.1-4.1 4.1-10.7.0-14.8l-11.7-11.7c-4.1-4.1-10.7-4.1-14.8.0l-24 24-6.6-6.6c-3.6-3.6-9.6-3.6-13.2.0s-3.6 9.6.0 13.2l39.7 39.7c3.6 3.6 9.6 3.6 13.2.0s3.6-9.6.0-13.2l-6.6-6.6 24-24zm121.2-227-50.9 50.9c-4.5 4.5-4.5 12 0 16.5l31.4 31.4c22.2-16 53.4-14 73.4 6l25.4-25.4c4.5-4.5 4.5-12 0-16.5l-62.8-62.8c-4.6-4.6-12-4.6-16.5-.1zm-32.7 112.1-18.6-18.6c-4.3-4.3-11.5-4.3-15.8.0L66 229.6c-4.3 4.3-4.3 11.5.0 15.8l37.1 37.1c4.3 4.3 11.5 4.3 15.8.0l42.1-42.1c-8.8-18.5-7.2-40.7 4.9-57.7zM476.2 193h-22.8v-15.2h62.1V193h-22.8v59.7h-16.5V193zm39.4 31.2v-.2c0-15.7 11.2-28.7 27.2-28.7 18.4.0 26.8 14.3 26.8 29.9.0 1.2-.1 2.7-.2 4.1h-38.3c1.5 7.1 6.5 10.8 13.5 10.8 5.2.0 9-1.6 13.4-5.6l8.9 7.9c-5.1 6.4-12.5 10.3-22.5 10.3-16.6.0-28.8-11.6-28.8-28.5zm38.8-4.6c-.9-7-5-11.7-11.6-11.7-6.5.0-10.7 4.6-11.9 11.7h23.5zm26.3-41.8h15.6v74.9h-15.6v-74.9zm26.7 46.5v-.2c0-15.7 11.2-28.7 27.2-28.7 18.4.0 26.8 14.3 26.8 29.9.0 1.2-.1 2.7-.2 4.1h-38.3c1.5 7.1 6.5 10.8 13.5 10.8 5.2.0 9-1.6 13.4-5.6l8.9 7.9c-5.1 6.4-12.5 10.3-22.5 10.3-16.5-.1-28.8-11.7-28.8-28.5zm38.9-4.6c-.9-7-5-11.7-11.6-11.7-6.5.0-10.7 4.6-11.9 11.7h23.5zm26.3-23.3h16v8c3.7-4.7 8.5-9 16.6-9 7.3.0 12.9 3.3 15.8 8.9 4.9-5.8 10.8-8.9 18.5-8.9 11.9.0 19 7.1 19 20.7v36.6h-16v-31.4c0-7.6-3.4-11.4-9.3-11.4-6 0-9.7 3.9-9.7 11.4v31.4h-16v-31.4c0-7.6-3.4-11.4-9.3-11.4-6 0-9.7 3.9-9.7 11.4v31.4h-16v-56.3zm97 27.8v-.2c0-15.7 11.2-28.7 27.2-28.7 18.4.0 26.8 14.3 26.8 29.9.0 1.2-.1 2.7-.2 4.1h-38.3c1.5 7.1 6.5 10.8 13.5 10.8 5.2.0 9-1.6 13.4-5.6l8.9 7.9c-5.1 6.4-12.5 10.3-22.5 10.3-16.6.0-28.8-11.6-28.8-28.5zm38.8-4.6c-.9-7-5-11.7-11.6-11.7-6.5.0-10.7 4.6-11.9 11.7h23.5zm28.1 16.1v-26.9h-6.8V195h6.8v-14.5h16.1V195H866v13.8h-13.3V233c0 3.7 1.6 5.5 5.2 5.5 3 0 5.6-.7 7.9-2v12.9c-3.4 2-7.3 3.3-12.7 3.3-9.9.0-16.6-3.9-16.6-17zm41.6-39.7h16.2v11.5c3.3-7.9 8.6-13 18.2-12.6v17h-.9c-10.8.0-17.4 6.5-17.4 20.2v21.1H878V196zm85.9-.6h17.2l-22.4 59.8c-4.5 11.9-9.3 16.3-19.2 16.3-6 0-10.4-1.5-14.7-4l5.5-12c2.2 1.3 4.9 2.3 7.1 2.3 2.8.0 4.4-.9 5.8-3.8l-22.9-58.6h17.5l13.3 39.7 12.8-39.7z" />
+            </svg>
+          </a>
+        </div>
+        <div class="header-item"><!-- links --></div>
+      </nav>
+    </header>
+    <div class="container">
+      <h2>JavaScript SDK Benchmarks</h2>
+      <div>
+        <strong>Last Update:</strong>
         <span id="last-update"></span>
       </div>
-      <div class="header-item">
-        <strong class="header-label">Repository:</strong>
+      <div>
+        <strong>Repository:</strong>
         <a id="repository-link" rel="noopener"></a>
       </div>
-    </header>
-    <main id="main"></main>
+      <main id="main"></main>
+    </div>
     <footer>
       <button id="dl-button">Download data as JSON</button>
       <div class="spacer"></div>
@@ -109,22 +172,19 @@
     <script id="main-script">
       'use strict';
       (function() {
-        // Colors from https://github.com/github/linguist/blob/master/lib/linguist/languages.yml
-        const toolColors = {
-          cargo: '#dea584',
-          go: '#00add8',
-          benchmarkjs: '#f1e05a',
-          benchmarkluau: '#000080',
-          pytest: '#3572a5',
-          googlecpp: '#f34b7d',
-          catch2: '#f34b7d',
-          julia: '#a270ba',
-          jmh: '#b07219',
-          benchmarkdotnet: '#178600',
-          customBiggerIsBetter: '#38ff38',
-          customSmallerIsBetter: '#ff3838',
-          _: '#333333'
-        };
+        const COLORS = [
+          "#48aaf9",
+          "#8a3ef2",
+          "#78eeda",
+          "#d78000",
+          "#1248b3",
+          "#97dbfc",
+          "#006174",
+          "#00b6b6",
+          "#854200",
+          "#f3c8ad",
+          "#410472",
+        ];
 
         function init() {
           function collectBenchesPerTestCase(entries) {
@@ -171,11 +231,15 @@
         function renderAllChars(dataSets) {
 
           function renderGraph(parent, name, dataset) {
+            const chartTitle = document.createElement('h3');
+            chartTitle.textContent = name;
+            parent.append(chartTitle);
+
             const canvas = document.createElement('canvas');
             canvas.className = 'benchmark-chart';
             parent.appendChild(canvas);
 
-            const color = toolColors[dataset.length > 0 ? dataset[0].tool : '_'];
+            const color = COLORS[0];
             const data = {
               labels: dataset.map(d => d.commit.id.slice(0, 7)),
               datasets: [
@@ -183,7 +247,8 @@
                   label: name,
                   data: dataset.map(d => d.bench.value),
                   borderColor: color,
-                  backgroundColor: color + '60', // Add alpha for #rrggbbaa
+                  backgroundColor: color + '60', // Add alpha for #rrggbbaa,
+                  fill: false
                 }
               ],
             };
@@ -254,11 +319,6 @@
             setElem.className = 'benchmark-set';
             main.appendChild(setElem);
 
-            const nameElem = document.createElement('h1');
-            nameElem.className = 'benchmark-title';
-            nameElem.textContent = name;
-            setElem.appendChild(nameElem);
-
             const graphsElem = document.createElement('div');
             graphsElem.className = 'benchmark-graphs';
             setElem.appendChild(graphsElem);
