From 1099cda9e4e78a52ff9b1c5c93606f4cd488820b Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <aider@paulg.org>
Date: Thu, 26 Sep 2024 17:44:50 -0700
Subject: [PATCH] feat: Add responsive options to the Chart.js configuration

---
 aider/website/_posts/2024-09-26-architect.md | 28 ++++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/aider/website/_posts/2024-09-26-architect.md b/aider/website/_posts/2024-09-26-architect.md
index 77a7f2f08..e3cf9c4c2 100644
--- a/aider/website/_posts/2024-09-26-architect.md
+++ b/aider/website/_posts/2024-09-26-architect.md
@@ -40,6 +40,12 @@ top coding models, as compared to their previous "solo" scores (striped bars).
   }
 </style>
 
+<style>
+  #passRateChart {
+    max-width: 100%;
+    height: auto !important;
+  }
+</style>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.0.2"></script>
 {% assign sorted_data = site.data.architect | sort: "pass_rate_2" | reverse %}
@@ -47,6 +53,11 @@ top coding models, as compared to their previous "solo" scores (striped bars).
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     var ctx = document.getElementById('passRateChart').getContext('2d');
+    
+    // Function to determine aspect ratio based on screen width
+    function getAspectRatio() {
+      return window.innerWidth < 600 ? 1.5 : 2;
+    }
     var labels = [];
     var data = [];
     var colorMapping = {
@@ -84,21 +95,22 @@ top coding models, as compared to their previous "solo" scores (striped bars).
     data.reverse();
     backgroundColors.reverse();
     borderColors.reverse();
-    new Chart(ctx, {
+    var chart = new Chart(ctx, {
       type: 'bar',
       data: {
         labels: labels,
         datasets: [{
           label: 'Pass Rate',
           data: data,
-          backgroundColor: 'rgba(75, 192, 192, 0.2)',
-          borderColor: 'rgba(75, 192, 192, 1)',
-          borderWidth: 1,
           backgroundColor: backgroundColors,
-          borderColor: borderColors
+          borderColor: borderColors,
+          borderWidth: 1
         }]
       },
       options: {
+        responsive: true,
+        maintainAspectRatio: true,
+        aspectRatio: getAspectRatio(),
         scales: {
           y: { 
             beginAtZero: true,
@@ -186,6 +198,12 @@ top coding models, as compared to their previous "solo" scores (striped bars).
           }
       }
     }});
+
+    // Update aspect ratio on window resize
+    window.addEventListener('resize', function() {
+      chart.options.aspectRatio = getAspectRatio();
+      chart.resize();
+    });
   });
 
   function createStripePattern(baseColor) {