chore: custom tooltip since it's hiding values under other charts

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

@@ -106,11 +106,16 @@ export default async function AdminStatsPage() {
       <div className="mt-16">
         <h3 className="text-3xl font-semibold">Charts</h3>
         <div className="mt-5 grid grid-cols-2 gap-10">
-          <UserWithDocumentChart data={MONTHLY_USERS_SIGNED} title="MAU (created document)" />
+          <UserWithDocumentChart
+            data={MONTHLY_USERS_SIGNED}
+            title="MAU (created document)"
+            tooltip="Monthly Active Users: Users that created at least one Document"
+          />
           <UserWithDocumentChart
             data={MONTHLY_USERS_SIGNED}
             completed
             title="MAU (had document completed)"
+            tooltip="Monthly Active Users: Users that had at least one of their documents completed"
           />
         </div>
       </div>

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

@@ -2,6 +2,8 @@
 
 import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import type { TooltipProps } from 'recharts';
+import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
 
 import type { GetUserWithDocumentMonthlyGrowth } from '@documenso/lib/server-only/admin/get-users-stats';
 
@@ -13,6 +15,27 @@ export type UserWithDocumentChartProps = {
   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 UserWithDocumentChart = ({
   className,
   data,
@@ -45,15 +68,15 @@ export const UserWithDocumentChart = ({
         </div>
 
         <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={formattedData(data, completed)}>
+          <BarChart className="bg-white" data={formattedData(data, completed)}>
             <XAxis dataKey="month" />
             <YAxis />
 
             <Tooltip
+              content={<CustomTooltip tooltip={tooltip} />}
               labelStyle={{
                 color: 'hsl(var(--primary-foreground))',
               }}
-              formatter={(value) => [Number(value).toLocaleString('en-US'), tooltip]}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />