Group charts lexicographically

asterinas · Aug 11, 2024 · 60cc2d1 · 60cc2d1
1 parent 147671c
commit 60cc2d1
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/src/default_index_html.ts b/src/default_index_html.ts
@@ -70,6 +70,7 @@ export const DEFAULT_INDEX_HTML = String.raw`<!DOCTYPE html>
         font-weight: 600;
         word-break: break-word;
         text-align: center;
+        margin-bottom: 5px;
       }
       .benchmark-graphs {
         display: flex;
@@ -83,13 +84,15 @@ export const DEFAULT_INDEX_HTML = String.raw`<!DOCTYPE html>
         max-width: 1000px;
       }
       .chart-description {
-        font-family: 'Courier New', Courier, monospace;
-        color: #999; 
-        font-style: italic; 
-        font-size: 0.8rem;
-        font-weight: 200;
-        word-break: break-word;
-        text-align: center;
+          font-family: 'Courier New', Courier, monospace;
+          color: #333; /* Changed to a darker color for better readability */
+          font-style: italic;
+          font-size: 0.9rem;
+          font-weight: 200;
+          word-break: break-word;
+          text-align: center;
+          margin-top: 0px; /* Added margin to create space between the title and the description */
+          margin-bottom: 20px; /* Added margin to create space between the description and the figure below it */
       }
     </style>
     <title>Benchmarks</title>
@@ -184,10 +187,11 @@ export const DEFAULT_INDEX_HTML = String.raw`<!DOCTYPE html>
             const canvas = document.createElement('canvas');
             canvas.className = 'benchmark-chart';
             parent.appendChild(canvas);
-          
+
+            const sortedBenchSets = new Map([...benchSets.entries()].sort((a, b) => a[0].localeCompare(b[0])));
             const datasets = [];
             let index = 0;
-            for (const [benchName, benches] of benchSets.entries()) {
+            for (const [benchName, benches] of sortedBenchSets.entries()) {
               const color = generateColor(index);
               datasets.push({
                 label: benchName,
@@ -201,7 +205,7 @@ export const DEFAULT_INDEX_HTML = String.raw`<!DOCTYPE html>
           
             const data = {
               // Assuming all datasets has the same commit sequence
-              labels: benchSets.values().next().value.map(d => d.commit.id.slice(0, 7)),
+              labels: sortedBenchSets.values().next().value.map(d => d.commit.id.slice(0, 7)),
               datasets: datasets,
             };
           
@@ -219,8 +223,8 @@ export const DEFAULT_INDEX_HTML = String.raw`<!DOCTYPE html>
                   {
                     scaleLabel: {
                       display: true,
-                      // Assuming all datasets has the same unit, take the first one
-                      labelString: benchSets.values().next().value.length > 0 ? benchSets.values().next().value[0].bench.unit : '',
+                      // Assuming all datasets has the same unit, take the last one
+                      labelString: sortedBenchSets.values().next().value.length > 0 ? sortedBenchSets.values().next().value[sortedBenchSets.values().next().value.length - 1].bench.unit : '',
                     },
                     ticks: {
                       beginAtZero: true,