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

feat: add other charts

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-08-15 08:45:24 +00:00
parent e2471a8eb4
commit 96f7ca4e36
5 changed files with 139 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/marketing/src/app/(marketing)/open/gh-forks.tsx Normal file
View File

@ -0,0 +1,44 @@
'use client';
import { HTMLAttributes } from 'react';
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { formatMonth } from '@documenso/lib/client-only/format-month';
import { cn } from '@documenso/ui/lib/utils';
import { StargazersType } from './page';
export type GithubForksProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
export const GithubForks = ({ className, data, ...props }: GithubForksProps) => {
const formattedData = Object.keys(data)
.map((key) => ({
month: formatMonth(key),
stars: data[key].forks,
}))
.reverse();
return (
<div className={cn('flex flex-col', className)} {...props}>
<h3 className="px-4 text-lg font-semibold">Github: Forks</h3>
<div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
<ResponsiveContainer width="100%" height={400}>
<BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
<XAxis dataKey="month" />
<YAxis />
<Tooltip
itemStyle={{
color: 'hsl(var(--primary-foreground))',
}}
formatter={(value) => [Number(value), 'Stars']}
cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
/>
<Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
</BarChart>
</ResponsiveContainer>
</div>
</div>
);
};

44
apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx Normal file
View File

@ -0,0 +1,44 @@
'use client';
import { HTMLAttributes } from 'react';
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { formatMonth } from '@documenso/lib/client-only/format-month';
import { cn } from '@documenso/ui/lib/utils';
import { StargazersType } from './page';
export type GithubMergedPrsProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
export const GithubMergedPrs = ({ className, data, ...props }: GithubMergedPrsProps) => {
const formattedData = Object.keys(data)
.map((key) => ({
month: formatMonth(key),
stars: data[key].mergedPRs,
}))
.reverse();
return (
<div className={cn('flex flex-col', className)} {...props}>
<h3 className="px-4 text-lg font-semibold">Github: Merged PRs</h3>
<div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
<ResponsiveContainer width="100%" height={400}>
<BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
<XAxis dataKey="month" />
<YAxis />
<Tooltip
itemStyle={{
color: 'hsl(var(--primary-foreground))',
}}
formatter={(value) => [Number(value), 'Stars']}
cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
/>
<Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
</BarChart>
</ResponsiveContainer>
</div>
</div>
);
};

44
apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx Normal file
View File

@ -0,0 +1,44 @@
'use client';
import { HTMLAttributes } from 'react';
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { formatMonth } from '@documenso/lib/client-only/format-month';
import { cn } from '@documenso/ui/lib/utils';
import { StargazersType } from './page';
export type GithubOpenIssuesProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
export const GithubOpenIssues = ({ className, data, ...props }: GithubOpenIssuesProps) => {
const formattedData = Object.keys(data)
.map((key) => ({
month: formatMonth(key),
stars: data[key].openIssues,
}))
.reverse();
return (
<div className={cn('flex flex-col', className)} {...props}>
<h3 className="px-4 text-lg font-semibold">Github: Open Issues</h3>
<div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
<ResponsiveContainer width="100%" height={400}>
<BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
<XAxis dataKey="month" />
<YAxis />
<Tooltip
itemStyle={{
color: 'hsl(var(--primary-foreground))',
}}
formatter={(value) => [Number(value), 'Stars']}
cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
/>
<Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
</BarChart>
</ResponsiveContainer>
</div>
</div>
);
};

2
apps/marketing/src/app/(marketing)/open/gh-stars.tsx
View File

@ -21,7 +21,7 @@ export const GithubStars = ({ className, data, ...props }: GithubStarsProps) =>
return (
<div className={cn('flex flex-col', className)} {...props}>
<h3 className="px-4 text-lg font-semibold">Github Monthly Stars</h3>
<h3 className="px-4 text-lg font-semibold">Github: Stars</h3>
<div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
<ResponsiveContainer width="100%" height={400}>

6
apps/marketing/src/app/(marketing)/open/page.tsx
View File

@ -5,6 +5,9 @@ import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
import { CapTable } from './cap-table';
import { FundingRaised } from './funding-raised';
import { GithubForks } from './gh-forks';
import { GithubMergedPrs } from './gh-merged-prs';
import { GithubOpenIssues } from './gh-open-issues';
import { GithubStars } from './gh-stars';
import { TeamMembers } from './team-members';
@ -108,6 +111,9 @@ export default async function OpenPage() {
<CapTable className="col-span-12 lg:col-span-6" />
<GithubStars className="col-span-12 lg:col-span-6" data={STARGAZERS_DATA} />
<GithubForks className="col-span-12 lg:col-span-4" data={STARGAZERS_DATA} />
<GithubMergedPrs className="col-span-12 lg:col-span-4" data={STARGAZERS_DATA} />
<GithubOpenIssues className="col-span-12 lg:col-span-4 " data={STARGAZERS_DATA} />
<div className="col-span-12 mt-12 flex flex-col items-center justify-center">
<h2 className="text-2xl font-bold">Where's the rest?</h2>