chore: add tooltip

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

@@ -1,7 +1,9 @@
 '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';
 
@@ -12,6 +14,22 @@ export type MonthlyActiveUsersChartProps = {
   data: GetMonthlyActiveUsersResult;
 };
 
+const CustomTooltip = ({ active, payload, label }: TooltipProps<ValueType, NameType>) => {
+  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>{label}</p>
+        <p className="text-documenso">
+          {payload[0].name === 'cume_count' ? 'Cumulative MAU' : 'Monthly Active Users'}:{' '}
+          <span className="text-black">{Number(payload[0].value).toLocaleString('en-US')}</span>
+        </p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
 export const MonthlyActiveUsersChart = ({
   className,
   data,
@@ -38,16 +56,7 @@ export const MonthlyActiveUsersChart = ({
             <XAxis dataKey="month" />
             <YAxis />
 
-            <Tooltip
+            <Tooltip content={<CustomTooltip />} cursor={{ fill: 'hsl(var(--primary) / 10%)' }} />
-              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'}

apps/web/src/app/(dashboard)/admin/stats/user-with-document.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { DateTime } from 'luxon';
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 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 { GetUserWithDocumentMonthlyGrowth } from '@documenso/lib/server-only/admin/get-users-stats';