From 6d9043cf246e6672c1bca1be29814bdf8e81594e Mon Sep 17 00:00:00 2001
From: Paul Gauthier <aider@paulg.org>
Date: Sat, 4 May 2024 10:11:25 -0700
Subject: [PATCH] aider: Added a bar chart using Chart.js to the
 `leaderboard.md` file.

# Aider chat conversation:

USER: add a bar chart using chart.js

ASSISTANT: To add a bar chart using Chart.js to the `leaderboard.md` file, you will need to include the Chart.js library, prepare a canvas element where the chart will be rendered, and write the JavaScript code to create the bar chart. Here's the diff that adds these elements to the `leaderboard.md` file:

```diff
--- docs/leaderboard.md
+++ docs/leaderboard.md
@@ ... @@
 <table style="width: 90%; max-width: 800px; margin: auto; border-collapse: collapse; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-size: 14px;">
   <!-- Table content -->
 </table>
+
+<canvas id="leaderboardChart" width="800" height="450"></canvas>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+  var ctx = document.getElementById('leaderboardChart').getContext('2d');
+  var leaderboardData = {
+    labels: [], // Populate with model names
+    datasets: [{
+      label: 'Percent correct',
+      data: [], // Populate with percent correct values
+      backgroundColor: 'rgba(54, 162, 235, 0.2)',
+      borderColor: 'rgba(54, 162, 235, 1)',
+      borderWidth: 1
+    }]
+  };
+
+  // Fetch leaderboard data and populate the chart
+  fetch('/_data/leaderboard.csv')
+    .then(function (response) {
+      return response.text();
+    })
+    .then(function (text) {
+      var rows = text.split('\n');
+      rows.forEach(function (row) {
+        var columns = row.split(',');
+        if (columns.length === 4) {
+          leaderboardData.labels.push(columns[0]);
+          leaderboardData.datasets[0].data.push(parseFloat(columns[1]));
+        }
+      });
+      new Chart(ctx, {
+        type: 'bar',
+        data: leaderboardData,
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        }
+      });
+    });
+});
+</script>
```

This diff adds a canvas element for the chart, includes the Chart.js library from a CDN, and provides a script that initializes the bar chart with data from the leaderboard CSV file. The script fetches the CSV data, parses it, and populates the chart with the model names and their corresponding "Percent correct" values.
---
 docs/leaderboard.md | 46 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/docs/leaderboard.md b/docs/leaderboard.md
index 0c6c3d512..2e744d994 100644
--- a/docs/leaderboard.md
+++ b/docs/leaderboard.md
@@ -38,6 +38,52 @@ it will work best with models that score well on the code editing benchmark.
   </tbody>
 </table>
 
+<canvas id="leaderboardChart" width="800" height="450"></canvas>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+  var ctx = document.getElementById('leaderboardChart').getContext('2d');
+  var leaderboardData = {
+    labels: [], // Populate with model names
+    datasets: [{
+      label: 'Percent correct',
+      data: [], // Populate with percent correct values
+      backgroundColor: 'rgba(54, 162, 235, 0.2)',
+      borderColor: 'rgba(54, 162, 235, 1)',
+      borderWidth: 1
+    }]
+  };
+
+  // Fetch leaderboard data and populate the chart
+  fetch('/_data/leaderboard.csv')
+    .then(function (response) {
+      return response.text();
+    })
+    .then(function (text) {
+      var rows = text.split('\n');
+      rows.forEach(function (row) {
+        var columns = row.split(',');
+        if (columns.length === 4) {
+          leaderboardData.labels.push(columns[0]);
+          leaderboardData.datasets[0].data.push(parseFloat(columns[1]));
+        }
+      });
+      new Chart(ctx, {
+        type: 'bar',
+        data: leaderboardData,
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        }
+      });
+    });
+});
+</script>
+
 
 ## Edit format