From 199b59fdb9410f1ac5a1e9fa3abdffc843151656 Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <paul@aider.chat>
Date: Sat, 12 Apr 2025 20:21:08 -0700
Subject: [PATCH] feat: Improve table-as-bar-graph with color variation based
 on value

---
 aider/website/docs/leaderboards/index.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/aider/website/docs/leaderboards/index.md b/aider/website/docs/leaderboards/index.md
index 2ce057036..221782a58 100644
--- a/aider/website/docs/leaderboards/index.md
+++ b/aider/website/docs/leaderboards/index.md
@@ -61,11 +61,11 @@ The model also has to successfully apply all its changes to the source file with
       <tr style="border-bottom: 1px solid #ddd;">
         <td style="padding: 8px;"><span>{{ row.model }}</span></td>
         <td class="bar-cell">
-          <div class="bar-viz" style="width: {{ row.pass_rate_2 }}%;"></div>
+          <div class="bar-viz" style="width: {{ row.pass_rate_2 }}%; background-color: {% if row.pass_rate_2 >= 80 %}rgba(40, 167, 69, 0.3){% elsif row.pass_rate_2 >= 50 %}rgba(255, 193, 7, 0.3){% else %}rgba(220, 53, 69, 0.3){% endif %}; border-right: 1px solid {% if row.pass_rate_2 >= 80 %}rgba(40, 167, 69, 0.5){% elsif row.pass_rate_2 >= 50 %}rgba(255, 193, 7, 0.5){% else %}rgba(220, 53, 69, 0.5){% endif %};"></div>
           <span>{{ row.pass_rate_2 }}%</span>
         </td>
         <td class="bar-cell">
-          <div class="bar-viz" style="width: {{ row.percent_cases_well_formed }}%;"></div>
+          <div class="bar-viz" style="width: {{ row.percent_cases_well_formed }}%; background-color: {% if row.percent_cases_well_formed >= 80 %}rgba(40, 167, 69, 0.3){% elsif row.percent_cases_well_formed >= 50 %}rgba(255, 193, 7, 0.3){% else %}rgba(220, 53, 69, 0.3){% endif %}; border-right: 1px solid {% if row.percent_cases_well_formed >= 80 %}rgba(40, 167, 69, 0.5){% elsif row.percent_cases_well_formed >= 50 %}rgba(255, 193, 7, 0.5){% else %}rgba(220, 53, 69, 0.5){% endif %};"></div>
           <span>{{ row.percent_cases_well_formed }}%</span>
         </td>
         {% assign cost_percent = row.total_cost | times: 100.0 | divided_by: max_cost %}
@@ -124,13 +124,11 @@ The model also has to successfully apply all its changes to the source file with
     left: 0;
     top: 0;
     bottom: 0;
-    background-color: rgba(54, 162, 235, 0.3); /* Bar color */
-    border-right: 1px solid rgba(54, 162, 235, 0.5); /* Optional: define end */
     z-index: 0; /* Behind the text */
     height: 60%; /* Bar height */
     margin: auto 0; /* Vertical centering */
     border-radius: 0 2px 2px 0; /* Slightly rounded end corners */
-    /* Width is set inline via style attribute */
+    /* Width and colors are set inline via style attribute */
   }
   .bar-cell span {
      position: relative; /* Needed to stack above the absolute positioned bar */