Skip to content

Commit 065e088

Browse files
sdairssdairs
authored
Merge pull request #61 from tinybirdco/vercel_tc
rebuild vercel charts with tb charts
2 parents 3b0ed67 + 0bbb769 commit 065e088

16 files changed

+453
-379
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.DS_Store
22
.venv
33
.tinyb
4+
.tb_error.txt
45
.tmp
56
.tb_error*
67
tinybird/fixtures

‎apps/web/.env.example‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
ANTHROPIC_API_KEY=
2-
NEXT_PUBLIC_VERCEL_URL=
2+
NEXT_PUBLIC_VERCEL_URL=
3+
NEXT_PUBLIC_TINYBIRD_API_HOST=

‎apps/web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@radix-ui/react-checkbox": "^1.1.3",
2222
"@radix-ui/react-collapsible": "^1.1.2",
2323
"@radix-ui/react-dialog": "^1.1.4",
24+
"@radix-ui/react-dropdown-menu": "^2.1.4",
2425
"@radix-ui/react-label": "^2.1.1",
2526
"@radix-ui/react-popover": "^1.1.4",
2627
"@radix-ui/react-scroll-area": "^1.2.2",

‎apps/web/pnpm-lock.yaml‎

Lines changed: 100 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 37 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import { useQueryState } from 'nuqs'
44
import { useEffect, useState } from 'react'
55
import { addDays, format } from 'date-fns'
66
import { DateRange } from 'react-day-picker'
7-
import { pipe } from '@/lib/tinybird'
87
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
98
import { TimeRange, type TimeRange as TR } from '@/components/time-range'
109
import MetricCard from '@/components/metric-card'
11-
import { DeploymentsChart, DeploymentsData } from './deployments-chart'
12-
import { DurationChart, DurationData } from './duration-chart'
13-
import { ProjectsChart, ProjectData } from './projects-chart'
14-
import { GitAnalyticsChart, GitData } from './git-analytics-chart'
10+
import { VercelDeploymentDuration } from './deployment-duration-ts'
11+
import { VercelDeploymentsOverTime } from './deployments-over-time'
12+
import { GitAnalytics } from './git-analytics'
13+
import { VercelProjects } from './project-stats'
14+
import { pipe } from '@/lib/tinybird'
1515

1616
interface VercelMetrics {
1717
total_deployments: number
@@ -26,13 +26,9 @@ export default function VercelDashboard() {
2626
from: addDays(new Date(), -7),
2727
to: new Date()
2828
})
29+
const [metrics, setMetrics] = useState<VercelMetrics>()
2930

3031
const [, setIsLoading] = useState(true)
31-
const [metrics, setMetrics] = useState<VercelMetrics>()
32-
const [deploymentsData, setDeploymentsData] = useState<DeploymentsData[]>([])
33-
const [durationData, setDurationData] = useState<DurationData[]>([])
34-
const [projectsData, setProjectsData] = useState<ProjectData[]>([])
35-
const [gitData, setGitData] = useState<GitData[]>([])
3632

