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 1/3] 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">

From eef63c9adcc6869665451ad94a7225ca3d29d63f Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Fri, 22 Sep 2023 14:08:25 +0000
Subject: [PATCH 2/3] refactor: metrics into reusable component

---
 .../open/{gh-metrics.tsx => bar-metrics.tsx}  | 15 ++---
 .../open/early-adopter-metrics.tsx            | 59 -------------------
 .../app/(marketing)/open/funding-raised.tsx   | 12 ++--
 .../src/app/(marketing)/open/page.tsx         | 20 +++----
 4 files changed, 22 insertions(+), 84 deletions(-)
 rename apps/marketing/src/app/(marketing)/open/{gh-metrics.tsx => bar-metrics.tsx} (79%)
 delete mode 100644 apps/marketing/src/app/(marketing)/open/early-adopter-metrics.tsx

diff --git a/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx b/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
similarity index 79%
rename from apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
rename to apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
index 357c110c2..ec677ec83 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
+++ b/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
@@ -7,18 +7,15 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recha
 import { formatMonth } from '@documenso/lib/client-only/format-month';
 import { cn } from '@documenso/ui/lib/utils';
 
-import { StargazersType } from './page';
-
-export type MetricsDataKey = keyof StargazersType[string];
-export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
-  data: StargazersType;
-  metricKey: MetricsDataKey;
+export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
+  data: T;
+  metricKey: keyof T[string];
   title: string;
   label: string;
   chartHeight?: number;
 };
 
