Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-19 11:12:06 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: mau

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2025-01-28 15:29:36 +00:00
parent 68c8eba2c3
commit 6993c52b2a
7 changed files with 145 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
apps/web/src/app/(dashboard)/admin/stats/mau.tsx Normal file
View File

@ -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>
);
};

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

@ -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>
);
};

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

@ -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)`)}

3
package.json
View File

@ -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": {

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

@ -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),
}));
};

62
packages/prisma/mau-seed.ts Normal file
View File

@ -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);
});
}

3
packages/prisma/package.json
View File

@ -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"