Skip to content

Commit 1753993

Browse files
alrocaralrocar
committed
use tinybird charts
1 parent 407dad7 commit 1753993

15 files changed

Lines changed: 363 additions & 905 deletions

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
.tmp
55
.tb_error*
66
tinybird/fixtures
7-
7+
tinybird/tests

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

Lines changed: 34 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,36 @@
1-
"use client"
1+
'use client'
22

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 { Bar, BarChart, XAxis, YAxis } from "recharts"
3+
import { BarList } from '@tinybirdco/charts'
164

17-
export interface AuthMechDataPoint {
18-
mech: string
19-
logins: number
20-
}
21-
22-
export interface AuthMechChartData {
23-
data: AuthMechDataPoint[]
24-
className?: string
25-
}
26-
27-
const chartConfig = {
28-
logins: {
29-
color: "hsl(var(--chart-1))",
30-
label: "Logins",
31-
},
32-
} satisfies ChartConfig
33-
34-
function transformData(data: AuthMechDataPoint[]): (AuthMechDataPoint & { fill: string })[] {
35-
return data.map((item, index) => ({
36-
...item,
37-
fill: `hsl(var(--chart-${(index % 12) + 1}))`
38-
}));
39-
}
40-
41-
export function AuthMechChart({ data, className }: AuthMechChartData) {
42-
const sortedData = transformData([...data].sort((a, b) => b.logins - a.logins))
43-
44-
return (
45-
<Card>
46-
<CardHeader>
47-
<CardTitle>Authentication Methods</CardTitle>
48-
</CardHeader>
49-
<CardContent>
50-
<ChartContainer config={chartConfig} className={`w-full ${className}`}>
51-
<BarChart
52-
data={sortedData}
53-
layout="vertical"
54-
margin={{
55-
left: 24,
56-
right: 12,
57-
top: 12,
58-
bottom: 12,
59-
}}
60-
>
61-
<XAxis
62-
type="number"
63-
tickLine={false}
64-
axisLine={false}
65-
tickMargin={8}
66-
/>
67-
<YAxis
68-
type="category"
69-
dataKey="mech"
70-
tickLine={false}
71-
axisLine={false}
72-
tickMargin={8}
73-
width={70}
74-
/>
75-
<ChartTooltip
76-
content={<ChartTooltipContent />}
77-
cursor={{ fill: "hsl(var(--muted))", opacity: 0.2 }}
78-
/>
79-
<Bar
80-
dataKey="logins"
81-
radius={[4, 4, 4, 4]}
82-
/>
83-
</BarChart>
84-
</ChartContainer>
85-
</CardContent>
86-
</Card>
87-
)
88-
}
5+
export function Auth0TopAuth(params: {
6+
client_id?: string
7+
connection_id?: string
8+
tenant_name?: string
9+
token?: string
10+
date_from?: string
11+
date_to?: string
12+
}) {
13+
return <BarList
14+
endpoint={`${process.env.NEXT_PUBLIC_TINYBIRD_API_HOST}/v0/pipes/auth0_mech_usage.json`}
15+
token={params.token ?? ''}
16+
index="mech"
17+
categories={['logins']}
18+
colorPalette={['#000000']}
19+
height="250px"
20+
params={params}
21+
indexConfig={{
22+
label: 'AUTH',
23+
renderBarContent: ({ label }) => (
24+
<span className="font-normal text-white [text-shadow:2px_1px_0px_#000]">{label}</span>
25+
)
26+
}}
27+
options={{
28+
tooltip: {
29+
backgroundColor: '#fff',
30+
textStyle: {
31+
color: '#333'
32+
}
33+
}
34+
}}
35+
/>
36+
}

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

Lines changed: 21 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,23 @@
1-
import { BarChart, Bar, XAxis, YAxis } from 'recharts'
2-
import { ChartContainer, ChartTooltip, ChartConfig, ChartTooltipContent } from '@/components/ui/chart'
1+
'use client'
32

4-
interface SignupData {
5-
day: string
6-
new_users: number
7-
cumulative_users: number
8-
}
3+
import { BarChart } from '@tinybirdco/charts'
94

