Merge pull request #33 from tinybirdco/fixes01

add axis

Author: alrocar

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 .venv
 .tinyb
+.tmp

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

@@ -17,6 +17,12 @@ interface AuthMechData {
     logins: number
 }
 
+interface ConversionData {
+    new_signups: number
+    active_new_users: number
+    conversion_rate: number
+}
+
 export default function Auth0Dashboard() {
     const [token] = useQueryState('token')
     const [monthlySignUps, setMonthlySignUps] = useState<number>(0)
@@ -30,16 +36,17 @@ export default function Auth0Dashboard() {
             if (!token) return
 
             try {
-                const [monthlySignUpsResult, monthlyMauResult, dauResult, authMechResult] = await Promise.all([
+                const [monthlySignUpsResult, monthlyMauResult, dauResult, authMechResult, conversionResult] = await Promise.all([
                     pipe(token, 'auth0_signups'),
                     pipe(token, 'auth0_mau'),
                     pipe<{ data: DauDataPoint[] }>(token, 'auth0_dau_ts'),
-                    pipe<{ data: AuthMechData[] }>(token, 'auth0_mech_usage')
+                    pipe<{ data: AuthMechData[] }>(token, 'auth0_mech_usage'),
+                    pipe<{ data: ConversionData[] }>(token, 'auth0_conversion_rate')
                 ])
 
                 setMonthlySignUps(monthlySignUpsResult.data[0]?.total || 0)
                 setMonthlyMau(monthlyMauResult.data[0]?.active || 0)
-                setConversionRate(0)
+                setConversionRate(conversionResult.data[0]?.conversion_rate || 0)
                 setDauData(dauResult.data)
                 setAuthMechData(authMechResult.data)
             } catch (error) {
@@ -67,7 +74,7 @@ export default function Auth0Dashboard() {
                 <MetricCard
                     title="Conversion Rate"
                     value={`${conversionRate}%`}
-                    description="Active users / Total users"
+                    description="New users who became active in the last 30 days"
                 />
             </div>
 

apps/web/src/components/tools/auth0/dau-chart.tsx

@@ -12,7 +12,7 @@ import {
     ChartConfig,
     ChartTooltipContent
 } from "@/components/ui/chart"
-import { Line, LineChart, XAxis } from "recharts"
+import { Line, LineChart, XAxis, YAxis } from "recharts"
 
 interface DauDataPoint {
     day: string
@@ -41,8 +41,10 @@ export function DauChart({ data }: DauChartData) {
                     <LineChart
                         data={data}
                         margin={{
-                            left: 12,
+                            left: 48,
                             right: 12,
+                            top: 12,
+                            bottom: 32
                         }}
                     >
                         <XAxis
@@ -52,37 +54,27 @@ export function DauChart({ data }: DauChartData) {
                             tickMargin={8}
                             interval="equidistantPreserveStart"
                             tickFormatter={(value) => value.split('-')[2]}
+                            label={{
+                                value: "Day of Month",
+                                position: "bottom",
+                                offset: 20
+                            }}
+                        />
+                        <YAxis
+                            tickLine={false}
+                            axisLine={false}
+                            tickMargin={8}
+                            label={{
+                                value: "Active Users",
+                                angle: -90,
+                                position: "left",
+                                offset: 32
+                            }}
                         />
                         <ChartTooltip
                             cursor={false}
                             content={<ChartTooltipContent indicator="dot" />}
                         />
-                        {/* <ChartTooltip content={({ payload }) => {
-                            if (!payload?.length) return null
-
-                            return (
-                                <div className="rounded-lg border bg-background p-2 shadow-sm">
-                                    <div className="grid grid-cols-2 gap-2">
-                                        <div className="flex flex-col">
-                                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                                                Date
-                                            </span>
-                                            <span className="font-bold text-muted-foreground">
-                                                {payload[0].payload.day}
-                                            </span>
-                                        </div>
-                                        <div className="flex flex-col">
-                                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                                                Active Users
-                                            </span>
-                                            <span className="font-bold">
-                                                {payload[0].value}
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            )
-                        }} /> */}
                         <Line
                             type="monotone"
                             dataKey="active"

tinybird/pipes/auth0_conversion_rate.pipe

@@ -0,0 +1,24 @@
+TOKEN "read" READ
+
+NODE get_conversion
+SQL >
+
+    SELECT
+        count(DISTINCT signups.user_id) as new_signups,
+        count(DISTINCT logins.user_id) as active_new_users,
+        ROUND(
+            count(DISTINCT logins.user_id) / count(DISTINCT signups.user_id) * 100, 1
+        ) as conversion_rate
+    FROM
+        (
+            SELECT event.data.user_id as user_id
+            FROM auth0
+            WHERE event_type = 'ss' AND event_time >= now() - interval 30 days
+        ) signups
+    LEFT JOIN
+        (
+            SELECT event.data.user_id as user_id
+            FROM auth0
+            WHERE event_type = 'sl' AND event_time >= now() - interval 30 days
+        ) logins
+        ON signups.user_id = logins.user_id