Skip to content

Commit 890af4c

Browse files
alrocaralrocar
committed
more filters
1 parent a9ed485 commit 890af4c

12 files changed

+210
-59
lines changed

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export interface AuthMechDataPoint {
2121

2222
export interface AuthMechChartData {
2323
data: AuthMechDataPoint[]
24+
className?: string
2425
}
2526

2627
const chartConfig = {
@@ -30,7 +31,7 @@ const chartConfig = {
3031
},
3132
} satisfies ChartConfig
3233

33-
export function AuthMechChart({ data }: AuthMechChartData) {
34+
export function AuthMechChart({ data, className }: AuthMechChartData) {
3435
// Sort data by number of logins in descending order
3536
const sortedData = [...data].sort((a, b) => b.logins - a.logins)
3637

@@ -40,24 +41,24 @@ export function AuthMechChart({ data }: AuthMechChartData) {
4041
<CardTitle>Authentication Methods</CardTitle>
4142
</CardHeader>
4243
<CardContent>
43-
<ChartContainer config={chartConfig}>
44+
<ChartContainer config={chartConfig} className={`w-full ${className}`}>
4445
<BarChart
4546
data={sortedData}
46-
layout="vertical"
47+
layout="horizontal"
4748
margin={{
4849
left: 24,
4950
right: 12,
5051
top: 12,
5152
bottom: 12,
5253
}}
5354
>
54-
<XAxis
55+
<YAxis
5556
type="number"
5657
tickLine={false}
5758
axisLine={false}
5859
tickMargin={8}
5960
/>
60-
<YAxis
61+
<XAxis
6162
type="category"
6263
dataKey="mech"
6364
tickLine={false}

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

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
ChartConfig,
1313
ChartTooltipContent
1414
} from "@/components/ui/chart"
15-
import { Line, LineChart, XAxis, YAxis } from "recharts"
15+
import { Line, LineChart, XAxis, YAxis, CartesianGrid } from "recharts"
1616
import { format } from "date-fns"
1717

1818
export interface DailyLoginFailsDataPoint {
@@ -23,6 +23,7 @@ export interface DailyLoginFailsDataPoint {
2323
export interface DailyLoginFailsChartData {
2424
data: DailyLoginFailsDataPoint[]
2525
timeRange: 'hourly' | 'daily' | 'monthly'
26+
className?: string
2627
}
2728

2829
const chartConfig = {
@@ -32,14 +33,14 @@ const chartConfig = {
3233
},
3334
} satisfies ChartConfig
3435

35-
export function DailyLoginFailsChart({ data, timeRange }: DailyLoginFailsChartData) {
36+
export function DailyLoginFailsChart({ data, timeRange, className }: DailyLoginFailsChartData) {
3637
return (
3738
<Card>
3839
<CardHeader>
3940
<CardTitle>Login Failures</CardTitle>
4041
</CardHeader>
4142
<CardContent className="">
42-
<ChartContainer config={chartConfig} className="h-[400px] w-full">
43+
<ChartContainer config={chartConfig} className={`w-full ${className}`}>
4344
<LineChart
4445
data={data}
4546
margin={{
@@ -49,6 +50,11 @@ export function DailyLoginFailsChart({ data, timeRange }: DailyLoginFailsChartDa
4950
bottom: 32
5051
}}
5152
>
53+
<CartesianGrid
54+
horizontal={true}
55+
vertical={false}
56+
className="stroke-muted"
57+
/>
5258
<XAxis
5359
dataKey="day"
5460
tickLine={false}
@@ -72,24 +78,17 @@ export function DailyLoginFailsChart({ data, timeRange }: DailyLoginFailsChartDa
7278
axisLine={false}
7379
tickMargin={8}
7480
label={{
75-
value: "Login Fails",
81+
value: "Login Failures",
7682
angle: -90,
7783
position: "left",
7884
offset: 32
7985
}}
8086
/>
81-
<ChartTooltip
82-
cursor={false}
83-
content={<ChartTooltipContent indicator="dot" />}
84-
/>
8587
<Line
8688
type="monotone"
8789
dataKey="fails"
8890
strokeWidth={2}
89-
activeDot={{
90-
r: 4,
91-
style: { fill: "hsl(var(--primary))" },
92-
}}
91+
dot={false}
9392
style={{
9493
stroke: "hsl(var(--primary))",
9594
}}

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
ChartConfig,
1313
ChartTooltipContent
1414
} from "@/components/ui/chart"
15-
import { Line, LineChart, XAxis, YAxis } from "recharts"
15+
import { Line, LineChart, XAxis, YAxis, CartesianGrid } from "recharts"
1616
import { format } from "date-fns"
1717

1818
export interface DailySignupsDataPoint {
@@ -23,6 +23,7 @@ export interface DailySignupsDataPoint {
2323
export interface DailySignupsChartData {
2424
data: DailySignupsDataPoint[]
2525
timeRange: 'hourly' | 'daily' | 'monthly'
26+
className?: string
2627
}
2728

2829
const chartConfig = {
@@ -32,14 +33,14 @@ const chartConfig = {
3233
},
3334
} satisfies ChartConfig
3435

35-
export function DailySignupsChart({ data, timeRange }: DailySignupsChartData) {
36+
export function DailySignupsChart({ data, timeRange, className }: DailySignupsChartData) {
3637
return (
3738
<Card>
3839
<CardHeader>
3940
<CardTitle>Signups</CardTitle>
4041
</CardHeader>
4142
<CardContent className="">
42-
<ChartContainer config={chartConfig} className="h-[400px] w-full">
43+
<ChartContainer config={chartConfig} className={`w-full ${className}`}>
4344
<LineChart
4445
data={data}
4546
margin={{
@@ -49,6 +50,11 @@ export function DailySignupsChart({ data, timeRange }: DailySignupsChartData) {
4950
bottom: 32
5051
}}
5152
>
53+
<CartesianGrid
54+
horizontal={true}
55+
vertical={false}
56+
className="stroke-muted"
57+
/>
5258
<XAxis
5359
dataKey="day"
5460
tickLine={false}
@@ -86,10 +92,7 @@ export function DailySignupsChart({ data, timeRange }: DailySignupsChartData) {
8692
type="monotone"
8793
dataKey="signups"
8894
strokeWidth={2}
89-
activeDot={{
90-
r: 4,
91-
style: { fill: "hsl(var(--primary))" },
92-
}}
95+
dot={false}
9396
style={{
9497
stroke: "hsl(var(--primary))",
9598
}}

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

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
import { Separator } from "@/components/ui/separator"
2121
import { Card, CardContent } from "@/components/ui/card"
2222
import { Button } from "@/components/ui/button"
23+
import { UserRetentionChart, UserRetentionDataPoint } from './user-retention-chart'
2324

2425
interface ConversionData {
2526
new_signups: number
@@ -89,6 +90,7 @@ export default function Auth0Dashboard() {
8990
const [applications, setApplications] = useState<Array<{ client_id: string, client_name: string }>>([])
9091
const [connections, setConnections] = useState<Array<{ connection_id: string, connection_name: string }>>([])
9192
const [timeRange, setTimeRange] = useState<'hourly' | 'daily' | 'monthly'>('daily')
93+
const [userRetentionData, setUserRetentionData] = useState<UserRetentionDataPoint[]>([])
9294

9395
useEffect(() => {
9496
async function fetchInitialData() {
@@ -147,6 +149,7 @@ export default function Auth0Dashboard() {
147149
monthlySignupsResult,
148150
monthlyActiveUsersResult,
149151
conversionRateResult,
152+
userRetentionTimeSeriesResult,
150153
dauResult,
151154
dauComparisonResult,
152155
authMechResult,
@@ -164,6 +167,7 @@ export default function Auth0Dashboard() {
164167
pipe(token, 'auth0_signups', thirtyDayParams),
165168
pipe(token, 'auth0_mau', thirtyDayParams),
166169
pipe<ConversionRateResult>(token, 'auth0_conversion_rate', thirtyDayParams),
170+
pipe<{ data: UserRetentionDataPoint[] }>(token, 'auth0_user_retention_ts', params),
167171
pipe<{ data: DauDataPoint[] }>(token, 'auth0_dau_ts', params),
168172
dateRange.compareMode ? pipe<{ data: DauDataPoint[] }>(token, 'auth0_dau_ts', {
169173
...params,
@@ -189,6 +193,7 @@ export default function Auth0Dashboard() {
189193
setAuthMechData(authMechResult?.data ?? [])
190194
setDailySignupsData(dailySignupsResult?.data ?? [])
191195
setDailyLoginFailsData(dailyLoginFailsResult?.data ?? [])
196+
setUserRetentionData(userRetentionTimeSeriesResult?.data ?? [])
192197
} catch (error) {
193198
console.error('Failed to fetch metrics:', error)
194199
}
@@ -272,9 +277,9 @@ export default function Auth0Dashboard() {
272277
description="Users active in the last 30 days"
273278
/>
274279
<MetricCard
275-
title="Conversion Rate"
280+
title="New Signups Rate"
276281
value={`${summaryMetrics.conversion_rate}%`}
277-
description="New users who became active in the last 30 days"
282+
description="New users compared to total users"
278283
/>
279284
</div>
280285

@@ -316,21 +321,33 @@ export default function Auth0Dashboard() {
316321
data={dauData}
317322
comparisonData={dateRange.compareMode ? dauComparisonData : undefined}
318323
timeRange={timeRange}
324+
className="h-[300px]"
319325
/>
320326
</div>
321327
<div className="grid gap-4 md:grid-cols-1 xl:grid-cols-2">
322-
<AuthMechChart data={authMechData} />
328+
<UserRetentionChart
329+
data={userRetentionData}
330+
timeRange={timeRange}
331+
className="h-[300px]"
332+
/>
323333
<DailySignupsChart
324334
data={dailySignupsData}
325335
timeRange={timeRange}
336+
className="h-[300px]"
326337
/>
327338
</div>
328-
<div className="grid gap-4 grid-cols-1">
339+
<div className="grid gap-4 md:grid-cols-1 xl:grid-cols-2">
329340
<DailyLoginFailsChart
330341
data={dailyLoginFailsData}
331342
timeRange={timeRange}
343+
className="h-[300px]"
344+
/>
345+
<AuthMechChart
346+
data={authMechData}
347+
className="h-[300px]"
332348
/>
333349
</div>
350+
334351
</div>
335352
)
336353
}

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
ChartConfig,
1313
ChartTooltipContent
1414
} from "@/components/ui/chart"
15-
import { Line, LineChart, XAxis, YAxis } from "recharts"
15+
import { Line, LineChart, XAxis, YAxis, CartesianGrid } from "recharts"
1616
import { format } from "date-fns"
1717

1818
export interface DauDataPoint {
@@ -24,6 +24,7 @@ export interface DauChartData {
2424
data: DauDataPoint[]
2525
comparisonData?: DauDataPoint[]
2626
timeRange: 'hourly' | 'daily' | 'monthly'
27+
className?: string
2728
}
2829

2930
const chartConfig = {
@@ -33,14 +34,14 @@ const chartConfig = {
3334
},
3435
} satisfies ChartConfig
3536

36-
export function DauChart({ data, comparisonData, timeRange }: DauChartData) {
37+
export function DauChart({ data, comparisonData, timeRange, className }: DauChartData) {
3738
return (
3839
<Card>
3940
<CardHeader>
4041
<CardTitle>Active Users</CardTitle>
4142
</CardHeader>
4243
<CardContent className="">
43-
<ChartContainer config={chartConfig} className="h-[400px] w-full">
44+
<ChartContainer config={chartConfig} className={`h-[400px] w-full ${className}`}>
4445
<LineChart
4546
data={data}
4647
margin={{
@@ -50,6 +51,11 @@ export function DauChart({ data, comparisonData, timeRange }: DauChartData) {
5051
bottom: 32
5152
}}
5253
>
54+
<CartesianGrid
55+
horizontal={true}
56+
vertical={false}
57+
className="stroke-muted"
58+
/>
5359
<XAxis
5460
dataKey="day"
5561
tickLine={false}

0 commit comments

Comments
 (0)