feat: add tooltip to cap table

apps/marketing/src/app/(marketing)/open/cap-table.tsx

@@ -2,15 +2,11 @@
 
 import { HTMLAttributes } from 'react';
 
-import { Cell, Pie, PieChart } from 'recharts';
+import { Cell, Pie, PieChart, Tooltip } from 'recharts';
 
 import { cn } from '@documenso/ui/lib/utils';
 
-const data = [
-  { name: 'Founders', percentage: 75.5 },
-  { name: 'Investors', percentage: 14.5 },
-  { name: 'Team Pool', percentage: 10 },
-];
+import { CAP_TABLE } from './data';
 
 const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
 
@@ -36,7 +32,7 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         <PieChart width={400} height={400}>
           <Pie
-            data={data}
+            data={CAP_TABLE}
             cx="50%"
             cy="50%"
             labelLine={false}
@@ -46,10 +42,15 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
             fill="#8884d8"
             dataKey="percentage"
           >
-            {data.map((entry, index) => (
+            {CAP_TABLE.map((entry, index) => (
               <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
             ))}
           </Pie>
+          <Tooltip
+            formatter={(percent: number, name, props) => {
+              return [`${percent}%`, name || props['name'] || props['payload']['name']];
+            }}
+          />
         </PieChart>
       </div>
     </div>

apps/marketing/src/app/(marketing)/open/data.ts

@@ -95,16 +95,7 @@ export const SALARY_BANDS = [
 ];
 
 export const CAP_TABLE = [
-  {
-    shareholder: 'Founders',
-    percentage: '75.5',
-  },
-  {
-    shareholder: 'Investors',
-    percentage: '14.5',
-  },
-  {
-    shareholder: 'Team Pool',
-    percentage: '10',
-  },
+  { name: 'Founders', percentage: 75.5 },
+  { name: 'Investors', percentage: 14.5 },
+  { name: 'Team Pool', percentage: 10 },
 ];