chore: refactor github charts into a single component

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

@@ -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>
-  );
-};

apps/marketing/src/app/(marketing)/open/gh-metrics.tsx

@@ -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>

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -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 { GithubMetric } from './gh-metrics';
-import { GithubMergedPrs } from './gh-merged-prs';
-import { GithubOpenIssues } from './gh-open-issues';
-import { GithubStars } from './gh-stars';
 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} />
+        <GithubMetric
-        <GithubForks className="col-span-12 lg:col-span-4" data={STARGAZERS_DATA} />
+          data={STARGAZERS_DATA}
-        <GithubMergedPrs className="col-span-12 lg:col-span-4" data={STARGAZERS_DATA} />
+          metricKey="stars"
-        <GithubOpenIssues className="col-span-12 lg:col-span-4 " data={STARGAZERS_DATA} />
+          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>