From 44c76544fcc4d4df5cec060ee39a2c8da23b0142 Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Tue, 16 Dec 2025 15:40:30 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20Update=20chart=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.php |  3 ++-
 js/app.js | 36 ++++++++++++++++++++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/index.php b/index.php
index 418defa..5bd1da5 100644
--- a/index.php
+++ b/index.php
@@ -72,7 +72,8 @@
       <div class="border p-4 rounded shadow bg-gray-100 grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div id="ytdPieChartSection" class="bg-white p-4 rounded shadow">
           <h3 class="text-xl font-bold mb-4">YTD Chart</h3>
-          <canvas id="ytdPieChart"></canvas>
+          <canvas id="ytdPieChart" height="320"></canvas>
+          <div id="ytdLegend" class="mt-4 flex flex-wrap gap-3 text-sm text-gray-500"></div>
         </div>
 
         <div id="ytdSection" class="bg-white p-4 rounded shadow">
diff --git a/js/app.js b/js/app.js
index 511f65e..fc7fa77 100644
--- a/js/app.js
+++ b/js/app.js
@@ -191,6 +191,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Get the chart canvas
     const ctx = document.getElementById('ytdPieChart').getContext('2d');
+    const legendContainer = document.getElementById('ytdLegend');
 
     // Destroy the existing chart if it exists
     if (ytdPieChart) {
@@ -214,10 +215,14 @@ document.addEventListener('DOMContentLoaded', () => {
       },
       options: {
       responsive: true,
+      maintainAspectRatio: true,
+      layout: {
+        padding: {top: 8, bottom: 8}
+      },
       plugins: {
         legend: {
-        position: 'bottom'
-        },
+        display: false
+        }, // We render a custom legend below
         tooltip: {
         callbacks: {
           label: function (tooltipItem) {
@@ -230,6 +235,33 @@ document.addEventListener('DOMContentLoaded', () => {
       }
       }
     });
+
+    // Custom legend rendering in two columns, lighter text
+    if (legendContainer) {
+      legendContainer.innerHTML = '';
+      legendContainer.className = 'mt-4 grid grid-cols-2 gap-3 text-sm text-gray-500';
+
+      const colors = ytdPieChart.data.datasets[0].backgroundColor;
+      labels.forEach((label, idx) => {
+        const item = document.createElement('div');
+        item.className = 'flex items-center gap-3';
+
+        const swatch = document.createElement('span');
+        swatch.style.display = 'inline-block';
+        swatch.style.width = '12px';
+        swatch.style.height = '12px';
+        swatch.style.borderRadius = '9999px';
+        swatch.style.backgroundColor = colors[idx % colors.length];
+
+        const text = document.createElement('span');
+        text.textContent = label;
+        text.className = 'text-gray-200';
+
+        item.appendChild(swatch);
+        item.appendChild(text);
+        legendContainer.appendChild(item);
+      });
+    }
   }