From 8c1686f113569c98ef61a3266f86e6309aefeeb3 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Thu, 21 Mar 2024 01:25:23 +0000
Subject: [PATCH] feat: add total signed documents

---
 .../monthly-completed-documents-chart.tsx     |  4 +-
 .../src/app/(marketing)/open/page.tsx         | 24 +++++----
 .../open/total-signed-documents-chart.tsx     | 54 +++++++++++++++++++
 3 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx

diff --git a/apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx b/apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx
index 4efd31e76..77059f80a 100644
--- a/apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx
+++ b/apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx
@@ -38,7 +38,7 @@ export const MonthlyCompletedDocumentsChart = ({
               labelStyle={{
                 color: 'hsl(var(--primary-foreground))',
               }}
-              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Total Users']}
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Completed Documents']}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
 
@@ -47,7 +47,7 @@ export const MonthlyCompletedDocumentsChart = ({
               fill="hsl(var(--primary))"
               radius={[4, 4, 0, 0]}
               maxBarSize={60}
-              label="Monthly Completed Documents"
+              label="Completed Documents"
             />
           </BarChart>
         </ResponsiveContainer>
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index 02cf9302f..ea7ffda14 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -6,8 +6,6 @@ import { getCompletedDocumentsMonthly } from '@documenso/lib/server-only/user/ge
 import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 
 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 { CallToAction } from '~/components/(marketing)/call-to-action';
 
 import { BarMetric } from './bar-metrics';
@@ -16,8 +14,10 @@ import { FundingRaised } from './funding-raised';
 import { MonthlyCompletedDocumentsChart } from './monthly-completed-documents-chart';
 import { MonthlyNewUsersChart } from './monthly-new-users-chart';
 import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
+import { SalaryBands } from './salary-bands';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
+import { TotalSignedDocumentsChart } from './total-signed-documents-chart';
 import { Typefully } from './typefully';
 
 export const metadata: Metadata = {
@@ -128,17 +128,17 @@ const fetchEarlyAdopters = async () => {
 
 export default async function OpenPage() {
   const [
-    { forks_count: forksCount, stargazers_count: stargazersCount },
-    { total_count: openIssues },
-    { total_count: mergedPullRequests },
+    // { forks_count: forksCount, stargazers_count: stargazersCount },
+    // { total_count: openIssues },
+    // { total_count: mergedPullRequests },
     STARGAZERS_DATA,
     EARLY_ADOPTERS_DATA,
     MONTHLY_USERS,
     MONTHLY_COMPLETED_DOCUMENTS,
   ] = await Promise.all([
-    fetchGithubStats(),
-    fetchOpenIssues(),
-    fetchMergedPullRequests(),
+    // fetchGithubStats(),
+    // fetchOpenIssues(),
+    // fetchMergedPullRequests(),
     fetchStargazers(),
     fetchEarlyAdopters(),
     getUserMonthlyGrowth(),
@@ -166,7 +166,7 @@ export default async function OpenPage() {
         </div>
 
         <div className="my-12 grid grid-cols-12 gap-8">
-          <div className="col-span-12 grid grid-cols-4 gap-4">
+          {/* <div className="col-span-12 grid grid-cols-4 gap-4">
             <MetricCard
               className="col-span-2 lg:col-span-1"
               title="Stargazers"
@@ -187,7 +187,7 @@ export default async function OpenPage() {
               title="Merged PR's"
               value={mergedPullRequests.toLocaleString('en-US')}
             />
-          </div>
+          </div> */}
 
           <TeamMembers className="col-span-12" />
 
@@ -259,6 +259,10 @@ export default async function OpenPage() {
             data={MONTHLY_COMPLETED_DOCUMENTS}
             className="col-span-12 lg:col-span-6"
           />
+          <TotalSignedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
         </div>
       </div>
 
diff --git a/apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx b/apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx
new file mode 100644
index 000000000..239d15de9
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import { cn } from '@documenso/ui/lib/utils';
+
+export type TotalSignedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const TotalSignedDocumentsChart = ({ className, data }: TotalSignedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={cn('flex flex-col', className)}>
+      <div className="flex items-center px-4">
+        <h3 className="text-lg font-semibold">Total Signed Documents</h3>
+      </div>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Signed Documents']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Signed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};