From cc0960620c49d117fbc3b7b0f08530ae1c2517e0 Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <aider@paulg.org>
Date: Thu, 15 Aug 2024 13:58:44 -0700
Subject: [PATCH] feat: Implement fluid aspect ratio for syntax errors chart

---
 .../website/_includes/code-in-json-syntax.js  | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/aider/website/_includes/code-in-json-syntax.js b/aider/website/_includes/code-in-json-syntax.js
index 1916dd2db..4a3200f8c 100644
--- a/aider/website/_includes/code-in-json-syntax.js
+++ b/aider/website/_includes/code-in-json-syntax.js
@@ -1,8 +1,21 @@
-<canvas id="syntaxErrorsChart" width="800" height="400" style="margin-bottom: 20px"></canvas>
-  
+<style>
+    .chart-container {
+        position: relative;
+        width: 100%;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+</style>
+
+<div class="chart-container">
+    <canvas id="syntaxErrorsChart"></canvas>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
 document.addEventListener('DOMContentLoaded', function () {
     var ctx = document.getElementById('syntaxErrorsChart').getContext('2d');
+    var chartContainer = document.querySelector('.chart-container');
     
     var yamlData = {{ site.data.code-in-json | jsonify }};
     
@@ -36,11 +49,19 @@ document.addEventListener('DOMContentLoaded', function () {
         datasets: datasets
     };
 
+    function getAspectRatio() {
+        var width = chartContainer.offsetWidth;
+        // Gradually change aspect ratio from 2 (landscape) to 1 (square)
+        return Math.max(1, Math.min(2, width / 300));
+    }
+
     var config = {
         type: 'bar',
         data: data,
         options: {
             responsive: true,
+            maintainAspectRatio: true,
+            aspectRatio: getAspectRatio(),
             scales: {
                 x: {
                     title: {
@@ -103,6 +124,16 @@ document.addEventListener('DOMContentLoaded', function () {
         }]
     };
 
-    new Chart(ctx, config);
+    var chart = new Chart(ctx, config);
+
+    function resizeChart() {
+        chart.options.aspectRatio = getAspectRatio();
+        chart.resize();
+    }
+
+    window.addEventListener('resize', resizeChart);
+
+    // Initial resize to set correct size
+    resizeChart();
 });
 </script>