feat: mau

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

@@ -0,0 +1,64 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetMonthlyActiveUsersResult } from '@documenso/lib/server-only/admin/get-users-stats';
+
+export type MonthlyActiveUsersChartProps = {
+  className?: string;
+  title: string;
+  cummulative?: boolean;
+  data: GetMonthlyActiveUsersResult;
+};
+
+export const MonthlyActiveUsersChart = ({
+  className,
+  data,
+  title,
+  cummulative = false,
+}: MonthlyActiveUsersChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, count, cume_count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('MMM yyyy'),
+      count: Number(count),
+      cume_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) => [
+                Number(value).toLocaleString('en-US'),
+                cummulative ? 'Cumulative MAU' : 'Monthly Active Users',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey={cummulative ? 'cume_count' : 'count'}
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label={cummulative ? 'Cumulative MAU' : 'Monthly Active Users'}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/admin/stats/monthly-active-users-chart.tsx

@@ -1,84 +0,0 @@
-'use client';
-
-import { DateTime } from 'luxon';
-import type { TooltipProps } from 'recharts';
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
-
-import type { GetMonthlyActiveUsersResult } from '@documenso/lib/server-only/admin/get-users-stats';
-import { cn } from '@documenso/ui/lib/utils';
-
-export type MonthlyActiveUsersChartProps = {
-  className?: string;
-  title: string;
-  data: GetMonthlyActiveUsersResult;
-  tooltip?: string;
-};
-
-const CustomTooltip = ({
-  active,
-  payload,
-  label,
-  tooltip,
-}: TooltipProps<ValueType, NameType> & { tooltip?: string }) => {
-  if (active && payload && payload.length) {
-    return (
-      <div className="z-100 w-60 space-y-1 rounded-md border border-solid bg-white p-2 px-3">
-        <p className="">{label}</p>
-        <p className="text-documenso">
-          {`${tooltip} : `}
-          <span className="text-black">{payload[0].value}</span>
-        </p>
-      </div>
-    );
-  }
-
-  return null;
-};
-
-export const MonthlyActiveUsersChart = ({
-  className,
-  title,
-  data,
-  tooltip,
-}: MonthlyActiveUsersChartProps) => {
-  const formattedData = (data: GetMonthlyActiveUsersResult) => {
-    return [...data].reverse().map(({ month, count }) => ({
-      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
-      count: Number(count),
-    }));
-  };
-
-  return (
-    <div className={cn('flex w-full flex-col gap-y-4', className)}>
-      <div className="flex flex-col gap-y-1">
-        <h3 className="text-foreground text-lg font-medium">{title}</h3>
-      </div>
-
-      <div className="w-full">
-        <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={formattedData(data)}>
-            <XAxis dataKey="month" />
-            <YAxis />
-
-            <Tooltip
-              content={<CustomTooltip tooltip={tooltip} />}
-              labelStyle={{
-                color: 'hsl(var(--primary-foreground))',
-              }}
-              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
-            />
-
-            <Bar
-              dataKey="count"
-              fill="hsl(var(--primary))"
-              radius={[4, 4, 0, 0]}
-              maxBarSize={60}
-              label={tooltip}
-            />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-};

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

@@ -29,7 +29,7 @@ import { getSignerConversionMonthly } from '@documenso/lib/server-only/user/get-
 
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
 
-import { MonthlyActiveUsersChart } from './monthly-active-users-chart';
+import { MonthlyActiveUsersChart } from './mau';
 import { SignerConversionChart } from './signer-conversion-chart';
 import { UserWithDocumentChart } from './user-with-document';
 
@@ -147,8 +147,14 @@ export default async function AdminStatsPage() {
           <MonthlyActiveUsersChart
             title={_(msg`Monthly Active Users (signed in)`)}
             data={monthlyActiveUsers}
-            tooltip={_(msg`Number of users who signed in each month`)}
           />
+
+          <MonthlyActiveUsersChart
+            title={_(msg`Cumulative MAU (signed in)`)}
+            data={monthlyActiveUsers}
+            cummulative
+          />
+
           <UserWithDocumentChart
             data={MONTHLY_USERS_SIGNED}
             title={_(msg`MAU (created document)`)}

package.json

@@ -34,7 +34,8 @@
     "make:version": " npm version --workspace @documenso/web --include-workspace-root --no-git-tag-version -m \"v%s\"",
     "translate": "npm run translate:extract && npm run translate:compile",
     "translate:extract": "lingui extract --clean",
-    "translate:compile": "lingui compile"
+    "translate:compile": "lingui compile",
+    "prisma:seed-mau": "npm run with:env -- npm run prisma:seed-mau -w @documenso/prisma"
   },
   "packageManager": "npm@10.7.0",
   "engines": {

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

@@ -94,21 +94,24 @@ export const getUserWithSignedDocumentMonthlyGrowth = async () => {
 export type GetMonthlyActiveUsersResult = Array<{
   month: string;
   count: number;
+  cume_count: number;
 }>;
 
 type GetMonthlyActiveUsersQueryResult = Array<{
   month: Date;
   count: bigint;
+  cume_count: bigint;
 }>;
 
 export const getMonthlyActiveUsers = async () => {
   const result = await prisma.$queryRaw<GetMonthlyActiveUsersQueryResult>`
       SELECT
         DATE_TRUNC('month', "lastSignedIn") AS "month",
-        COUNT(DISTINCT "id") as "count"
+        COUNT(DISTINCT "id") as "count",
+        SUM(COUNT(DISTINCT "id")) OVER (ORDER BY DATE_TRUNC('month', "lastSignedIn")) as "cume_count"
       FROM "User"
       WHERE "lastSignedIn" >= NOW() - INTERVAL '1 year'
-      GROUP BY "month"
+      GROUP BY DATE_TRUNC('month', "lastSignedIn")
       ORDER BY "month" DESC
       LIMIT 12
   `;
@@ -116,5 +119,6 @@ export const getMonthlyActiveUsers = async () => {
   return result.map((row) => ({
     month: DateTime.fromJSDate(row.month).toFormat('yyyy-MM'),
     count: Number(row.count),
+    cume_count: Number(row.cume_count),
   }));
 };

packages/prisma/mau-seed.ts

@@ -0,0 +1,62 @@
+import { DateTime } from 'luxon';
+
+import { hashSync } from '@documenso/lib/server-only/auth/hash';
+
+import { prisma } from '.';
+import { Role } from './client';
+
+const USERS_PER_MONTH = 20;
+const MONTHS_OF_HISTORY = 12;
+
+export const seedMAUData = async () => {
+  const now = DateTime.now();
+
+  for (let monthsAgo = MONTHS_OF_HISTORY - 1; monthsAgo >= 0; monthsAgo--) {
+    const monthStart = now.minus({ months: monthsAgo }).startOf('month');
+    const monthEnd = monthStart.endOf('month');
+
+    console.log(`Seeding users for ${monthStart.toFormat('yyyy-MM')}`);
+
+    const users = await Promise.all(
+      Array.from({ length: USERS_PER_MONTH }).map(async (_, index) => {
+        const createdAt = DateTime.fromMillis(
+          monthStart.toMillis() + Math.random() * (monthEnd.toMillis() - monthStart.toMillis()),
+        ).toJSDate();
+
+        const lastSignedIn =
+          Math.random() > 0.3
+            ? DateTime.fromMillis(
+                createdAt.getTime() + Math.random() * (now.toMillis() - createdAt.getTime()),
+              ).toJSDate()
+            : createdAt;
+
+        return prisma.user.create({
+          data: {
+            name: `MAU Test User ${monthsAgo}-${index}`,
+            email: `mau-test-${monthsAgo}-${index}@documenso.com`,
+            password: hashSync('password'),
+            emailVerified: createdAt,
+            createdAt,
+            lastSignedIn,
+            roles: [Role.USER],
+          },
+        });
+      }),
+    );
+
+    console.log(`Created ${users.length} users for ${monthStart.toFormat('yyyy-MM')}`);
+  }
+};
+
+// Run the seed if this file is executed directly
+if (require.main === module) {
+  seedMAUData()
+    .then(() => {
+      console.log('MAU seed completed successfully');
+      process.exit(0);
+    })
+    .catch((error) => {
+      console.error('Error seeding MAU data:', error);
+      process.exit(1);
+    });
+}

packages/prisma/package.json

@@ -15,7 +15,8 @@
     "prisma:migrate-deploy": "prisma migrate deploy",
     "prisma:migrate-reset": "prisma migrate reset",
     "prisma:seed": "prisma db seed",
-    "prisma:studio": "prisma studio"
+    "prisma:studio": "prisma studio",
+    "prisma:seed-mau": "tsx ./mau-seed.ts"
   },
   "prisma": {
     "seed": "tsx ./seed-database.ts"