From 18c7ef3ee96db6453fb0109410cca82d32ee01e2 Mon Sep 17 00:00:00 2001
From: medic-bot <medic-bot@lacompagniemaximus.com>
Date: Mon, 9 Mar 2026 21:17:59 -0400
Subject: [PATCH] fix: make pie chart legend always visible with hover
 percentages (#23)

Show category names permanently in compact form (text-xs) so they
are always discoverable. Percentages appear only on chart hover to
save space, matching the original request while keeping the legend
accessible without interaction.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/dashboard/CategoryPieChart.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/dashboard/CategoryPieChart.tsx b/src/components/dashboard/CategoryPieChart.tsx
index 1d82cf4..773ccd5 100644
--- a/src/components/dashboard/CategoryPieChart.tsx
+++ b/src/components/dashboard/CategoryPieChart.tsx
@@ -117,15 +117,14 @@ export default function CategoryPieChart({
         </ResponsiveContainer>
       </div>
 
-      <div
-        className={`flex flex-wrap gap-x-4 gap-y-1 mt-2 transition-opacity duration-200 ${isChartHovered ? "opacity-100" : "opacity-0 pointer-events-none"}`}
-      >
+      <div className="flex flex-wrap gap-x-3 gap-y-1 mt-2">
         {data.map((item, index) => {
           const isHidden = hiddenCategories.has(item.category_name);
+          const pct = total > 0 && !isHidden ? Math.round((item.total / total) * 100) : null;
           return (
             <button
               key={index}
-              className={`flex items-center gap-1.5 text-sm ${isHidden ? "opacity-40" : ""}`}
+              className={`flex items-center gap-1 text-xs ${isHidden ? "opacity-40" : ""}`}
               onContextMenu={(e) => {
                 e.preventDefault();
                 setContextMenu({ x: e.clientX, y: e.clientY, item });
@@ -135,7 +134,7 @@ export default function CategoryPieChart({
             >
               <PatternSwatch index={index} color={item.category_color} prefix="cat-pie" />
               <span className="text-[var(--muted-foreground)]">
-                {item.category_name} {total > 0 && !isHidden ? `${Math.round((item.total / total) * 100)}%` : ""}
+                {item.category_name}{isChartHovered && pct != null ? ` ${pct}%` : ""}
               </span>
             </button>
           );