Merge pull request #198 from githubnext/copilot/remove-visual-comparison-section

Remove Visual Comparison bar chart from benchmarks page

Author: mrjf

playground/benchmarks.html

@@ -77,58 +77,6 @@
     .ratio-badge.fast { background: rgba(63, 185, 80, 0.15); color: var(--green); }
     .ratio-badge.slow { background: rgba(210, 153, 34, 0.15); color: var(--orange); }
 
-    /* Bar chart */
-    .bar-chart { margin: 1.5rem 0; }
-    .bar-row {
-      display: flex;
-      align-items: center;
-      margin-bottom: 0.75rem;
-      gap: 0.75rem;
-    }
-    .bar-label {
-      width: 160px;
-      text-align: right;
-      font-size: 0.85rem;
-      color: #8b949e;
-      flex-shrink: 0;
-    }
-    .bar-container {
-      flex: 1;
-      display: flex;
-      gap: 4px;
-      flex-direction: column;
-    }
-    .bar {
-      height: 24px;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      padding-left: 8px;
-      font-size: 0.75rem;
-      font-family: var(--font-mono);
-      min-width: 50px;
-      transition: width 0.3s ease;
-    }
-    .bar.tsb { background: var(--accent); color: #0d1117; }
-    .bar.pandas { background: var(--orange); color: #0d1117; }
-
-    .legend {
-      display: flex;
-      gap: 1.5rem;
-      margin: 1rem 0;
-      font-size: 0.85rem;
-    }
-    .legend-item {
-      display: flex;
-      align-items: center;
-      gap: 0.4rem;
-    }
-    .legend-swatch {
-      width: 14px;
-      height: 14px;
-      border-radius: 3px;
-    }
-
     .info-box {
       background: var(--surface);
       border: 1px solid var(--border);
@@ -183,17 +131,6 @@ <h1>⚡ Performance Benchmarks</h1>
     and the same number of iterations.
   </p>
 
-  <div class="legend">
-    <div class="legend-item">
-      <div class="legend-swatch" style="background: var(--accent);"></div>
-      <span>tsb (TypeScript)</span>
-    </div>
-    <div class="legend-item">
-      <div class="legend-swatch" style="background: var(--orange);"></div>
-      <span>pandas (Python)</span>
-    </div>
-  </div>
-
   <div id="no-data" style="display: none;">
     <p>📊 No benchmark data available yet.</p>
     <p style="font-size: 0.875rem; margin-top: 0.5rem;">
@@ -203,10 +140,6 @@ <h1>⚡ Performance Benchmarks</h1>
     </p>
   </div>
 
-  <!-- Chart section -->
-  <h2 id="chart-heading" style="display: none;">Visual Comparison</h2>
-  <div id="bar-chart" class="bar-chart"></div>
-
   <!-- Table section -->
   <h2 id="table-heading" style="display: none;">Detailed Results</h2>
   <table id="bench-table" class="bench-table" style="display: none;">
@@ -258,8 +191,6 @@ <h3>🤖 About</h3>
     // Load benchmark results and render
     (async function () {
       const noData = document.getElementById("no-data");
-      const chartHeading = document.getElementById("chart-heading");
-      const barChart = document.getElementById("bar-chart");
       const tableHeading = document.getElementById("table-heading");
       const benchTable = document.getElementById("bench-table");
       const benchTbody = document.getElementById("bench-tbody");
@@ -289,37 +220,13 @@ <h3>🤖 About</h3>
       }
 
       // Show sections
-      chartHeading.style.display = "";
       tableHeading.style.display = "";
       benchTable.style.display = "";
       if (data.timestamp) {
         benchTimestamp.style.display = "";
         benchTimestamp.textContent = "Last updated: " + data.timestamp;
       }
 
-      // Find max time for scaling bars
-      let maxTime = 0;
-      for (const b of benchmarks) {
-        maxTime = Math.max(maxTime, b.tsb.mean_ms, b.pandas.mean_ms);
-      }
-
-      // Render bar chart
-      for (const b of benchmarks) {
-        const label = b.function.replace(/_/g, " ");
-        const tsPct = (b.tsb.mean_ms / maxTime) * 100;
-        const pyPct = (b.pandas.mean_ms / maxTime) * 100;
-
-        const row = document.createElement("div");
-        row.className = "bar-row";
-        row.innerHTML =
-          '<div class="bar-label">' + label + '</div>' +
-          '<div class="bar-container">' +
-          '<div class="bar tsb" style="width: ' + Math.max(tsPct, 5) + '%">' + b.tsb.mean_ms + ' ms</div>' +
-          '<div class="bar pandas" style="width: ' + Math.max(pyPct, 5) + '%">' + b.pandas.mean_ms + ' ms</div>' +
-          '</div>';
-        barChart.appendChild(row);
-      }
-
       // Render table
       for (const b of benchmarks) {
         const ratio = b.ratio;