Skip to content

Commit a2f4ea0

Browse files
sdairssdairs
committed
types
1 parent 9b81a52 commit a2f4ea0

File tree

5 files changed

+59
-95
lines changed

5 files changed

+59
-95
lines changed

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

Lines changed: 21 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,10 @@ import { pipe } from '@/lib/tinybird'
88
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
99
import { TimeRange } from '@/components/time-range'
1010
import MetricCard from '@/components/metric-card'
11-
import { DeploymentsChart } from './deployments-chart'
12-
import { DurationChart } from './duration-chart'
13-
import { ProjectsChart } from './projects-chart'
14-
import { GitAnalyticsChart } from './git-analytics-chart'
15-
16-
interface GitData {
17-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
18-
analytics: any[]
19-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
20-
distribution: any[]
21-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
22-
branches: any[]
23-
}
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'
2415

2516
export default function VercelDashboard() {
2617
const [token] = useQueryState('token')
@@ -29,21 +20,14 @@ export default function VercelDashboard() {
2920
from: addDays(new Date(), -7),
3021
to: new Date()
3122
})
32-
23+
3324
const [isLoading, setIsLoading] = useState(true)
3425
// eslint-disable-next-line @typescript-eslint/no-explicit-any
3526
const [metrics, setMetrics] = useState<any>()
36-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
37-
const [deploymentsData, setDeploymentsData] = useState<any[]>([])
38-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
39-
const [durationData, setDurationData] = useState<any[]>([])
40-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
41-
const [projectsData, setProjectsData] = useState<any[]>([])
42-
const [gitData, setGitData] = useState<GitData>({
43-
analytics: [],
44-
distribution: [],
45-
branches: []
46-
})
27+
const [deploymentsData, setDeploymentsData] = useState<DeploymentsData[]>([])
28+
const [durationData, setDurationData] = useState<DurationData[]>([])
29+
const [projectsData, setProjectsData] = useState<ProjectData[]>([])
30+
const [gitData, setGitData] = useState<GitData[]>([])
4731

