From c3d52c68e7cc1c10aaabb9e2283cf88df1ed217f Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Fri, 22 Sep 2023 13:27:10 +0000
Subject: [PATCH] feat: add early adopters graph

---
 .../open/early-adopter-metrics.tsx            | 59 +++++++++++++++++++
 .../src/app/(marketing)/open/gh-metrics.tsx   |  2 +-
 .../src/app/(marketing)/open/page.tsx         | 33 ++++++++++-
 3 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 apps/marketing/src/app/(marketing)/open/early-adopter-metrics.tsx

diff --git a/apps/marketing/src/app/(marketing)/open/early-adopter-metrics.tsx b/apps/marketing/src/app/(marketing)/open/early-adopter-metrics.tsx
new file mode 100644
index 000000000..b84deea37
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/early-adopter-metrics.tsx
@@ -0,0 +1,59 @@
+'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 { EarlyAdoptersType } from './page';
+
+export type MetricsDataKey = keyof Omit<EarlyAdoptersType[string], 'id'>;
+export type EarlyAdopterMetricsProps = HTMLAttributes<HTMLDivElement> & {
+  data: EarlyAdoptersType;
+  metricKey: MetricsDataKey;
+  title: string;
+  label: string;
+  chartHeight?: number;
+};
+
+export const EarlyAdopterMetrics = ({
+  className,
+  data,
+  metricKey,
+  title,
+  label,
+  chartHeight = 400,
+  ...props
+}: EarlyAdopterMetricsProps) => {
+  const formattedData = Object.keys(data)
+    .map((key) => ({
+      month: formatMonth(key),
+      [metricKey]: data[key][metricKey],
+    }))
+    .reverse();
+
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <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 pr-2 shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={chartHeight}>
+          <BarChart data={formattedData} margin={{ top: 30, right: 20 }}>
+            <XAxis dataKey="month" />
+            <YAxis />
+            <Tooltip
+              itemStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value), label]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+            <Bar dataKey={metricKey} fill="hsl(var(--primary))" label={label} />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx b/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
index 5c0c79716..357c110c2 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
+++ b/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
@@ -9,7 +9,7 @@ import { cn } from '@documenso/ui/lib/utils';
 
 import { StargazersType } from './page';
 
-export type MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues';
+export type MetricsDataKey = keyof StargazersType[string];
 export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
   data: StargazersType;
   metricKey: MetricsDataKey;
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index 2d5bc2aa4..1740a65ad 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -4,6 +4,7 @@ import { MetricCard } from '~/app/(marketing)/open/metric-card';
 import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 
 import { CapTable } from './cap-table';
+import { EarlyAdopterMetrics } from './early-adopter-metrics';
 import { FundingRaised } from './funding-raised';
 import { GithubMetric } from './gh-metrics';
 import { TeamMembers } from './team-members';
@@ -29,7 +30,16 @@ const ZStargazersLiveResponse = z.record(
   }),
 );
 
+const ZEarlyAdoptersResponse = z.record(
+  z.object({
+    id: z.number(),
+    time: z.string().datetime(),
+    earlyAdopters: z.number(),
+  }),
+);
+
 export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
+export type EarlyAdoptersType = z.infer<typeof ZEarlyAdoptersResponse>;
 
 // const ZOpenPullRequestsResponse = ZMergedPullRequestsResponse;
 
@@ -65,6 +75,14 @@ export default async function OpenPage() {
     .then(async (res) => res.json())
     .then((res) => ZStargazersLiveResponse.parse(res));
 
+  const EARLY_ADOPTERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats/stripe', {
+    headers: {
+      accept: 'application/json',
+    },
+  })
+    .then(async (res) => res.json())
+    .then((res) => ZEarlyAdoptersResponse.parse(res));
+
   return (
     <div className="mx-auto mt-12 max-w-screen-lg">
       <div className="flex flex-col items-center justify-center">
@@ -110,6 +128,15 @@ export default async function OpenPage() {
         <FundingRaised className="col-span-12 lg:col-span-6" />
 
         <CapTable className="col-span-12 lg:col-span-6" />
+
+        <EarlyAdopterMetrics
+          data={EARLY_ADOPTERS_DATA}
+          metricKey="earlyAdopters"
+          title="Early Adopters"
+          label="Early Adopters"
+          className="col-span-12 lg:col-span-6"
+        />
+
         <GithubMetric
           data={STARGAZERS_DATA}
           metricKey="stars"
@@ -124,7 +151,7 @@ export default async function OpenPage() {
           title="Github: Total Merged PRs"
           label="Merged PRs"
           chartHeight={300}
-          className="col-span-12 lg:col-span-4"
+          className="col-span-12 lg:col-span-6"
         />
         <GithubMetric
           data={STARGAZERS_DATA}
@@ -132,7 +159,7 @@ export default async function OpenPage() {
           title="Github: Total Forks"
           label="Forks"
           chartHeight={300}
-          className="col-span-12 lg:col-span-4"
+          className="col-span-12 lg:col-span-6"
         />
         <GithubMetric
           data={STARGAZERS_DATA}
@@ -140,7 +167,7 @@ export default async function OpenPage() {
           title="Github: Total Open Issues"
           label="Open Issues"
           chartHeight={300}
-          className="col-span-12 lg:col-span-4"
+          className="col-span-12 lg:col-span-6"
         />
 
         <div className="col-span-12 mt-12 flex flex-col items-center justify-center">