chore: wip

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

@@ -0,0 +1,84 @@
+'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

@@ -19,6 +19,7 @@ import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getDocumentStats } from '@documenso/lib/server-only/admin/get-documents-stats';
 import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
 import {
+  getMonthlyActiveUsers,
   getUserWithSignedDocumentMonthlyGrowth,
   getUsersCount,
   getUsersWithLastSignedInCount,
@@ -28,6 +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 { SignerConversionChart } from './signer-conversion-chart';
 import { UserWithDocumentChart } from './user-with-document';
 
@@ -46,6 +48,7 @@ export default async function AdminStatsPage() {
     // userWithAtLeastOneDocumentSignedPerMonth,
     MONTHLY_USERS_SIGNED,
     usersWithLastSignedInCount,
+    monthlyActiveUsers,
   ] = await Promise.all([
     getUsersCount(),
     getUsersWithSubscriptionsCount(),
@@ -56,6 +59,7 @@ export default async function AdminStatsPage() {
     // getUserWithAtLeastOneDocumentSignedPerMonth(),
     getUserWithSignedDocumentMonthlyGrowth(),
     getUsersWithLastSignedInCount(),
+    getMonthlyActiveUsers(),
   ]);
 
   return (
@@ -140,6 +144,11 @@ export default async function AdminStatsPage() {
           <Trans>Charts</Trans>
         </h3>
         <div className="mt-5 grid grid-cols-2 gap-8">
+          <MonthlyActiveUsersChart
+            title={_(msg`Monthly Active Users (signed in)`)}
+            data={monthlyActiveUsers}
+            tooltip={_(msg`Number of users who signed in each month`)}
+          />
           <UserWithDocumentChart
             data={MONTHLY_USERS_SIGNED}
             title={_(msg`MAU (created document)`)}

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

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