Skip to content

Commit e2ded7d

Browse files
alrocaralrocar
committed
graphs
1 parent c0dc01b commit e2ded7d

File tree

5 files changed

+311
-20
lines changed

5 files changed

+311
-20
lines changed

‎apps/web/package-lock.json‎

Lines changed: 21 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"clsx": "^2.1.1",
2929
"cmdk": "^1.0.4",
3030
"date-fns": "^4.1.0",
31+
"echarts-for-react": "^3.0.2",
3132
"init": "^0.1.2",
3233
"lucide-react": "^0.469.0",
3334
"next": "^15.1.3",

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

Lines changed: 133 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
'use client'
22

3-
import { BarChart } from '@tinybirdco/charts'
3+
4+
import { useQuery } from '@tinybirdco/charts'
5+
import ReactECharts from 'echarts-for-react'
6+
import * as echarts from 'echarts'
7+
import { format } from 'date-fns'
48

59
export function Auth0CumulativeSignups(params: {
610
client_id?: string
@@ -10,14 +14,132 @@ export function Auth0CumulativeSignups(params: {
1014
date_from?: string
1115
date_to?: string
1216
}) {
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-
/>
17+
const { data, meta, error, loading } = useQuery({
18+
endpoint: `${process.env.NEXT_PUBLIC_TINYBIRD_API_HOST}/v0/pipes/auth0_cumulative_users.json`,
19+
token: params.token ?? '',
20+
params: {
21+
client_id: params.client_id ?? '',
22+
connection_id: params.connection_id ?? '',
23+
tenant_name: params.tenant_name ?? '',
24+
date_from: params.date_from ?? '',
25+
date_to: params.date_to ?? ''
26+
}
27+
})
28+
29+
if (loading) return <div>Loading...</div>
30+
if (error) return <div>Error: {error}</div>
31+
32+
const option = {
33+
color: ['rgb(128, 255, 165)', 'rgb(255, 0, 135)'],
34+
tooltip: {
35+
trigger: 'axis',
36+
axisPointer: {
37+
type: 'cross',
38+
label: {
39+
backgroundColor: '#6a7985'
40+
}
41+
}
42+
},
43+
legend: {
44+
data: ['Cumulative Users', 'New Users']
45+
},
46+
toolbox: {
47+
feature: {
48+
saveAsImage: {},
49+
dataView: {},
50+
magicType: {
51+
type: ['line', 'bar', 'stack']
52+
},
53+
brush: {
54+
type: ['rect', 'polygon', 'lineX', 'lineY']
55+
}
56+
}
57+
},
58+
grid: {
59+
left: '3%',
60+
right: '4%',
61+
bottom: '3%',
62+
containLabel: true
63+
},
64+
xAxis: [
65+
{
66+
type: 'category',
67+
boundaryGap: false,
68+
data: data?.map((item: any) => item.day) ?? []
69+
}
70+
],
71+
yAxis: [
72+
{
73+
type: 'value'
74+
}
75+
],
76+
series: [
77+
{
78+
name: 'Cumulative Users',
79+
type: 'line',
80+
// stack: 'Total',
81+
smooth: true,
82+
lineStyle: {
83+
width: 0
84+
},
85+
showSymbol: false,
86+
areaStyle: {
87+
opacity: 0.8,
88+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
89+
{
90+
offset: 0,
91+
color: 'rgb(128, 255, 165)'
92+
},
93+
{
94+
offset: 1,
95+
color: 'rgb(1, 191, 236)'
96+
}
97+
]),
98+
// shadowOffsetX: 0,
99+
// shadowOffsetY: 10,
100+
// shadowBlur: 20
101+
},
102+
emphasis: {
103+
focus: 'series'
104+
},
105+
data: data?.map((item: any) => item.cumulative_users) ?? []
106+
},
107+
{
108+
name: 'New Users',
109+
type: 'line',
110+
// stack: 'Total',
111+
smooth: true,
112+
lineStyle: {
113+
width: 0
114+
},
115+
showSymbol: false,
116+
areaStyle: {
117+
opacity: 0.8,
118+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
119+
{
120+
offset: 0,
121+
color: 'rgb(255, 0, 135)'
122+
},
123+
{
124+
offset: 1,
125+
color: 'rgb(135, 0, 157)'
126+
}
127+
]),
128+
// shadowOffsetX: 0,
129+
// shadowOffsetY: 10,
130+
// shadowBlur: 20
131+
},
132+
emphasis: {
133+
focus: 'series',
134+
lineStyle: {
135+
width: 10
136+
}
137+
},
138+
data: data?.map((item: any) => item.new_users) ?? []
139+
}
140+
]
141+
};
142+
143+
return <ReactECharts option={option} style={{ height: '200px' }} />
144+
23145
}

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

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
"use client"
22