-export const GithubMetric = ({
+export const BarMetric = <T extends Record<string, Record<keyof T[string], unknown>>>({
   className,
   data,
   metricKey,
@@ -26,7 +23,7 @@ export const GithubMetric = ({
   label,
   chartHeight = 400,
   ...props
-}: GithubMetricProps) => {
+}: BarMetricProps<T>) => {
   const formattedData = Object.keys(data)
     .map((key) => ({
       month: formatMonth(key),
@@ -50,7 +47,7 @@ export const GithubMetric = ({
               formatter={(value) => [Number(value), label]}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
-            <Bar dataKey={metricKey} fill="hsl(var(--primary))" label={label} />
+            <Bar dataKey={metricKey as string} fill="hsl(var(--primary))" label={label} />{' '}
           </BarChart>
         </ResponsiveContainer>
       </div>
diff --git a/apps/marketing/src/app/(marketing)/open/early-adopter-metrics.tsx b/apps/marketing/src/app/(marketing)/open/early-adopter-metrics.tsx
deleted file mode 100644
index b84deea37..000000000
--- a/apps/marketing/src/app/(marketing)/open/early-adopter-metrics.tsx
+++ /dev/null
@@ -1,59 +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 { 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/funding-raised.tsx b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
index c6601f547..51857bb06 100644
--- a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
+++ b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
@@ -7,14 +7,14 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recha
 import { formatMonth } from '@documenso/lib/client-only/format-month';
 import { cn } from '@documenso/ui/lib/utils';
 
-import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
+export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
+  data: Record<string, string | number>[];
+};
 
-export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>;
-
-export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => {
-  const formattedData = FUNDING_RAISED.map((item) => ({
+export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps) => {
+  const formattedData = data.map((item) => ({
     amount: Number(item.amount),
-    date: formatMonth(item.date),
+    date: formatMonth(item.date as string),
   }));
 
   return (
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index 1740a65ad..8a8281d53 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -1,12 +1,12 @@
 import { z } from 'zod';
 
+import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
 import { MetricCard } from '~/app/(marketing)/open/metric-card';
 import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 
+import { BarMetric } from './bar-metrics';
 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';
 
 export const revalidate = 3600;
@@ -41,8 +41,6 @@ const ZEarlyAdoptersResponse = z.record(
 export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
 export type EarlyAdoptersType = z.infer<typeof ZEarlyAdoptersResponse>;
 
-// const ZOpenPullRequestsResponse = ZMergedPullRequestsResponse;
-
 export default async function OpenPage() {
   const {
     forks_count: forksCount,
@@ -125,11 +123,11 @@ export default async function OpenPage() {
 
         <SalaryBands className="col-span-12 lg:col-span-6" />
 
-        <FundingRaised className="col-span-12 lg:col-span-6" />
+        <FundingRaised data={FUNDING_RAISED} className="col-span-12 lg:col-span-6" />
 
         <CapTable className="col-span-12 lg:col-span-6" />
 
-        <EarlyAdopterMetrics
+        <BarMetric<EarlyAdoptersType>
           data={EARLY_ADOPTERS_DATA}
           metricKey="earlyAdopters"
           title="Early Adopters"
@@ -137,7 +135,7 @@ export default async function OpenPage() {
           className="col-span-12 lg:col-span-6"
         />
 
-        <GithubMetric
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="stars"
           title="Github: Total Stars"
@@ -145,7 +143,7 @@ export default async function OpenPage() {
           className="col-span-12 lg:col-span-6"
         />
 
-        <GithubMetric
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="mergedPRs"
           title="Github: Total Merged PRs"
@@ -153,7 +151,8 @@ export default async function OpenPage() {
           chartHeight={300}
           className="col-span-12 lg:col-span-6"
         />
-        <GithubMetric
+
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="forks"
           title="Github: Total Forks"
@@ -161,7 +160,8 @@ export default async function OpenPage() {
           chartHeight={300}
           className="col-span-12 lg:col-span-6"
         />
-        <GithubMetric
+
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="openIssues"
           title="Github: Total Open Issues"

From d0fad4775af1aeb2a9a907fc98eaedca24928fb7 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Sat, 23 Sep 2023 12:02:37 +0000
Subject: [PATCH 3/3] feat: add extra info for the early adopters

---
 .../src/app/(marketing)/open/bar-metrics.tsx  |  7 +++-
 .../src/app/(marketing)/open/page.tsx         |  2 +
 .../src/app/(marketing)/open/tooltip.tsx      | 40 +++++++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 apps/marketing/src/app/(marketing)/open/tooltip.tsx

diff --git a/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx b/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
index ec677ec83..42295c0bf 100644
--- a/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
+++ b/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
@@ -13,6 +13,7 @@ export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<H
   title: string;
   label: string;
   chartHeight?: number;
+  extraInfo?: JSX.Element;
 };
 
 export const BarMetric = <T extends Record<string, Record<keyof T[string], unknown>>>({
@@ -22,6 +23,7 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
   title,
   label,
   chartHeight = 400,
+  extraInfo,
   ...props
 }: BarMetricProps<T>) => {
   const formattedData = Object.keys(data)
@@ -33,7 +35,10 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
 
   return (
     <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">{title}</h3>
+      <div className="flex items-center px-4">
+        <h3 className="text-lg font-semibold">{title}</h3>
+        <span>{extraInfo}</span>
+      </div>
 
       <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}>
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index 8a8281d53..8d04e21b1 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -8,6 +8,7 @@ import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
 import { TeamMembers } from './team-members';
+import { OpenPageTooltip } from './tooltip';
 
 export const revalidate = 3600;
 
@@ -133,6 +134,7 @@ export default async function OpenPage() {
           title="Early Adopters"
           label="Early Adopters"
           className="col-span-12 lg:col-span-6"
+          extraInfo={<OpenPageTooltip />}
         />
 
         <BarMetric<StargazersType>
diff --git a/apps/marketing/src/app/(marketing)/open/tooltip.tsx b/apps/marketing/src/app/(marketing)/open/tooltip.tsx
new file mode 100644
index 000000000..e6bf48a94
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/tooltip.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+
+export function OpenPageTooltip() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            className="ml-2 mt-2.5"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
+              fill="currentColor"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>
+            August and earlier: Active subscribers. September and beyond: Numbers of active
+            subscriptions.
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}