feat: add other charts

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

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

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

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

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

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

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

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

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

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