10-
interface CumulativeSignupsChartProps {
11-
data: SignupData[]
12-
isLoading: boolean
13-
className?: string
14-
}
15-
16-
const chartConfig = {
17-
cumulative_users: {
18-
color: "hsl(var(--chart-1))",
19-
label: "Total Users",
20-
},
21-
new_users: {
22-
color: "hsl(var(--chart-2))",
23-
label: "New Users",
24-
},
25-
} satisfies ChartConfig
26-
27-
export function CumulativeSignupsChart({ data, isLoading, className }: CumulativeSignupsChartProps) {
28-
if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
29-
if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
30-
31-
return (
32-
<ChartContainer config={chartConfig} className={`w-full ${className}`}>
33-
<BarChart
34-
data={data}
35-
margin={{
36-
left: 24,
37-
right: 12,
38-
top: 12,
39-
bottom: 24,
40-
}}
41-
>
42-
<XAxis
43-
dataKey="day"
44-
tickLine={false}
45-
axisLine={false}
46-
tickMargin={8}
47-
/>
48-
<YAxis
49-
tickLine={false}
50-
axisLine={false}
51-
tickMargin={8}
52-
width={70}
53-
/>
54-
<ChartTooltip
55-
content={<ChartTooltipContent />}
56-
cursor={{ fill: "hsl(var(--muted))", opacity: 0.2 }}
57-
/>
58-
<Bar
59-
dataKey="cumulative_users"
60-
fill={chartConfig.cumulative_users.color}
61-
radius={[0, 0, 4, 4]}
62-
stackId="a"
63-
/>
64-
<Bar
65-
dataKey="new_users"
66-
fill={chartConfig.new_users.color}
67-
radius={[4, 4, 0, 0]}
68-
stackId="a"
69-
/>
70-
</BarChart>
71-
</ChartContainer>
72-
)
73-
}
5+
export function Auth0CumulativeSignups(params: {
6+
client_id?: string
7+
connection_id?: string
8+
tenant_name?: string
9+
token?: string
10+
date_from?: string
11+
date_to?: string
12+
}) {
13+
return <BarChart
14+
endpoint={`${process.env.NEXT_PUBLIC_TINYBIRD_API_HOST}/v0/pipes/auth0_cumulative_users.json`}
15+
token={params.token ?? ''}
16+
index="day"
17+
categories={['cumulative_users', 'new_users']}
18+
height="200px"
19+
params={params}
20+
stacked={true}
21+
colorPalette={['#000000', '#aaaaaa']}
22+
/>
23+
}

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

Lines changed: 20 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,23 @@
11
"use client"
22

3-
import {
4-
Card,
5-
CardContent,
6-
CardHeader,
7-
CardTitle,
8-
} from "@/components/ui/card"
9-
import {
10-
ChartContainer,
11-
ChartConfig,
12-
ChartTooltip,
13-
ChartTooltipContent
14-
} from "@/components/ui/chart"
15-
import { Line, LineChart, XAxis, YAxis, CartesianGrid } from "recharts"
16-
import { format } from "date-fns"
3+
import { AreaChart } from '@tinybirdco/charts'
174

18-
export interface DailyLoginFailsDataPoint {
19-
day: string
20-
fails: number
21-
}
22-
23-
export interface DailyLoginFailsChartData {
24-
data: DailyLoginFailsDataPoint[]
25-
timeRange: 'hourly' | 'daily' | 'monthly'
26-
className?: string
27-
}
28-
29-
const chartConfig = {
30-
fails: {
31-
color: "hsl(var(--chart-1))",
32-
label: "Login Fails",
33-
},
34-
} satisfies ChartConfig
35-
36-
export function DailyLoginFailsChart({ data, timeRange, className }: DailyLoginFailsChartData) {
37-
return (
38-
<Card>
39-
<CardHeader>
40-
<CardTitle>Login Failures</CardTitle>
41-
</CardHeader>
42-
<CardContent className="">
43-
<ChartContainer config={chartConfig} className={`w-full ${className}`}>
44-
<LineChart
45-
data={data}
46-
margin={{
47-
left: 48,
48-
right: 12,
49-
top: 12,
50-
bottom: 32
51-
}}
52-
>
53-
<CartesianGrid
54-
horizontal={true}
55-
vertical={false}
56-
className="stroke-muted"
57-
/>
58-
<XAxis
59-
dataKey="day"
60-
tickLine={false}
61-
axisLine={false}
62-
tickMargin={8}
63-
interval="equidistantPreserveStart"
64-
tickFormatter={(value) => {
65-
const date = new Date(value)
66-
return timeRange === 'monthly'
67-
? format(date, 'MMM yyyy')
68-
: value.split('-')[2]
69-
}}
70-
label={{
71-
value: timeRange === 'monthly' ? "Month of Year" : "Day of Month",
72-
position: "bottom",
73-
offset: 20
74-
}}
75-
/>
76-
<YAxis
77-
tickLine={false}
78-
axisLine={false}
79-
tickMargin={8}
80-
label={{
81-
value: "Login Failures",
82-
angle: -90,
83-
position: "left",
84-
offset: 32
85-
}}
86-
/>
87-
<ChartTooltip
88-
cursor={false}
89-
content={<ChartTooltipContent indicator="dot" />}
90-
/>
91-
<Line
92-
type="monotone"
93-
dataKey="fails"
94-
strokeWidth={2}
95-
dot={true}
96-
style={{
97-
stroke: chartConfig.fails.color,
98-
}}
99-
activeDot={{ fill: chartConfig.fails.color, stroke: chartConfig.fails.color }}
100-
/>
101-
</LineChart>
102-
</ChartContainer>
103-
</CardContent>
104-
</Card>
105-
)
106-
}
5+
export function Auth0DailyLoginFails(params: {
6+
client_id?: string
7+
connection_id?: string
8+
tenant_name?: string
9+
token?: string
10+
date_from?: string
11+
date_to?: string
12+
time_range?: string
13+
}) {
14+
return <AreaChart
15+
endpoint={`${process.env.NEXT_PUBLIC_TINYBIRD_API_HOST}/v0/pipes/auth0_daily_login_fails.json`}
16+
token={params.token ?? ''}
17+
index="day"
18+
categories={['fails']}
19+
height="200px"
20+
params={params}
21+
colorPalette={['#000000']}
22+
/>
23+
}

0 commit comments

Comments
 (0)