3733
useEffect(() => {
3834
async function fetchData() {
@@ -48,24 +44,10 @@ export default function VercelDashboard() {
4844
setIsLoading(true)
4945
const [
5046
metricsResult,
51-
deploymentsResult,
52-
durationResult,
53-
projectsResult,
54-
gitAnalyticsResult,
55-
5647
] = await Promise.all([
5748
pipe<{ data: VercelMetrics[] }>(token, 'vercel_deployment_metrics', params),
58-
pipe<{ data: DeploymentsData[] }>(token, 'vercel_deployments_over_time', params),
59-
pipe<{ data: DurationData[] }>(token, 'vercel_deployment_duration', params),
60-
pipe<{ data: ProjectData[] }>(token, 'vercel_project_stats', params),
61-
pipe<{ data: GitData[] }>(token, 'vercel_git_analytics', params)
6249
])
63-
6450
setMetrics(metricsResult?.data?.[0])
65-
setDeploymentsData(deploymentsResult?.data ?? [])
66-
setDurationData(durationResult?.data ?? [])
67-
setProjectsData(projectsResult?.data ?? [])
68-
setGitData(gitAnalyticsResult?.data ?? [])
6951
} catch (error) {
7052
console.error('Failed to fetch data:', error)
7153
} finally {
@@ -78,31 +60,29 @@ export default function VercelDashboard() {
7860

7961
return (
8062
<div className="space-y-8">
81-
<TimeRange
82-
timeRange={timeRange}
83-
onTimeRangeChange={setTimeRange}
84-
dateRange={dateRange}
85-
onDateRangeChange={(range) => setDateRange(range || { from: addDays(new Date(), -7), to: new Date() })}
86-
className="mb-8"
87-
/>
63+
<div className="flex gap-2">
64+
<TimeRange
65+
timeRange={timeRange}
66+
onTimeRangeChange={setTimeRange}
67+
dateRange={dateRange}
68+
onDateRangeChange={(range) => setDateRange(range || { from: addDays(new Date(), -7), to: new Date() })}
69+
className="mb-8"
70+
/>
71+
</div>
8872

8973
{/* Metrics Row */}
90-
<div className="grid gap-4 md:grid-cols-4">
74+
<div className="grid gap-4 md:grid-cols-3">
9175
<MetricCard
9276
title="Total Deployments"
9377
value={metrics?.total_deployments ?? 'N/A'}
9478
/>
9579
<MetricCard
9680
title="Success Rate"
97-
value={metrics?.success_rate ? `${metrics.success_rate}%` : 'N/A'}
98-
/>
99-
<MetricCard
100-
title="Average Deploy Time"
101-
value={durationData.length > 0 ? `${Math.round(durationData.reduce((acc, curr) => acc + curr.avg_duration, 0) / durationData.length)}s` : 'N/A'}
81+
value={metrics?.success_rate ?? 'N/A'}
10282
/>
10383
<MetricCard
10484
title="Error Rate"
105-
value={metrics?.error_rate ? `${metrics.error_rate}%` : 'N/A'}
85+
value={metrics?.error_rate ?? 'N/A'}
10686
/>
10787
</div>
10888

@@ -113,9 +93,11 @@ export default function VercelDashboard() {
11393
<CardTitle>Deployments Over Time</CardTitle>
11494
</CardHeader>
11595
<CardContent>
116-
<DeploymentsChart
117-
data={deploymentsData}
118-
timeRange={timeRange}
96+
{/* Deployments Over Time chart */}
97+
<VercelDeploymentsOverTime
98+
time_range={timeRange}
99+
date_from={dateRange.from ? format(dateRange.from, 'yyyy-MM-dd HH:mm:ss') : undefined}
100+
date_to={dateRange.to ? format(dateRange.to, 'yyyy-MM-dd HH:mm:ss') : undefined}
119101
/>
120102
</CardContent>
121103
</Card>
@@ -125,22 +107,26 @@ export default function VercelDashboard() {
125107
<CardTitle>Deploy Duration</CardTitle>
126108
</CardHeader>
127109
<CardContent>
128-
<DurationChart
129-
data={durationData}
130-
timeRange={timeRange} />
110+
{/* Deploy Duration chart */}
111+
<VercelDeploymentDuration
112+
time_range={timeRange}
113+
date_from={dateRange.from ? format(dateRange.from, 'yyyy-MM-dd HH:mm:ss') : undefined}
114+
date_to={dateRange.to ? format(dateRange.to, 'yyyy-MM-dd HH:mm:ss') : undefined}
115+
/>
131116
</CardContent>
132117
</Card>
133118
</div>
134119

135-
{/* Tables and Additional Charts */}
136120
<div className="grid gap-4 md:grid-cols-2">
137121
<Card>
138122
<CardHeader>
139123
<CardTitle>Top Projects</CardTitle>
140124
</CardHeader>
141125
<CardContent>
142-
<ProjectsChart
143-
data={projectsData}
126+
{/* Top Projects table */}
127+
<VercelProjects
128+
date_from={dateRange.from ? format(dateRange.from, 'yyyy-MM-dd HH:mm:ss') : undefined}
129+
date_to={dateRange.to ? format(dateRange.to, 'yyyy-MM-dd HH:mm:ss') : undefined}
144130
/>
145131
</CardContent>
146132
</Card>
@@ -150,8 +136,10 @@ export default function VercelDashboard() {
150136
<CardTitle>Git Analytics</CardTitle>
151137
</CardHeader>
152138
<CardContent>
153-
<GitAnalyticsChart
154-
data={gitData}
139+
{/* Git Analytics chart */}
140+
<GitAnalytics
141+
date_from={dateRange.from ? format(dateRange.from, 'yyyy-MM-dd HH:mm:ss') : undefined}
142+
date_to={dateRange.to ? format(dateRange.to, 'yyyy-MM-dd HH:mm:ss') : undefined}
155143
/>
156144
</CardContent>
157145
</Card>

‎apps/web/src/components/tools/vercel/deployment-duration-ts.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use client'
2+
3+
import { LineChart } from '@tinybirdco/charts'
4+
import { useQueryState } from 'nuqs'
5+
6+
export function VercelDeploymentDuration(params: {
7+
date_from?: string
8+
date_to?: string
9+
time_range?: string
10+
}) {
11+
const [token] = useQueryState('token')
12+
return (
13+
<LineChart
14+
endpoint="https://api.tinybird.co/v0/pipes/vercel_deployment_duration.json"
15+
token={token ?? ''}
16+
index="period"
17+
categories={['avg_duration', 'p95_duration']}
18+
colorPalette={['#27F795', '#008060', '#0EB1B9', '#9263AF', '#5A6FC0', '#86BFDB', '#FFC145', '#FF6B6C', '#DC82C8', '#FFC0F1']}
19+
stacked={true}
20+
height="500px"
21+
params={params}
22+
/>
23+
)
24+
}

0 commit comments

Comments
 (0)