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

chore: refactor github charts into a single component

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-08-15 09:43:24 +00:00
committed by Mythie
parent d59045c419
commit 3407952a5e
5 changed files with 54 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,44 +0,0 @@
'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),
mergedPRs: 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={300}>
<BarChart data={formattedData} margin={{ top: 40, right: 20 }}>
<XAxis dataKey="month" />
<YAxis />
<Tooltip
itemStyle={{
color: 'hsl(var(--primary-foreground))',
}}
formatter={(value) => [Number(value), 'Merged PRs']}
cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
/>
<Bar dataKey="mergedPRs" fill="hsl(var(--primary))" label="Merged PRs" />
</BarChart>
</ResponsiveContainer>
</div>
</div>
);
};

28
apps/marketing/src/app/(marketing)/open/gh-forks.tsx → apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
View File

@ -9,22 +9,36 @@ import { cn } from '@documenso/ui/lib/utils';
import { StargazersType } from './page';
export type GithubForksProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
data: StargazersType;
metricKey: keyof StargazersType;
title: string;
label: string;
chartHeight?: number;
};
export const GithubForks = ({ className, data, ...props }: GithubForksProps) => {
export const GithubMetric = ({
className,
data,
metricKey,
title,
label,
chartHeight = 400,
...props
}: GithubMetricProps) => {
const formattedData = Object.keys(data)
.map((key) => ({
month: formatMonth(key),
forks: data[key].forks,
[metricKey]: data[key][metricKey],
}))
.reverse();
return (
<div className={cn('flex flex-col', className)} {...props}>
<h3 className="px-4 text-lg font-semibold">Github: Forks</h3>
<h3 className="px-4 text-lg font-semibold">{title}</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={300}>
<ResponsiveContainer width="100%" height={chartHeight}>
<BarChart data={formattedData} margin={{ top: 40, right: 20 }}>
<XAxis dataKey="month" />
<YAxis />
@ -32,10 +46,10 @@ export const GithubForks = ({ className, data, ...props }: GithubForksProps) =>
itemStyle={{
color: 'hsl(var(--primary-foreground))',
}}
formatter={(value) => [Number(value), 'Forks']}
formatter={(value) => [Number(value), label]}
cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
/>
<Bar dataKey="forks" fill="hsl(var(--primary))" label="Forks" />
<Bar dataKey={metricKey} fill="hsl(var(--primary))" label={label} />
</BarChart>
</ResponsiveContainer>
</div>

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

@ -1,44 +0,0 @@
'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),
openIssues: 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={300}>
<BarChart data={formattedData} margin={{ top: 40, right: 20 }}>
<XAxis dataKey="month" />
<YAxis />
<Tooltip
itemStyle={{
color: 'hsl(var(--primary-foreground))',
}}
formatter={(value) => [Number(value), 'Open Issues']}
cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
/>
<Bar dataKey="openIssues" fill="hsl(var(--primary))" label="Open Issues" />
</BarChart>
</ResponsiveContainer>
</div>
</div>
);
};

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

@ -1,44 +0,0 @@
'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 GithubStarsProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
export const GithubStars = ({ className, data, ...props }: GithubStarsProps) => {
const formattedData = Object.keys(data)
.map((key) => ({
month: formatMonth(key),
stars: data[key].stars,
}))
.reverse();
return (
<div className={cn('flex flex-col', className)} {...props}>
<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}>
<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>
);
};

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

@ -5,10 +5,7 @@ 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 { GithubMetric } from './gh-metrics';
import { TeamMembers } from './team-members';
export const revalidate = 86400;
@ -110,10 +107,38 @@ export default async function OpenPage() {
<FundingRaised className="col-span-12 lg:col-span-6" />
<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} />
<GithubMetric
data={STARGAZERS_DATA}
metricKey="stars"
title="Github: Stars"
label="Stars"
className="col-span-12 lg:col-span-6"
/>
<GithubMetric
data={STARGAZERS_DATA}
metricKey="mergedPRs"
title="Github: Merged PRs"
label="Merged PRs"
chartHeight={300}
className="col-span-12 lg:col-span-4"
/>
<GithubMetric
data={STARGAZERS_DATA}
metricKey="forks"
title="Github: Forks"
label="Forks"
chartHeight={300}
className="col-span-12 lg:col-span-4"
/>
<GithubMetric
data={STARGAZERS_DATA}
metricKey="openIssues"
title="Github: Open Issues"
label="Open Issues"
chartHeight={300}
className="col-span-12 lg:col-span-4"
/>
<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>