From 21ecfde543bd0e1f6e5bd745a9063b19114a55c3 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Wed, 13 Nov 2024 17:14:50 +0000
Subject: [PATCH] chore: add viral metrics to open page

---
 .../src/app/(marketing)/open/page.tsx         | 15 +++++
 .../open/signer-conversion-chart.tsx          | 64 +++++++++++++++++++
 .../src/app/(dashboard)/admin/stats/page.tsx  |  5 +-
 3 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 apps/marketing/src/app/(marketing)/open/signer-conversion-chart.tsx

diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index 367afcd5a..2976f293d 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -6,6 +6,7 @@ import { z } from 'zod';
 
 import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getCompletedDocumentsMonthly } from '@documenso/lib/server-only/user/get-monthly-completed-document';
+import { getSignerConversionMonthly } from '@documenso/lib/server-only/user/get-signer-conversion';
 import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 
 import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
@@ -19,6 +20,7 @@ import { MonthlyCompletedDocumentsChart } from './monthly-completed-documents-ch
 import { MonthlyNewUsersChart } from './monthly-new-users-chart';
 import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
 import { SalaryBands } from './salary-bands';
+import { SignerConversionChart } from './signer-conversion-chart';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
 import { TotalSignedDocumentsChart } from './total-signed-documents-chart';
@@ -143,6 +145,7 @@ export default async function OpenPage() {
     EARLY_ADOPTERS_DATA,
     MONTHLY_USERS,
     MONTHLY_COMPLETED_DOCUMENTS,
+    MONTHLY_SIGNER_CONVERSION,
   ] = await Promise.all([
     fetchGithubStats(),
     fetchOpenIssues(),
@@ -151,6 +154,7 @@ export default async function OpenPage() {
     fetchEarlyAdopters(),
     getUserMonthlyGrowth(),
     getCompletedDocumentsMonthly(),
+    getSignerConversionMonthly(),
   ]);
 
   return (
@@ -281,6 +285,17 @@ export default async function OpenPage() {
             data={MONTHLY_COMPLETED_DOCUMENTS}
             className="col-span-12 lg:col-span-6"
           />
+          <SignerConversionChart
+            className="col-span-12 lg:col-span-6"
+            title={_(msg`Signers that Signed Up`)}
+            data={MONTHLY_SIGNER_CONVERSION}
+          />
+          <SignerConversionChart
+            className="col-span-12 lg:col-span-6"
+            title={_(msg`Total Signers that Signed Up`)}
+            data={MONTHLY_SIGNER_CONVERSION}
+            cummulative
+          />
         </div>
       </div>
 
diff --git a/apps/marketing/src/app/(marketing)/open/signer-conversion-chart.tsx b/apps/marketing/src/app/(marketing)/open/signer-conversion-chart.tsx
new file mode 100644
index 000000000..4c5e1bd2c
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/signer-conversion-chart.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetSignerConversionMonthlyResult } from '@documenso/lib/server-only/user/get-signer-conversion';
+
+export type SignerConversionChartProps = {
+  className?: string;
+  title: string;
+  cummulative?: boolean;
+  data: GetSignerConversionMonthlyResult;
+};
+
+export const SignerConversionChart = ({
+  className,
+  data,
+  title,
+  cummulative = false,
+}: SignerConversionChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, count, cume_count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('MMM yyyy'),
+      count: Number(count),
+      signed_count: Number(cume_count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value, name) => [
+                Number(value).toLocaleString('en-US'),
+                name === 'Recipients',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey={cummulative ? 'signed_count' : 'count'}
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Recipients"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/src/app/(dashboard)/admin/stats/page.tsx b/apps/web/src/app/(dashboard)/admin/stats/page.tsx
index 9ffbfb5dc..ad51b83bf 100644
--- a/apps/web/src/app/(dashboard)/admin/stats/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/stats/page.tsx
@@ -145,7 +145,10 @@ export default async function AdminStatsPage() {
               msg`Monthly Active Users: Users that had at least one of their documents completed`,
             )}
           />
-          <SignerConversionChart title="Signers that Signed Up" data={signerConversionMonthly} />
+          <SignerConversionChart
+            title={_(msg`Signers that Signed Up`)}
+            data={signerConversionMonthly}
+          />
           <SignerConversionChart
             title={_(msg`Total Signers that Signed Up`)}
             data={signerConversionMonthly}