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,12 +11,29 @@ 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);
-  });
   
-  new Chart(ctx, {
+  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
+      }]
+    };
+
+    if (chart) {
+      chart.data = chartData;
+      chart.update();
+    } else {
+      chart = new Chart(ctx, {
         type: 'bar',
         data: chartData,
         options: {
@@ -69,4 +75,14 @@ document.addEventListener('DOMContentLoaded', function () {
           }
         }
       });
+    }
+  }
+
+  // Initial chart render
+  updateChart('');
+
+  // Connect search input to chart filtering
+  document.getElementById('quantSearchInput').addEventListener('keyup', function() {
+    updateChart(this.value);
+  });
 });