From 2e9180acf5af0d9f239ed96b2598b193770cacda Mon Sep 17 00:00:00 2001 From: Mythie Date: Mon, 6 Nov 2023 11:57:38 +1100 Subject: [PATCH] chore: include total and new user charts --- ...-chart.tsx => monthly-new-users-chart.tsx} | 6 +-- .../open/monthly-total-users-chart.tsx | 51 +++++++++++++++++++ .../src/app/(marketing)/open/page.tsx | 6 ++- .../src/app/(marketing)/open/tooltip.tsx | 4 +- .../user/get-user-monthly-growth.ts | 8 +-- 5 files changed, 65 insertions(+), 10 deletions(-) rename apps/marketing/src/app/(marketing)/open/{monthly-users-chart.tsx => monthly-new-users-chart.tsx} (90%) create mode 100644 apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx diff --git a/apps/marketing/src/app/(marketing)/open/monthly-users-chart.tsx b/apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx similarity index 90% rename from apps/marketing/src/app/(marketing)/open/monthly-users-chart.tsx rename to apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx index c35818596..5aae8eeb5 100644 --- a/apps/marketing/src/app/(marketing)/open/monthly-users-chart.tsx +++ b/apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx @@ -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) = [Number(value).toLocaleString('en-US'), 'Total Users']} + formatter={(value) => [Number(value).toLocaleString('en-US'), 'New Users']} cursor={{ fill: 'hsl(var(--primary) / 10%)' }} /> diff --git a/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx b/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx new file mode 100644 index 000000000..3c3f4476a --- /dev/null +++ b/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx @@ -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 ( +
+
+

Monthly Total Users

+
+ +
+ + + + + + [Number(value).toLocaleString('en-US'), 'Total Users']} + cursor={{ fill: 'hsl(var(--primary) / 10%)' }} + /> + + + + +
+
+ ); +}; diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx index f2964c0eb..5317e9644 100644 --- a/apps/marketing/src/app/(marketing)/open/page.tsx +++ b/apps/marketing/src/app/(marketing)/open/page.tsx @@ -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" /> - + +

Where's the rest?

diff --git a/apps/marketing/src/app/(marketing)/open/tooltip.tsx b/apps/marketing/src/app/(marketing)/open/tooltip.tsx index e6bf48a94..0ae92d535 100644 --- a/apps/marketing/src/app/(marketing)/open/tooltip.tsx +++ b/apps/marketing/src/app/(marketing)/open/tooltip.tsx @@ -23,8 +23,8 @@ export function OpenPageTooltip() { diff --git a/packages/lib/server-only/user/get-user-monthly-growth.ts b/packages/lib/server-only/user/get-user-monthly-growth.ts index e39301504..6cbb511b7 100644 --- a/packages/lib/server-only/user/get-user-monthly-growth.ts +++ b/packages/lib/server-only/user/get-user-monthly-growth.ts @@ -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` 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), })); };