add cumulative signups

Author: alrocar

apps/web/src/components/tools/auth0/cumulative-signups-chart.tsx

@@ -0,0 +1,73 @@
+import { BarChart, Bar, XAxis, YAxis } from 'recharts'
+import { ChartContainer, ChartTooltip, ChartConfig, ChartTooltipContent } from '@/components/ui/chart'
+
+interface SignupData {
+    day: string
+    new_users: number
+    cumulative_users: number
+}
+
+interface CumulativeSignupsChartProps {
+    data: SignupData[]
+    isLoading: boolean
+    className?: string
+}
+
+const chartConfig = {
+    cumulative_users: {
+        color: "hsl(var(--primary))",
+        label: "Total Users",
+    },
+    new_users: {
+        color: "hsl(var(--secondary))",
+        label: "New Users",
+    },
+} satisfies ChartConfig
+
+export function CumulativeSignupsChart({ data, isLoading, className }: CumulativeSignupsChartProps) {
+    if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
+    if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
+
+    return (
+        <ChartContainer config={chartConfig} className={`w-full ${className}`}>
+            <BarChart 
+                data={data} 
+                margin={{
+                    left: 24,
+                    right: 12,
+                    top: 12,
+                    bottom: 24,
+                }}
+            >
+                <XAxis 
+                    dataKey="day"
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                />
+                <YAxis 
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                    width={70}
+                />
+                <ChartTooltip
+                    content={<ChartTooltipContent />}
+                    cursor={{ fill: "hsl(var(--muted))", opacity: 0.2 }}
+                />
+                <Bar 
+                    dataKey="cumulative_users" 
+                    fill="hsl(var(--primary))"
+                    radius={[4, 4, 0, 0]}
+                    stackId="a"
+                />
+                <Bar 
+                    dataKey="new_users" 
+                    fill="hsl(var(--secondary))"
+                    radius={[4, 4, 0, 0]}
+                    stackId="a"
+                />
+            </BarChart>
+        </ChartContainer>
+    )
+} 

apps/web/src/components/tools/auth0/dashboard.tsx

@@ -31,6 +31,7 @@ import {
     CollapsibleTrigger,
 } from "@/components/ui/collapsible"
 import { ChevronDown, ChevronUp } from "lucide-react"
+import { CumulativeSignupsChart } from './cumulative-signups-chart'
 
 interface SummaryMetrics {
     total_users: number
@@ -105,6 +106,7 @@ export default function Auth0Dashboard() {
         unique_emails: number
     }>>([])
     const [isDomainsOpen, setIsDomainsOpen] = useState(false)
+    const [cumulativeSignupsData, setCumulativeSignupsData] = useState<Array<{ day: string; new_users: number; cumulative_users: number }>>([])
 
     useEffect(() => {
         async function fetchInitialData() {
@@ -226,6 +228,9 @@ export default function Auth0Dashboard() {
                 unique_emails: number
             }> ?? [])
             setLogs(logsResult?.data ?? [])
+
+            const cumulativeSignupsResult = await pipe<{ data: Array<{ day: string; new_users: number; cumulative_users: number }> }>(token, 'auth0_cumulative_users', baseParams)
+            setCumulativeSignupsData(cumulativeSignupsResult?.data ?? [])
         } catch (error) {
             console.error('Failed to fetch metrics:', error)
         } finally {
@@ -349,6 +354,18 @@ export default function Auth0Dashboard() {
                     description="New users compared to total users"
                 />
             </div>
+            <Card>
+                <CardHeader>
+                    <CardTitle>Cumulative Signups</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <CumulativeSignupsChart 
+                        data={cumulativeSignupsData ?? []}
+                        isLoading={isLoading}
+                        className="h-[150px]"
+                    />
+                </CardContent>
+            </Card>
 
             <Separator className="my-6" />