33
import { AreaChart } from '@tinybirdco/charts'
4+
import { format } from 'date-fns'
5+
import * as echarts from 'echarts'
46

57
export function Auth0Dau(params: {
68
client_id?: string
@@ -18,6 +20,110 @@ export function Auth0Dau(params: {
1820
categories={['active']}
1921
height="200px"
2022
params={params}
21-
colorPalette={['#000000']}
23+
stacked={true}
24+
// colorPalette={['#2563eb']}
25+
options={{
26+
legend: {
27+
data: ['Active Users']
28+
},
29+
toolbox: {
30+
feature: {
31+
saveAsImage: {},
32+
magicType: {
33+
type: ['line', 'bar', 'stack']
34+
}
35+
}
36+
},
37+
tooltip: {
38+
trigger: 'axis',
39+
backgroundColor: 'rgba(0, 0, 0, 0.85)',
40+
textStyle: {
41+
color: '#fff',
42+
fontSize: 12
43+
},
44+
borderRadius: 0,
45+
padding: [8, 12],
46+
formatter: (parameters: any) => {
47+
const data = parameters[0];
48+
if (params.time_range === 'daily') {
49+
return `${format(data.value[0], 'MMM dd, yyyy')}: ${data.value[1].toLocaleString()} active users`;
50+
} else if (params.time_range === 'hourly') {
51+
return `${format(data.value[0], 'MMM dd, yyyy HH:mm')}: ${data.value[1].toLocaleString()} active users`;
52+
}
53+
return `${format(data.value[0], 'MMM yyyy')}: ${data.value[1].toLocaleString()} active users`;
54+
}
55+
},
56+
grid: {
57+
left: '3%',
58+
right: '4%',
59+
bottom: '3%',
60+
containLabel: true
61+
},
62+
xAxis: {
63+
type: 'time',
64+
axisLine: {
65+
lineStyle: { color: '#e2e8f0' }
66+
},
67+
axisTick: {
68+
show: true
69+
},
70+
axisLabel: {
71+
color: '#64748b',
72+
fontSize: 12,
73+
formatter: (value: number) => {
74+
if (params.time_range === 'daily') {
75+
return format(new Date(value), 'MMM dd, yyyy');
76+
} else if (params.time_range === 'hourly') {
77+
return format(new Date(value), 'MMM dd, yyyy HH:mm');
78+
}
79+
return format(new Date(value), 'MMM yyyy');
80+
}
81+
},
82+
splitLine: {
83+
show: true,
84+
lineStyle: {
85+
color: '#e2e8f0',
86+
type: 'dotted'
87+
}
88+
}
89+
},
90+
yAxis: {
91+
type: 'value',
92+
axisLine: { show: false },
93+
axisTick: { show: false },
94+
axisLabel: {
95+
color: '#64748b',
96+
fontSize: 12
97+
},
98+
splitLine: {
99+
lineStyle: {
100+
color: '#e2e8f0',
101+
type: 'dotted'
102+
}
103+
}
104+
},
105+
// series: [{
106+
// name: 'Active Users',
107+
// type: 'line',
108+
// smooth: true,
109+
// lineStyle: {
110+
// width: 0
111+
// },
112+
// showSymbol: false,
113+
// areaStyle: {
114+
// opacity: 0.8,
115+
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
116+
// {
117+
// offset: 0,
118+
// color: 'rgb(55, 162, 255)'
119+
// },
120+
// {
121+
// offset: 1,
122+
// color: 'rgb(116, 21, 219)'
123+
// }
124+
// ])
125+
// }
126+
// }]
127+
}}
22128
/>
23129
}

0 commit comments

Comments
 (0)