feat: Add real-time filtering to chart based on search input

aider/website/_includes/quant-chart.js

@@ -1,16 +1,5 @@
 document.addEventListener('DOMContentLoaded', function () {
   var ctx = document.getElementById('quantChart').getContext('2d');
-  var chartData = {
-    labels: [],
-    datasets: [{
-      label: 'Percent completed correctly',
-      data: [],
-      backgroundColor: 'rgba(54, 162, 235, 0.2)',
-      borderColor: 'rgba(54, 162, 235, 1)',
-      borderWidth: 1
-    }]
-  };
-
   var allData = [];
   {% for row in site.data.quant %}
     allData.push({
@@ -22,51 +11,78 @@ document.addEventListener('DOMContentLoaded', function () {
   // Sort data by pass_rate_2 in descending order
   allData.sort((a, b) => b.pass_rate_2 - a.pass_rate_2);
 
-  allData.forEach(function(row) {
+  var chart;
-    chartData.labels.push(row.model);
+  
-    chartData.datasets[0].data.push(row.pass_rate_2);
+  function updateChart(filterText) {
-  });
+    var filteredData = allData.filter(row => 
+      row.model.toLowerCase().includes(filterText.toLowerCase())
+    );
+    
+    var chartData = {
+      labels: filteredData.map(row => row.model),
+      datasets: [{
+        label: 'Percent completed correctly',
+        data: filteredData.map(row => row.pass_rate_2),
+        backgroundColor: 'rgba(54, 162, 235, 0.2)',
+        borderColor: 'rgba(54, 162, 235, 1)',
+        borderWidth: 1
+      }]
+    };
 
-  new Chart(ctx, {
+    if (chart) {
-    type: 'bar',
+      chart.data = chartData;
-    data: chartData,
+      chart.update();
-    options: {
+    } else {
-      plugins: {
+      chart = new Chart(ctx, {
-        legend: {
+        type: 'bar',
-          display: false
+        data: chartData,
-        },
+        options: {
-        title: {
+          plugins: {
-          display: true,
+            legend: {
-          text: 'Aider code editing benchmark',
+              display: false
-          font: {
+            },
-            size: 16
+            title: {
-          }
+              display: true,
-        }
+              text: 'Aider code editing benchmark',
-      },
+              font: {
-      scales: {
+                size: 16
-        y: {
+              }
-          beginAtZero: true,
-          title: {
-            display: true,
-            text: 'Percent completed correctly',
-            font: {
-              size: 14
             }
           },
-          ticks: {
+          scales: {
-            font: {
+            y: {
-              size: 16
+              beginAtZero: true,
-            }
+              title: {
-          }
+                display: true,
-        },
+                text: 'Percent completed correctly',
-        x: {
+                font: {
-          ticks: {
+                  size: 14
-            font: {
+                }
-              size: 16
+              },
+              ticks: {
+                font: {
+                  size: 16
+                }
+              }
+            },
+            x: {
+              ticks: {
+                font: {
+                  size: 16
+                }
+              }
             }
           }
         }
-      }
+      });
     }
+  }
+
+  // Initial chart render
+  updateChart('');
+
+  // Connect search input to chart filtering
+  document.getElementById('quantSearchInput').addEventListener('keyup', function() {
+    updateChart(this.value);
   });
 });