blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

chore: include total and new user charts

Browse Source
This commit is contained in:
Mythie
2023-11-06 11:57:38 +11:00
parent d27880b56b
commit 2e9180acf5
5 changed files with 65 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/marketing/src/app/(marketing)/open/monthly-users-chart.tsx → apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx
View File

@ -6,12 +6,12 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recha
import { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
import { cn } from '@documenso/ui/lib/utils';
export type MonthlyUsersChartProps = {
export type MonthlyNewUsersChartProps = {
className?: string;
data: GetUserMonthlyGrowthResult;
};
export const MonthlyUsersChart = ({ className, data }: MonthlyUsersChartProps) => {
export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartProps) => {
const formattedData = [...data].reverse().map(({ month, count }) => {
return {
month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
@ -32,7 +32,7 @@ export const MonthlyUsersChart = ({ className, data }: MonthlyUsersChartProps) =
<YAxis />
<Tooltip
formatter={(value) => [Number(value).toLocaleString('en-US'), 'Total Users']}
formatter={(value) => [Number(value).toLocaleString('en-US'), 'New Users']}
cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
/>

51
apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx Normal file
View File

@ -0,0 +1,51 @@
'use client';
import { DateTime } from 'luxon';
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
import { cn } from '@documenso/ui/lib/utils';
export type MonthlyTotalUsersChartProps = {
className?: string;
data: GetUserMonthlyGrowthResult;
};
export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersChartProps) => {
const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
return {
month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
count: Number(count),
};
});
return (
<div className={cn('flex flex-col', className)}>
<div className="flex items-center px-4">
<h3 className="text-lg font-semibold">Monthly Total Users</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
formatter={(value) => [Number(value).toLocaleString('en-US'), 'Total Users']}
cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
/>
<Bar
dataKey="count"
fill="hsl(var(--primary))"
radius={[4, 4, 0, 0]}
maxBarSize={60}
label="Total Users"
/>
</BarChart>
</ResponsiveContainer>
</div>
</div>
);
};

6
apps/marketing/src/app/(marketing)/open/page.tsx
View File

@ -9,7 +9,8 @@ import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
import { BarMetric } from './bar-metrics';
import { CapTable } from './cap-table';
import { FundingRaised } from './funding-raised';
import { MonthlyUsersChart } from './monthly-users-chart';
import { MonthlyNewUsersChart } from './monthly-new-users-chart';
import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
import { TeamMembers } from './team-members';
import { OpenPageTooltip } from './tooltip';
@ -183,7 +184,8 @@ export default async function OpenPage() {
className="col-span-12 lg:col-span-6"
/>
<MonthlyUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
<MonthlyTotalUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
<MonthlyNewUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
<div className="col-span-12 mt-12 flex flex-col items-center justify-center">
<h2 className="text-2xl font-bold">Where's the rest?</h2>

4
apps/marketing/src/app/(marketing)/open/tooltip.tsx
View File

@ -23,8 +23,8 @@ export function OpenPageTooltip() {
<path
d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
></path>
</svg>
</TooltipTrigger>

8
packages/lib/server-only/user/get-user-monthly-growth.ts
View File

@ -5,28 +5,30 @@ import { prisma } from '@documenso/prisma';
export type GetUserMonthlyGrowthResult = Array<{
month: string;
count: number;
cume_count: number;
}>;
type GetUserMonthlyGrowthQueryResult = Array<{
month: Date;
count: bigint;
cume_count: bigint;
}>;
export const getUserMonthlyGrowth = async () => {
const result = await prisma.$queryRaw<GetUserMonthlyGrowthQueryResult>`
SELECT
DATE_TRUNC('month', "createdAt") AS "month",
COUNT("id") AS "count"
COUNT("id") as "count",
SUM(COUNT("id")) OVER (ORDER BY DATE_TRUNC('month', "createdAt")) as "cume_count"
FROM "User"
GROUP BY "month"
ORDER BY "month" DESC
LIMIT 12
`;
console.log('result', result);
return result.map((row) => ({
month: DateTime.fromJSDate(row.month).toFormat('yyyy-MM'),
count: Number(row.count),
cume_count: Number(row.cume_count),
}));
};