feat: Add line plot of total costs with right y-axis scale

aider/website/_includes/leaderboard.js

@@ -23,6 +23,17 @@ document.addEventListener('DOMContentLoaded', function () {
         return (label && label.includes(HIGHLIGHT_MODEL)) ? 'rgba(255, 99, 132, 1)' : 'rgba(54, 162, 235, 1)';
       },
       borderWidth: 1
+    }, {
+      label: 'Total Cost ($)',
+      data: [],
+      type: 'line',
+      yAxisID: 'y1',
+      fill: false,
+      borderColor: 'rgba(153, 102, 255, 1)',
+      borderWidth: 2,
+      pointBackgroundColor: 'rgba(153, 102, 255, 1)',
+      pointBorderColor: '#fff',
+      pointRadius: 4
     }]
   };
 
@@ -32,7 +43,8 @@ document.addEventListener('DOMContentLoaded', function () {
       model: '{{ row.model }}',
       pass_rate: {{ row[pass_rate_field] }},
       percent_cases_well_formed: {{ row.percent_cases_well_formed }},
-      edit_format: '{{ row.edit_format | default: "diff" }}'
+      edit_format: '{{ row.edit_format | default: "diff" }}',
+      total_cost: {{ row.total_cost | default: 0 }}
     });
   {% endfor %}
 
@@ -43,6 +55,7 @@ document.addEventListener('DOMContentLoaded', function () {
     displayedData = [];
     leaderboardData.labels = [];
     leaderboardData.datasets[0].data = [];
+    leaderboardData.datasets[1].data = [];
 
     allData.forEach(function(row, index) {
       var rowElement = document.getElementById('edit-row-' + index);
@@ -53,6 +66,7 @@ document.addEventListener('DOMContentLoaded', function () {
         displayedData.push(row);
         leaderboardData.labels.push(row.model);
         leaderboardData.datasets[0].data.push(row.pass_rate);
+        leaderboardData.datasets[1].data.push(row.total_cost);
       }
     });
 
@@ -111,10 +125,28 @@ document.addEventListener('DOMContentLoaded', function () {
                   fillStyle: blueDiagonalPattern,
                   strokeStyle: 'rgba(54, 162, 235, 1)',
                   lineWidth: 1
+                },
+                {
+                  text: 'Total Cost ($)',
+                  fillStyle: 'rgba(0, 0, 0, 0)',
+                  strokeStyle: 'rgba(153, 102, 255, 1)',
+                  lineWidth: 2
                 }
               ];
             }
           }
+        },
+        tooltip: {
+          callbacks: {
+            label: function(context) {
+              const datasetLabel = context.dataset.label || '';
+              const value = context.parsed.y;
+              if (datasetLabel === 'Total Cost ($)') {
+                return datasetLabel + ': $' + value.toFixed(2);
+              }
+              return datasetLabel + ': ' + value.toFixed(1) + '%';
+            }
+          }
         }
       },
       scales: {
@@ -125,6 +157,17 @@ document.addEventListener('DOMContentLoaded', function () {
             text: 'Percent completed correctly'
           }
         },
+        y1: {
+          beginAtZero: true,
+          position: 'right',
+          grid: {
+            drawOnChartArea: false
+          },
+          title: {
+            display: true,
+            text: 'Total Cost ($)'
+          }
+        },
         x: {
           ticks: {
             callback: function(value, index) {
@@ -173,6 +216,7 @@ document.addEventListener('DOMContentLoaded', function () {
     displayedData = [];
     leaderboardData.labels = [];
     leaderboardData.datasets[0].data = [];
+    leaderboardData.datasets[1].data = [];
     
     for (var i = 0; i < rows.length; i++) {
       var rowText = rows[i].textContent;
@@ -181,6 +225,7 @@ document.addEventListener('DOMContentLoaded', function () {
         displayedData.push(allData[i]);
         leaderboardData.labels.push(allData[i].model);
         leaderboardData.datasets[0].data.push(allData[i].pass_rate);
+        leaderboardData.datasets[1].data.push(allData[i].total_cost);
       } else {
         rows[i].style.display = 'none';
       }