From 4dfc420535c6b0dbd77e5717c23125f1eaf01753 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 31 Oct 2025 17:57:32 +0100
Subject: [PATCH] Make pie chart responsive and reduce label text size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reduce label font sizes: 10px name, 9px details (was 14px/12px)
- Add print-friendly smaller sizes: 7px/6px
- Make container fully responsive with max-width constraints
- Reduce label extension distance from ±50px to ±30px
- Reduce label radius from outerRadius+60 to outerRadius+35
- Use fixed pie dimensions (80/50) instead of calculated sizes
- Reduce connector line width from 2px to 1.5px
- Add print-specific max-width and height constraints

Fixes text overflow and makes chart fit properly on page while
maintaining readability and print quality.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/RechartsPortfolioPieChart.tsx | 102 ++++++++++---------
 1 file changed, 52 insertions(+), 50 deletions(-)

diff --git a/src/components/RechartsPortfolioPieChart.tsx b/src/components/RechartsPortfolioPieChart.tsx
index ed1f223..f89bf6a 100644
--- a/src/components/RechartsPortfolioPieChart.tsx
+++ b/src/components/RechartsPortfolioPieChart.tsx
@@ -50,13 +50,13 @@ export function RechartsPortfolioPieChart({
     } = props;
 
     const RADIAN = Math.PI / 180;
-    const radius = outerRadius + 60;
+    const radius = outerRadius + 35;
     const x = cx + radius * Math.cos(-midAngle * RADIAN);
     const y = cy + radius * Math.sin(-midAngle * RADIAN);
     const textAnchor = x > cx ? 'start' : 'end';
 
     // Calculate line endpoint for label connector
-    const lineEndX = x > cx ? x + 50 : x - 50;
+    const lineEndX = x > cx ? x + 30 : x - 30;
     const labelStartX = cx + (outerRadius + 10) * Math.cos(-midAngle * RADIAN);
     const labelStartY = cy + (outerRadius + 10) * Math.sin(-midAngle * RADIAN);
 
@@ -69,7 +69,7 @@ export function RechartsPortfolioPieChart({
           x2={x}
           y2={y}
           stroke={fill}
-          strokeWidth="2"
+          strokeWidth="1.5"
           className="print:stroke-gray-400"
         />
         <line
@@ -78,35 +78,35 @@ export function RechartsPortfolioPieChart({
           x2={lineEndX}
           y2={y}
           stroke={fill}
-          strokeWidth="2"
+          strokeWidth="1.5"
           className="print:stroke-gray-400"
         />
 
-        {/* Three-line label text */}
+        {/* Three-line label text - smaller sizes */}
         <text
           x={lineEndX}
-          y={y - 20}
+          y={y - 14}
           textAnchor={textAnchor}
-          className="text-sm font-semibold fill-slate-700 print:text-xs"
-          style={{ fontSize: '14px', fontWeight: 600 }}
+          className="fill-slate-700 print:text-[7px]"
+          style={{ fontSize: '10px', fontWeight: 600 }}
         >
           {name}
         </text>
         <text
           x={lineEndX}
-          y={y - 4}
+          y={y - 2}
           textAnchor={textAnchor}
-          className="text-xs fill-slate-600 print:text-[10px]"
-          style={{ fontSize: '12px' }}
+          className="fill-slate-600 print:text-[6px]"
+          style={{ fontSize: '9px' }}
         >
           {tons} tons
         </text>
         <text
           x={lineEndX}
-          y={y + 12}
+          y={y + 10}
           textAnchor={textAnchor}
-          className="text-xs font-bold fill-slate-800 print:text-[10px]"
-          style={{ fontSize: '12px', fontWeight: 700 }}
+          className="fill-slate-800 print:text-[6px]"
+          style={{ fontSize: '9px', fontWeight: 700 }}
         >
           {percentage.toFixed(1)}%
         </text>
@@ -115,42 +115,44 @@ export function RechartsPortfolioPieChart({
   };
 
   return (
-    <div className="flex flex-col items-center w-full">
-      {/* SVG Chart */}
-      <ResponsiveContainer width={size * 2.2} height={size * 1.4}>
-        <PieChart>
-          <Pie
-            data={chartData}
-            cx="50%"
-            cy="50%"
-            labelLine={false}
-            label={renderCustomLabel}
-            outerRadius={size * 0.35}
-            innerRadius={size * 0.20}
-            paddingAngle={2}
-            dataKey="value"
-            isAnimationActive={false}
-          >
-            {chartData.map((entry, index) => (
-              <Cell key={`cell-${index}`} fill={entry.fill} stroke="white" strokeWidth={2} />
-            ))}
-            {/* Center label showing total */}
-            <Label
-              value={totalTons.toString()}
-              position="center"
-              className="text-2xl font-bold fill-emerald-600 print:text-xl"
-              style={{ fontSize: '24px', fontWeight: 700, fill: '#059669' }}
-            />
-            <Label
-              value="tons CO₂"
-              position="center"
-              dy={20}
-              className="text-sm fill-slate-600 print:text-xs"
-              style={{ fontSize: '14px', fill: '#475569' }}
-            />
-          </Pie>
-        </PieChart>
-      </ResponsiveContainer>
+    <div className="flex flex-col items-center w-full max-w-4xl mx-auto">
+      {/* SVG Chart - Responsive container */}
+      <div className="w-full print:max-w-[600px]" style={{ maxWidth: '700px' }}>
+        <ResponsiveContainer width="100%" height={400} className="print:h-[350px]">
+          <PieChart>
+            <Pie
+              data={chartData}
+              cx="50%"
+              cy="50%"
+              labelLine={false}
+              label={renderCustomLabel}
+              outerRadius={80}
+              innerRadius={50}
+              paddingAngle={2}
+              dataKey="value"
+              isAnimationActive={false}
+            >
+              {chartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.fill} stroke="white" strokeWidth={2} />
+              ))}
+              {/* Center label showing total */}
+              <Label
+                value={totalTons.toString()}
+                position="center"
+                className="text-2xl font-bold fill-emerald-600 print:text-xl"
+                style={{ fontSize: '20px', fontWeight: 700, fill: '#059669' }}
+              />
+              <Label
+                value="tons CO₂"
+                position="center"
+                dy={18}
+                className="text-sm fill-slate-600 print:text-xs"
+                style={{ fontSize: '12px', fill: '#475569' }}
+              />
+            </Pie>
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
 
       {/* Legend below chart (for print clarity) */}
       <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-3 w-full max-w-2xl print:mt-4 print:gap-2">