chore: use single chart graphs

apps/web/src/app/(dashboard)/admin/stats/page.tsx

@@ -24,7 +24,6 @@ import {
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
 
 import { UserWithDocumentChart } from './user-with-document';
-import { UserWithDocumentCummulativeChart } from './user-with-document-cummulative';
 
 export default async function AdminStatsPage() {
   const [
@@ -67,12 +66,12 @@ export default async function AdminStatsPage() {
           <div className="mb-8 mt-4 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
             <CardMetric
               icon={File}
-              title="Users who sent one or more documents in the past month"
+              title="Users who uploaded one or more documents in the past month"
               value={userWithAtLeastOneDocumentPerMonth}
             />
             <CardMetric
               icon={File}
-              title="Users who uploaded one or more documents in the past month"
+              title="Users that created at least 1 document and had it completed"
               value={userWithAtLeastOneDocumentSignedPerMonth}
             />
           </div>
@@ -105,11 +104,29 @@ export default async function AdminStatsPage() {
       </div>
 
       <div className="mt-16">
-        <h3 className="text-3xl font-semibold">User Charts</h3>
-
-        <UserWithDocumentChart data={MONTHLY_USERS_SIGNED} className="mb-8 mt-4" />
-
-        <UserWithDocumentCummulativeChart data={MONTHLY_USERS_SIGNED} className="mb-8 mt-4" />
+        <h3 className="text-3xl font-semibold">Charts</h3>
+        <div className="mt-5 grid grid-cols-2 gap-10">
+          <UserWithDocumentChart
+            data={MONTHLY_USERS_SIGNED}
+            title="Monthly users who created documents"
+          />
+          <UserWithDocumentChart
+            data={MONTHLY_USERS_SIGNED}
+            cummulative
+            title="Cumulative users who created documents"
+          />
+          <UserWithDocumentChart
+            data={MONTHLY_USERS_SIGNED}
+            completed
+            title="Monthly users who completed documents"
+          />
+          <UserWithDocumentChart
+            data={MONTHLY_USERS_SIGNED}
+            cummulative
+            completed
+            title="Cumulative users who completed documents"
+          />
+        </div>
       </div>
     </div>
   );

apps/web/src/app/(dashboard)/admin/stats/user-with-document-cummulative.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import { DateTime } from 'luxon';
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-
-import type { GetUserWithDocumentMonthlyGrowth } from '@documenso/lib/server-only/admin/get-users-stats';
-
-export type UserWithDocumentCummulativeChartProps = {
-  className?: string;
-  data: GetUserWithDocumentMonthlyGrowth;
-};
-
-export const UserWithDocumentCummulativeChart = ({
-  className,
-  data,
-}: UserWithDocumentCummulativeChartProps) => {
-  const formattedData = [...data]
-    .reverse()
-    .map(({ month, cume_count: count, cume_signed_count: signed_count }) => {
-      return {
-        month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
-        count: Number(count),
-        signed_count: Number(signed_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">Total Activity (Cummulative)</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 === 'count' ? 'User with document' : 'Users with signed document',
-              ]}
-              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
-            />
-
-            <Bar
-              dataKey="signed_count"
-              fill="hsl(var(--gold))"
-              radius={[4, 4, 0, 0]}
-              maxBarSize={60}
-              label="Documents Added"
-            />
-            <Bar
-              dataKey="count"
-              fill="hsl(var(--primary))"
-              radius={[4, 4, 0, 0]}
-              maxBarSize={60}
-              label="Documents Signed"
-            />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-};

apps/web/src/app/(dashboard)/admin/stats/user-with-document.tsx

@@ -7,27 +7,49 @@ import type { GetUserWithDocumentMonthlyGrowth } from '@documenso/lib/server-onl
 
 export type UserWithDocumentChartProps = {
   className?: string;
+  title: string;
   data: GetUserWithDocumentMonthlyGrowth;
+  cummulative?: boolean;
+  completed?: boolean;
 };
 
-export const UserWithDocumentChart = ({ className, data }: UserWithDocumentChartProps) => {
-  const formattedData = [...data].reverse().map(({ month, count, signed_count }) => {
+export const UserWithDocumentChart = ({
+  className,
+  data,
+  title,
+  cummulative = false,
+  completed = false,
+}: UserWithDocumentChartProps) => {
+  const formattedData = (data: GetUserWithDocumentMonthlyGrowth, completed: boolean) => {
+    return [...data]
+      .reverse()
+      .map(({ month, count, cume_count, signed_count, cume_signed_count }) => {
+        const formattedMonth = DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL');
+        if (completed) {
           return {
-      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
-      count: Number(count),
-      signed_count: Number(signed_count),
+            month: formattedMonth,
+            count: Number(signed_count),
+            cummulative: Number(cume_signed_count),
           };
+        } else {
+          return {
+            month: formattedMonth,
+            count: Number(count),
+            cummulative: 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">Total Activity</h3>
+        <div className="mb-6 flex h-12 px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
         </div>
 
         <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={formattedData}>
+          <BarChart data={formattedData(data, completed)}>
             <XAxis dataKey="month" />
             <YAxis />
 
@@ -35,29 +57,16 @@ export const UserWithDocumentChart = ({ className, data }: UserWithDocumentChart
               labelStyle={{
                 color: 'hsl(var(--primary-foreground))',
               }}
-              formatter={(value, name) => [
-                Number(value).toLocaleString('en-US'),
-                {
-                  count: 'User with document',
-                  signed_count: 'Users with signed document',
-                }[name],
-              ]}
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Documents']}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
 
             <Bar
-              dataKey="signed_count"
-              fill="hsl(var(--gold))"
-              radius={[4, 4, 0, 0]}
-              maxBarSize={60}
-              label="Documents Added"
-            />
-            <Bar
-              dataKey="count"
+              dataKey={cummulative ? 'cummulative' : 'count'}
               fill="hsl(var(--primary))"
               radius={[4, 4, 0, 0]}
               maxBarSize={60}
-              label="Documents Signed"
+              label="Documents"
             />
           </BarChart>
         </ResponsiveContainer>

packages/lib/server-only/admin/get-users-stats.ts

@@ -41,7 +41,7 @@ export const getUserWithAtLeastOneDocumentSignedPerMonth = async () => {
           status: {
             equals: DocumentStatus.COMPLETED,
           },
-          createdAt: {
+          completedAt: {
             gte: new Date(new Date().setMonth(new Date().getMonth() - 1)),
           },
         },