Skip to content

Commit 3e0c1d3

Browse files
alrocaralrocar
authored
Merge pull request #35 from tinybirdco/auth0dash
new auth0 charts
2 parents 5ef40c9 + 74147f4 commit 3e0c1d3

File tree

7 files changed

+250
-25
lines changed

7 files changed

+250
-25
lines changed

‎apps/web/src/components/tools/auth0/auth-mech-chart.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ import {
1414
} from "@/components/ui/chart"
1515
import { Bar, BarChart, XAxis, YAxis } from "recharts"
1616

17-
interface AuthMechData {
17+
export interface AuthMechDataPoint {
1818
mech: string
1919
logins: number
2020
}
2121

22-
interface AuthMechChartProps {
23-
data: AuthMechData[]
22+
export interface AuthMechChartData {
23+
data: AuthMechDataPoint[]
2424
}
2525

2626
const chartConfig = {
@@ -30,7 +30,7 @@ const chartConfig = {
3030
},
3131
} satisfies ChartConfig
3232

33-
export function AuthMechChart({ data }: AuthMechChartProps) {
33+
export function AuthMechChart({ data }: AuthMechChartData) {
3434
// Sort data by number of logins in descending order
3535
const sortedData = [...data].sort((a, b) => b.logins - a.logins)
3636

@@ -45,7 +45,7 @@ export function AuthMechChart({ data }: AuthMechChartProps) {
4545
data={sortedData}
4646
layout="vertical"
4747
margin={{
48-
left: 80,
48+
left: 24,
4949
right: 12,
5050
top: 12,
5151
bottom: 12,

‎apps/web/src/components/tools/auth0/daily-login-fails-chart.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
"use client"
2+
3+
import {
4+
Card,
5+
CardContent,
6+
CardHeader,
7+
CardTitle,
8+
} from "@/components/ui/card"
9+
import {
10+
ChartContainer,
11+
ChartTooltip,
12+
ChartConfig,
13+
ChartTooltipContent
14+
} from "@/components/ui/chart"
15+
import { Line, LineChart, XAxis, YAxis } from "recharts"
16+
17+
export interface DailyLoginFailsDataPoint {
18+
day: string
19+
fails: number
20+
}
21+
22+
export interface DailyLoginFailsChartData {
23+
data: DailyLoginFailsDataPoint[]
24+
}
25+
26+
const chartConfig = {
27+
fails: {
28+
color: "hsl(var(--primary))",
29+
label: "Login Fails",
30+
},
31+
} satisfies ChartConfig
32+
33+
export function DailyLoginFailsChart({ data }: DailyLoginFailsChartData) {
34+
return (
35+
<Card>
36+
<CardHeader>
37+
<CardTitle>Daily Login Fails</CardTitle>
38+
</CardHeader>
39+
<CardContent className="">
40+
<ChartContainer config={chartConfig} className="h-[400px] w-full">
41+
<LineChart
42+
data={data}
43+
margin={{
44+
left: 48,
45+
right: 12,
46+
top: 12,
47+
bottom: 32
48+
}}
49+
>
50+
<XAxis
51+
dataKey="day"
52+
tickLine={false}
53+
axisLine={false}
54+
tickMargin={8}
55+
interval="equidistantPreserveStart"
56+
tickFormatter={(value) => value.split('-')[2]}
57+
label={{
58+
value: "Day of Month",
59+
position: "bottom",
60+
offset: 20
61+
}}
62+
/>
63+
<YAxis
64+
tickLine={false}
65+
axisLine={false}
66+
tickMargin={8}
67+
label={{
68+
value: "Login Fails",
69+
angle: -90,
70+
position: "left",
71+
offset: 32
72+
}}
73+
/>
74+
<ChartTooltip
75+
cursor={false}
76+
content={<ChartTooltipContent indicator="dot" />}
77+
/>
78+
<Line
79+
type="monotone"
80+
dataKey="fails"
81+
strokeWidth={2}
82+
activeDot={{
83+
r: 4,
84+
style: { fill: "hsl(var(--primary))" },
85+
}}
86+
style={{
87+
stroke: "hsl(var(--primary))",
88+
}}
89+
/>
90+
</LineChart>
91+
</ChartContainer>
92+
</CardContent>
93+
</Card>
94+
)
95+
}

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
"use client"
2+
3+
import {
4+
Card,
5+
CardContent,
6+
CardHeader,
7+
CardTitle,
8+
} from "@/components/ui/card"
9+
import {
10+
ChartContainer,
11+
ChartTooltip,
12+
ChartConfig,
13+
ChartTooltipContent
14+
} from "@/components/ui/chart"
15+
import { Line, LineChart, XAxis, YAxis } from "recharts"
16+
17+
export interface DailySignupsDataPoint {
18+
day: string
19+
signups: number
20+
}
21+
22+
export interface DailySignupsChartData {
23+
data: DailySignupsDataPoint[]
24+
}
25+
26+
const chartConfig = {
27+
signups: {
28+
color: "hsl(var(--primary))",
29+
label: "Signups",
30+
},
31+
} satisfies ChartConfig
32+
33+
export function DailySignupsChart({ data }: DailySignupsChartData) {
34+
return (
35+
<Card>
36+
<CardHeader>
37+
<CardTitle>Daily Signups</CardTitle>
38+
</CardHeader>
39+
<CardContent className="">
40+
<ChartContainer config={chartConfig} >
41+
<LineChart
42+
data={data}
43+
margin={{
44+
left: 48,
45+
right: 12,
46+
top: 12,
47+
bottom: 32
48+
}}
49+
>
50+
<XAxis
51+
dataKey="day"
52+
tickLine={false}
53+
axisLine={false}
54+
tickMargin={8}
55+
interval="equidistantPreserveStart"
56+
tickFormatter={(value) => value.split('-')[2]}
57+
label={{
58+
value: "Day of Month",
59+
position: "bottom",
60+
offset: 20
61+
}}
62+
/>
63+
<YAxis
64+
tickLine={false}
65+
axisLine={false}
66+
tickMargin={8}
67+
label={{
68+
value: "Signups",
69+
angle: -90,
70+
position: "left",
71+
offset: 32
72+
}}
73+
/>
74+
<ChartTooltip
75+
cursor={false}
76+
content={<ChartTooltipContent indicator="dot" />}
77+
/>
78+
<Line
79+
type="monotone"
80+
dataKey="signups"
81+
strokeWidth={2}
82+
activeDot={{
83+
r: 4,
84+
style: { fill: "hsl(var(--primary))" },
85+
}}
86+
style={{
87+
stroke: "hsl(var(--primary))",
88+
}}
89+
/>
90+
</LineChart>
91+
</ChartContainer>
92+
</CardContent>
93+
</Card>
94+
)
95+
}

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

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,10 @@ import { useQueryState } from 'nuqs'
44
import { useEffect, useState } from 'react'
55
import { pipe } from '@/lib/tinybird'
66
import MetricCard from './metric'
7-
import { DauChart } from './dau-chart'
8-
import { AuthMechChart } from './auth-mech-chart'
9-
10-
interface DauDataPoint {
11-
day: string
12-
active: number
13-
}
14-
15-
interface AuthMechData {
16-
mech: string
17-
logins: number
18-
}
7+
import { DauChart, DauDataPoint } from './dau-chart'
8+
import { AuthMechChart, AuthMechDataPoint } from './auth-mech-chart'
9+
import { DailySignupsChart, DailySignupsDataPoint } from './daily-signups-chart'
10+
import { DailyLoginFailsChart, DailyLoginFailsDataPoint } from './daily-login-fails-chart'
1911

2012
interface ConversionData {
2113
new_signups: number
@@ -53,7 +45,10 @@ export default function Auth0Dashboard() {
5345
const [monthlyMau, setMonthlyMau] = useState<number>(0)
5446
const [conversionRate, setConversionRate] = useState<number>(0)
5547
const [dauData, setDauData] = useState<DauDataPoint[]>([])
56-
const [authMechData, setAuthMechData] = useState<AuthMechData[]>([])
48+
const [authMechData, setAuthMechData] = useState<AuthMechDataPoint[]>([])
49+
const [dailySignupsData, setDailySignupsData] = useState<DailySignupsDataPoint[]>([])
50+
const [dailyLoginFailsData, setDailyLoginFailsData] = useState<DailyLoginFailsDataPoint[]>([])
51+
5752

5853
useEffect(() => {
5954
async function fetchMetrics() {
@@ -69,7 +64,9 @@ export default function Auth0Dashboard() {
6964
monthlyMauResult,
7065
dauResult,
7166
authMechResult,
72-
conversionResult
67+
conversionResult,
68+
dailySignupsResult,
69+
dailyLoginFailsResult
7370
] = await Promise.all([
7471
pipe<UsersResult>(token, 'auth0_users_total'),
7572
pipe(token, 'auth0_applications'),
@@ -78,8 +75,10 @@ export default function Auth0Dashboard() {
7875
pipe(token, 'auth0_signups'),
7976
pipe(token, 'auth0_mau'),
8077
pipe<{ data: DauDataPoint[] }>(token, 'auth0_dau_ts'),
81-
pipe<{ data: AuthMechData[] }>(token, 'auth0_mech_usage'),
82-
pipe<{ data: ConversionData[] }>(token, 'auth0_conversion_rate')
78+
pipe<{ data: AuthMechDataPoint[] }>(token, 'auth0_mech_usage'),
79+
pipe<{ data: ConversionData[] }>(token, 'auth0_conversion_rate'),
80+
pipe<{ data: DailySignupsDataPoint[] }>(token, 'auth0_daily_signups'),
81+
pipe<{ data: DailyLoginFailsDataPoint[] }>(token, 'auth0_daily_login_fails')
8382
])
8483

8584
setSummaryMetrics({
@@ -93,6 +92,8 @@ export default function Auth0Dashboard() {
9392
setConversionRate(conversionResult.data[0]?.conversion_rate || 0)
9493
setDauData(dauResult.data)
9594
setAuthMechData(authMechResult.data)
95+
setDailySignupsData(dailySignupsResult.data)
96+
setDailyLoginFailsData(dailyLoginFailsResult.data)
9697
} catch (error) {
9798
console.error('Failed to fetch metrics:', error)
9899
}
@@ -143,9 +144,15 @@ export default function Auth0Dashboard() {
143144
</div>
144145

145146
{/* Charts Grid */}
146-
<div className="grid gap-4 md:grid-cols-2">
147+
<div className="grid gap-4 grid-cols-1">
147148
<DauChart data={dauData} />
149+
</div>
150+
<div className="grid gap-4 md:grid-cols-1 xl:grid-cols-2">
148151
<AuthMechChart data={authMechData} />
152+
<DailySignupsChart data={dailySignupsData} />
153+
</div>
154+
<div className="grid gap-4 grid-cols-1">
155+
<DailyLoginFailsChart data={dailyLoginFailsData} />
149156
</div>
150157
</div>
151158
)

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ import {
1414
} from "@/components/ui/chart"
1515
import { Line, LineChart, XAxis, YAxis } from "recharts"
1616

17-
interface DauDataPoint {
17+
export interface DauDataPoint {
1818
day: string
1919
active: number
2020
}
2121

22-
interface DauChartData {
22+
export interface DauChartData {
2323
data: DauDataPoint[]
2424
}
2525

@@ -37,7 +37,7 @@ export function DauChart({ data }: DauChartData) {
3737
<CardTitle>Daily Active Users</CardTitle>
3838
</CardHeader>
3939
<CardContent className="">
40-
<ChartContainer config={chartConfig} >
40+
<ChartContainer config={chartConfig} className="h-[400px] w-full">
4141
<LineChart
4242
data={data}
4343
margin={{

‎tinybird/pipes/auth0_daily_login_fails.pipe‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
TOKEN "read" READ
2+
3+
TAGS "auth0"
4+
5+
NODE ep
6+
SQL >
7+
8+
SELECT toDate(toStartOfDay(event_time)) as day, count() as fails
9+
FROM auth0
10+
where event_type == 'f' and event_time >= now() - interval 30 days
11+
group by day
12+
order by day asc
13+
14+

‎tinybird/pipes/auth0_daily_signups.pipe‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
TOKEN "read" READ
2+
3+
TAGS "auth0"
4+
5+
NODE ep
6+
SQL >
7+
8+
SELECT toDate(toStartOfDay(event_time)) as day, count() as signups
9+
FROM auth0
10+
WHERE event_type = 'ss' and event_time >= now() - interval 30 days
11+
GROUP BY day
12+
order by day asc
13+
14+

0 commit comments

Comments
 (0)