Merge pull request #56 from tinybirdco/verceltypes

typing for vercel dash

Author: sdairs

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

@@ -8,18 +8,15 @@ import { pipe } from '@/lib/tinybird'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { TimeRange } from '@/components/time-range'
 import MetricCard from '@/components/metric-card'
-import { DeploymentsChart } from './deployments-chart'
-import { DurationChart } from './duration-chart'
-import { ProjectsChart } from './projects-chart'
-import { GitAnalyticsChart } from './git-analytics-chart'
-
-interface GitData {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    analytics: any[]
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    distribution: any[]
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    branches: any[]
+import { DeploymentsChart, DeploymentsData } from './deployments-chart'
+import { DurationChart, DurationData } from './duration-chart'
+import { ProjectsChart, ProjectData } from './projects-chart'
+import { GitAnalyticsChart, GitData } from './git-analytics-chart'
+
+interface VercelMetrics {
+    total_deployments: number
+    success_rate: number
+    error_rate: number
 }
 
 export default function VercelDashboard() {
@@ -29,21 +26,13 @@ export default function VercelDashboard() {
         from: addDays(new Date(), -7),
         to: new Date()
     })
-    
-    const [isLoading, setIsLoading] = useState(true)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [metrics, setMetrics] = useState<any>()
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [deploymentsData, setDeploymentsData] = useState<any[]>([])
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [durationData, setDurationData] = useState<any[]>([])
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [projectsData, setProjectsData] = useState<any[]>([])
-    const [gitData, setGitData] = useState<GitData>({
-        analytics: [],
-        distribution: [],
-        branches: []
-    })
+
+    const [, setIsLoading] = useState(true)
+    const [metrics, setMetrics] = useState<VercelMetrics>()
+    const [deploymentsData, setDeploymentsData] = useState<DeploymentsData[]>([])
+    const [durationData, setDurationData] = useState<DurationData[]>([])
+    const [projectsData, setProjectsData] = useState<ProjectData[]>([])
+    const [gitData, setGitData] = useState<GitData[]>([])
 
     useEffect(() => {
         async function fetchData() {
@@ -63,27 +52,20 @@ export default function VercelDashboard() {
                     durationResult,
                     projectsResult,
                     gitAnalyticsResult,
-                    gitDistributionResult,
-                    branchResult,
+
                 ] = await Promise.all([
-                    pipe(token, 'vercel_deployment_metrics', params),
-                    pipe(token, 'vercel_deployments_over_time', params),
-                    pipe(token, 'vercel_deployment_duration', params),
-                    pipe(token, 'vercel_project_stats', params),
-                    pipe(token, 'vercel_git_analytics', params),
-                    pipe(token, 'vercel_git_distribution', params),
-                    pipe(token, 'vercel_branch_distribution', params),
+                    pipe<{ data: VercelMetrics[] }>(token, 'vercel_deployment_metrics', params),
+                    pipe<{ data: DeploymentsData[] }>(token, 'vercel_deployments_over_time', params),
+                    pipe<{ data: DurationData[] }>(token, 'vercel_deployment_duration', params),
+                    pipe<{ data: ProjectData[] }>(token, 'vercel_project_stats', params),
+                    pipe<{ data: GitData[] }>(token, 'vercel_git_analytics', params)
                 ])
 
                 setMetrics(metricsResult?.data?.[0])
                 setDeploymentsData(deploymentsResult?.data ?? [])
                 setDurationData(durationResult?.data ?? [])
                 setProjectsData(projectsResult?.data ?? [])
-                setGitData({
-                    analytics: gitAnalyticsResult?.data ?? [],
-                    distribution: gitDistributionResult?.data ?? [],
-                    branches: branchResult?.data ?? []
-                })
+                setGitData(gitAnalyticsResult?.data ?? [])
             } catch (error) {
                 console.error('Failed to fetch data:', error)
             } finally {
@@ -131,9 +113,8 @@ export default function VercelDashboard() {
                         <CardTitle>Deployments Over Time</CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <DeploymentsChart 
-                            data={deploymentsData} 
-                            isLoading={isLoading}
+                        <DeploymentsChart
+                            data={deploymentsData}
                         />
                     </CardContent>
                 </Card>
@@ -155,9 +136,8 @@ export default function VercelDashboard() {
                         <CardTitle>Top Projects</CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <ProjectsChart 
-                            data={projectsData} 
-                            isLoading={isLoading}
+                        <ProjectsChart
+                            data={projectsData}
                         />
                     </CardContent>
                 </Card>
@@ -167,9 +147,8 @@ export default function VercelDashboard() {
                         <CardTitle>Git Analytics</CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <GitAnalyticsChart 
-                            data={gitData.analytics} 
-                            isLoading={isLoading}
+                        <GitAnalyticsChart
+                            data={gitData}
                         />
                     </CardContent>
                 </Card>

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

@@ -2,7 +2,7 @@ import { BarChart, Bar, XAxis, YAxis } from 'recharts'
 import { ChartContainer, ChartTooltip, ChartConfig } from '@/components/ui/chart'
 import { format } from 'date-fns'
 
-interface DeploymentsData {
+export interface DeploymentsData {
     period: string
     event_type: string
     count: number
@@ -19,13 +19,8 @@ const chartConfig = {
     },
 } satisfies ChartConfig
 
-export function DeploymentsChart({ data, isLoading, className }: {
-    data: DeploymentsData[]
-    isLoading: boolean
-    className?: string
-}) {
-    if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
-    if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
+export function DeploymentsChart({ data }: { data: DeploymentsData[] }) {
+    if (!data.length) return <div className={`flex items-center justify-center`}>No data available</div>
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const chartData = data.reduce((acc: any[], curr: DeploymentsData) => {
@@ -42,7 +37,7 @@ export function DeploymentsChart({ data, isLoading, className }: {
     }, [])
 
     return (
-        <ChartContainer config={chartConfig} className={`w-full ${className}`}>
+        <ChartContainer config={chartConfig} className={`w-full`}>
             <BarChart
                 data={chartData}
                 margin={{ left: 24, right: 24, top: 24, bottom: 24 }}
@@ -57,7 +52,7 @@ export function DeploymentsChart({ data, isLoading, className }: {
                     tickLine={false}
                     axisLine={false}
                 />
-                <ChartTooltip 
+                <ChartTooltip
                     content={({ active, payload }) => {
                         if (!active || !payload?.length) return null
                         const data = payload[0].payload
@@ -67,12 +62,12 @@ export function DeploymentsChart({ data, isLoading, className }: {
                                     {format(new Date(data.period), 'd HH:mm')}
                                 </div>
                                 {
-                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                payload.map((p: any) => (
-                                    <div key={p.dataKey} className="font-bold">
-                                        {chartConfig[p.dataKey as keyof typeof chartConfig].label}: {p.value}
-                                    </div>
-                                ))}
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    payload.map((p: any) => (
+                                        <div key={p.dataKey} className="font-bold">
+                                            {chartConfig[p.dataKey as keyof typeof chartConfig].label}: {p.value}
+                                        </div>
+                                    ))}
                             </div>
                         )
                     }}

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

@@ -2,9 +2,14 @@ import { format } from 'date-fns'
 import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
 import { Card } from '@/components/ui/card'
 
+export interface DurationData {
+    period: string
+    avg_duration: number
+    p95_duration: number
+}
+
 interface DurationChartProps {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    data: any[]
+    data: DurationData[]
 }
 
 export function DurationChart({ data }: DurationChartProps) {

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

@@ -1,11 +1,12 @@
 import { BarChart, Bar, XAxis, YAxis } from 'recharts'
 import { ChartContainer, ChartTooltip, ChartConfig } from '@/components/ui/chart'
 
-interface GitData {
+export interface GitData {
     author: string
     commits: number
     github_repo?: string
     gitlab_repo?: string
+    branch: string
 }
 
 const chartConfig = {
@@ -22,32 +23,26 @@ function transformData(data: GitData[]): (GitData & { fill: string })[] {
     }));
 }
 
-export function GitAnalyticsChart({ data, isLoading, className }: {
-    data: GitData[]
-    isLoading: boolean
-    className?: string
-}) {
-    if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
-    if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
-
+export function GitAnalyticsChart({ data }: { data: GitData[] }) {
+    console.log(data)
     data = transformData(data)
 
     return (
-        <ChartContainer config={chartConfig} className={`w-full ${className}`}>
+        <ChartContainer config={chartConfig} className={`w-full`}>
             <BarChart
                 data={data}
                 margin={{ left: 24, right: 24, top: 24, bottom: 24 }}
                 layout="vertical"
             >
                 <XAxis type="number" tickLine={false} axisLine={false} />
-                <YAxis 
-                    type="category" 
-                    dataKey="author" 
-                    tickLine={false} 
+                <YAxis
+                    type="category"
+                    dataKey="author"
+                    tickLine={false}
                     axisLine={false}
                     tick={{ fontSize: 12 }}
                 />
-                <ChartTooltip 
+                <ChartTooltip
                     content={({ active, payload }) => {
                         if (!active || !payload?.length) return null
                         const data = payload[0].payload

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

@@ -1,7 +1,7 @@
 import { BarChart, Bar, XAxis, YAxis } from 'recharts'
 import { ChartContainer, ChartTooltip, ChartConfig } from '@/components/ui/chart'
 
-interface ProjectData {
+export interface ProjectData {
     project_name: string
     total_deployments: number
     error_rate: number
@@ -25,32 +25,27 @@ function transformData(data: ProjectData[]): (ProjectData & { fill: string })[]
     }));
 }
 
-export function ProjectsChart({ data, isLoading, className }: {
-    data: ProjectData[]
-    isLoading: boolean
-    className?: string
-}) {
-    if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
-    if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
+export function ProjectsChart({ data }: { data: ProjectData[] }) {
+    if (!data.length) return <div className={`flex items-center justify-center`}>No data available</div>
 
     data = transformData(data)
 
     return (
-        <ChartContainer config={chartConfig} className={`w-full ${className}`}>
+        <ChartContainer config={chartConfig} className={`w-full`}>
             <BarChart
                 data={data}
                 margin={{ left: 24, right: 24, top: 24, bottom: 24 }}
                 layout="vertical"
             >
                 <XAxis type="number" tickLine={false} axisLine={false} />
-                <YAxis 
-                    type="category" 
-                    dataKey="project_name" 
-                    tickLine={false} 
-                    axisLine={false} 
+                <YAxis
+                    type="category"
+                    dataKey="project_name"
+                    tickLine={false}
+                    axisLine={false}
                     width={150}
                 />
-                <ChartTooltip 
+                <ChartTooltip
                     content={({ active, payload }) => {
                         if (!active || !payload?.length) return null
                         const data = payload[0].payload