From f3259aedea667b830f8ad8f6c3427d6319b93da2 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Thu, 17 Aug 2023 08:24:37 +0000
Subject: [PATCH 1/3] feat: Add legend to pie chart

---
 apps/marketing/src/app/(marketing)/open/cap-table.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/marketing/src/app/(marketing)/open/cap-table.tsx b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
index e1a0913c1..4a7f2fd92 100644
--- a/apps/marketing/src/app/(marketing)/open/cap-table.tsx
+++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
@@ -2,7 +2,7 @@
 
 import { HTMLAttributes, useEffect, useState } from 'react';
 
-import { Cell, Pie, PieChart, Tooltip } from 'recharts';
+import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -69,6 +69,7 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
                 <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
               ))}
             </Pie>
+            <Legend />
             <Tooltip
               formatter={(percent: number, name, props) => {
                 return [`${percent}%`, name || props['name'] || props['payload']['name']];

From 96e896295635cc8193399dad4be3847718e7fe5e Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Thu, 17 Aug 2023 09:44:43 +0000
Subject: [PATCH 2/3] feat: change legend text color to black

---
 apps/marketing/src/app/(marketing)/open/cap-table.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/marketing/src/app/(marketing)/open/cap-table.tsx b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
index 4a7f2fd92..0aebe5da1 100644
--- a/apps/marketing/src/app/(marketing)/open/cap-table.tsx
+++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
@@ -69,7 +69,11 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
                 <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
               ))}
             </Pie>
-            <Legend />
+            <Legend
+              formatter={(value) => {
+                return <span className="text-sm text-black">{value}</span>;
+              }}
+            />
             <Tooltip
               formatter={(percent: number, name, props) => {
                 return [`${percent}%`, name || props['name'] || props['payload']['name']];

From b564e5e72f89fa7b6aa4569a098a0062d04995e6 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Thu, 17 Aug 2023 10:57:36 +0000
Subject: [PATCH 3/3] feat: reduce chart radius to add padding

---
 apps/marketing/src/app/(marketing)/open/cap-table.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/open/cap-table.tsx b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
index 0aebe5da1..d5194e5f5 100644
--- a/apps/marketing/src/app/(marketing)/open/cap-table.tsx
+++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
@@ -60,8 +60,8 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
               cy="50%"
               labelLine={false}
               label={renderCustomizedLabel}
-              outerRadius={180}
-              innerRadius={100}
+              outerRadius={160}
+              innerRadius={80}
               fill="#8884d8"
               dataKey="percentage"
             >