4832
useEffect(() => {
4933
async function fetchData() {
@@ -63,27 +47,20 @@ export default function VercelDashboard() {
6347
durationResult,
6448
projectsResult,
6549
gitAnalyticsResult,
66-
gitDistributionResult,
67-
branchResult,
50+
6851
] = await Promise.all([
6952
pipe(token, 'vercel_deployment_metrics', params),
70-
pipe(token, 'vercel_deployments_over_time', params),
71-
pipe(token, 'vercel_deployment_duration', params),
72-
pipe(token, 'vercel_project_stats', params),
73-
pipe(token, 'vercel_git_analytics', params),
74-
pipe(token, 'vercel_git_distribution', params),
75-
pipe(token, 'vercel_branch_distribution', params),
53+
pipe<{ data: DeploymentsData[] }>(token, 'vercel_deployments_over_time', params),
54+
pipe<{ data: DurationData[] }>(token, 'vercel_deployment_duration', params),
55+
pipe<{ data: ProjectData[] }>(token, 'vercel_project_stats', params),
56+
pipe<{ data: GitData[] }>(token, 'vercel_git_analytics', params)
7657
])
7758

7859
setMetrics(metricsResult?.data?.[0])
7960
setDeploymentsData(deploymentsResult?.data ?? [])
8061
setDurationData(durationResult?.data ?? [])
8162
setProjectsData(projectsResult?.data ?? [])
82-
setGitData({
83-
analytics: gitAnalyticsResult?.data ?? [],
84-
distribution: gitDistributionResult?.data ?? [],
85-
branches: branchResult?.data ?? []
86-
})
63+
setGitData(gitAnalyticsResult?.data ?? [])
8764
} catch (error) {
8865
console.error('Failed to fetch data:', error)
8966
} finally {
@@ -131,9 +108,8 @@ export default function VercelDashboard() {
131108
<CardTitle>Deployments Over Time</CardTitle>
132109
</CardHeader>
133110
<CardContent>
134-
<DeploymentsChart
135-
data={deploymentsData}
136-
isLoading={isLoading}
111+
<DeploymentsChart
112+
data={deploymentsData}
137113
/>
138114
</CardContent>
139115
</Card>
@@ -155,9 +131,8 @@ export default function VercelDashboard() {
155131
<CardTitle>Top Projects</CardTitle>
156132
</CardHeader>
157133
<CardContent>
158-
<ProjectsChart
159-
data={projectsData}
160-
isLoading={isLoading}
134+
<ProjectsChart
135+
data={projectsData}
161136
/>
162137
</CardContent>
163138
</Card>
@@ -167,9 +142,8 @@ export default function VercelDashboard() {
167142
<CardTitle>Git Analytics</CardTitle>
168143
</CardHeader>
169144
<CardContent>
170-
<GitAnalyticsChart
171-
data={gitData.analytics}
172-
isLoading={isLoading}
145+
<GitAnalyticsChart
146+
data={gitData}
173147
/>
174148
</CardContent>
175149
</Card>

‎apps/web/src/components/tools/vercel/deployments-chart.tsx‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { BarChart, Bar, XAxis, YAxis } from 'recharts'
22
import { ChartContainer, ChartTooltip, ChartConfig } from '@/components/ui/chart'
33
import { format } from 'date-fns'
44

5-
interface DeploymentsData {
5+
export interface DeploymentsData {
66
period: string
77
event_type: string
88
count: number
@@ -19,13 +19,8 @@ const chartConfig = {
1919
},
2020
} satisfies ChartConfig
2121

22-
export function DeploymentsChart({ data, isLoading, className }: {
23-
data: DeploymentsData[]
24-
isLoading: boolean
25-
className?: string
26-
}) {
27-
if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
28-
if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
22+
export function DeploymentsChart({ data }: { data: DeploymentsData[] }) {
23+
if (!data.length) return <div className={`flex items-center justify-center`}>No data available</div>
2924

3025
// eslint-disable-next-line @typescript-eslint/no-explicit-any
3126
const chartData = data.reduce((acc: any[], curr: DeploymentsData) => {
@@ -42,7 +37,7 @@ export function DeploymentsChart({ data, isLoading, className }: {
4237
}, [])
4338

4439
return (
45-
<ChartContainer config={chartConfig} className={`w-full ${className}`}>
40+
<ChartContainer config={chartConfig} className={`w-full`}>
4641
<BarChart
4742
data={chartData}
4843
margin={{ left: 24, right: 24, top: 24, bottom: 24 }}
@@ -57,7 +52,7 @@ export function DeploymentsChart({ data, isLoading, className }: {
5752
tickLine={false}
5853
axisLine={false}
5954
/>
60-
<ChartTooltip
55+
<ChartTooltip
6156
content={({ active, payload }) => {
6257
if (!active || !payload?.length) return null
6358
const data = payload[0].payload
@@ -67,12 +62,12 @@ export function DeploymentsChart({ data, isLoading, className }: {
6762
{format(new Date(data.period), 'd HH:mm')}
6863
</div>
6964
{
70-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
71-
payload.map((p: any) => (
72-
<div key={p.dataKey} className="font-bold">
73-
{chartConfig[p.dataKey as keyof typeof chartConfig].label}: {p.value}
74-
</div>
75-
))}
65+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
66+
payload.map((p: any) => (
67+
<div key={p.dataKey} className="font-bold">
68+
{chartConfig[p.dataKey as keyof typeof chartConfig].label}: {p.value}
69+
</div>
70+
))}
7671
</div>
7772
)
7873
}}

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,14 @@ import { format } from 'date-fns'
22
import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
33
import { Card } from '@/components/ui/card'
44

5+
export interface DurationData {
6+
period: string
7+
avg_duration: number
8+
p95_duration: number
9+
}
10+
511
interface DurationChartProps {
6-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
7-
data: any[]
12+
data: DurationData[]
813
}
914

1015
export function DurationChart({ data }: DurationChartProps) {

‎apps/web/src/components/tools/vercel/git-analytics-chart.tsx‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { BarChart, Bar, XAxis, YAxis } from 'recharts'
22
import { ChartContainer, ChartTooltip, ChartConfig } from '@/components/ui/chart'
33

4-
interface GitData {
4+
export interface GitData {
55
author: string
66
commits: number
77
github_repo?: string
88
gitlab_repo?: string
9+
branch: string
910
}
1011

1112
const chartConfig = {
@@ -22,32 +23,26 @@ function transformData(data: GitData[]): (GitData & { fill: string })[] {
2223
}));
2324
}
2425

25-
export function GitAnalyticsChart({ data, isLoading, className }: {
26-
data: GitData[]
27-
isLoading: boolean
28-
className?: string
29-
}) {
30-
if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
31-
if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
32-
26+
export function GitAnalyticsChart({ data }: { data: GitData[] }) {
27+
console.log(data)
3328
data = transformData(data)
3429

3530
return (
36-
<ChartContainer config={chartConfig} className={`w-full ${className}`}>
31+
<ChartContainer config={chartConfig} className={`w-full`}>
3732
<BarChart
3833
data={data}
3934
margin={{ left: 24, right: 24, top: 24, bottom: 24 }}
4035
layout="vertical"
4136
>
4237
<XAxis type="number" tickLine={false} axisLine={false} />
43-
<YAxis
44-
type="category"
45-
dataKey="author"
46-
tickLine={false}
38+
<YAxis
39+
type="category"
40+
dataKey="author"
41+
tickLine={false}
4742
axisLine={false}
4843
tick={{ fontSize: 12 }}
4944
/>
50-
<ChartTooltip
45+
<ChartTooltip
5146
content={({ active, payload }) => {
5247
if (!active || !payload?.length) return null
5348
const data = payload[0].payload

‎apps/web/src/components/tools/vercel/projects-chart.tsx‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { BarChart, Bar, XAxis, YAxis } from 'recharts'
22
import { ChartContainer, ChartTooltip, ChartConfig } from '@/components/ui/chart'
33

4-
interface ProjectData {
4+
export interface ProjectData {
55
project_name: string
66
total_deployments: number
77
error_rate: number
@@ -25,32 +25,27 @@ function transformData(data: ProjectData[]): (ProjectData & { fill: string })[]
2525
}));
2626
}
2727

28-
export function ProjectsChart({ data, isLoading, className }: {
29-
data: ProjectData[]
30-
isLoading: boolean
31-
className?: string
32-
}) {
33-
if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
34-
if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
28+
export function ProjectsChart({ data }: { data: ProjectData[] }) {
29+
if (!data.length) return <div className={`flex items-center justify-center`}>No data available</div>
3530

3631
data = transformData(data)
3732

3833
return (
39-
<ChartContainer config={chartConfig} className={`w-full ${className}`}>
34+
<ChartContainer config={chartConfig} className={`w-full`}>
4035
<BarChart
4136
data={data}
4237
margin={{ left: 24, right: 24, top: 24, bottom: 24 }}
4338
layout="vertical"
4439
>
4540
<XAxis type="number" tickLine={false} axisLine={false} />
46-
<YAxis
47-
type="category"
48-
dataKey="project_name"
49-
tickLine={false}
50-
axisLine={false}
41+
<YAxis
42+
type="category"
43+
dataKey="project_name"
44+
tickLine={false}
45+
axisLine={false}
5146
width={150}
5247
/>
53-
<ChartTooltip
48+
<ChartTooltip
5449
content={({ active, payload }) => {
5550
if (!active || !payload?.length) return null
5651
const data = payload[0].payload

0 commit comments

Comments
 (0)