Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 08:13:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: add tooltip to cap table

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-08-06 22:59:09 +00:00
committed by Mythie
parent 27b42814d8
commit 63f37732cd
2 changed files with 12 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

15
apps/marketing/src/app/(marketing)/open/data.ts
View File

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