rebuild charts with tb charts

Author: sdairs

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
 .venv
 .tinyb
+.tb_error.txt
 .tmp

apps/web/package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
+    "@tinybirdco/charts": "^0.2.4",
     "ai": "^4.0.22",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

apps/web/pnpm-lock.yaml

@@ -4,20 +4,11 @@ import { useQueryState } from 'nuqs'
 import { useEffect, useState } from 'react'
 import { addDays, format } from 'date-fns'
 import { DateRange } from 'react-day-picker'
-import { pipe } from '@/lib/tinybird'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { TimeRange, type TimeRange as TR } from '@/components/time-range'
 import MetricCard from '@/components/metric-card'
-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
-}
+import { VercelDeploymentDuration } from './deployment-duration-ts'
+import { VercelDeploymentsOverTime } from './deployments-over-time'
 
 export default function VercelDashboard() {
     const [token] = useQueryState('token')
@@ -28,44 +19,13 @@ export default function VercelDashboard() {
     })
 
     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() {
             if (!token) return
 
-            const params = {
-                time_range: timeRange,
-                ...(dateRange?.from && { date_from: format(dateRange.from, 'yyyy-MM-dd HH:mm:ss') }),
-                ...(dateRange?.to && { date_to: format(dateRange.to, 'yyyy-MM-dd 23:59:59') })
-            }
-
             try {
                 setIsLoading(true)
-                const [
-                    metricsResult,
-                    deploymentsResult,
-                    durationResult,
-                    projectsResult,
-                    gitAnalyticsResult,
-
-                ] = await Promise.all([
-                    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(gitAnalyticsResult?.data ?? [])
             } catch (error) {
                 console.error('Failed to fetch data:', error)
             } finally {
@@ -90,19 +50,19 @@ export default function VercelDashboard() {
             <div className="grid gap-4 md:grid-cols-4">
                 <MetricCard
                     title="Total Deployments"
-                    value={metrics?.total_deployments ?? 'N/A'}
+                    value={'N/A'}
                 />
                 <MetricCard
                     title="Success Rate"
-                    value={metrics?.success_rate ? `${metrics.success_rate}%` : 'N/A'}
+                    value={'N/A'}
                 />
                 <MetricCard
                     title="Average Deploy Time"
-                    value={durationData.length > 0 ? `${Math.round(durationData.reduce((acc, curr) => acc + curr.avg_duration, 0) / durationData.length)}s` : 'N/A'}
+                    value={'N/A'}
                 />
                 <MetricCard
                     title="Error Rate"
-                    value={metrics?.error_rate ? `${metrics.error_rate}%` : 'N/A'}
+                    value={'N/A'}
                 />
             </div>
 
@@ -113,9 +73,11 @@ export default function VercelDashboard() {
                         <CardTitle>Deployments Over Time</CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <DeploymentsChart
-                            data={deploymentsData}
-                            timeRange={timeRange}
+                        {/* Deployments Over Time chart */}
+                        <VercelDeploymentsOverTime
+                            time_range={timeRange}
+                            date_from={dateRange.from ? format(dateRange.from, 'yyyy-MM-dd HH:mm:ss') : undefined}
+                            date_to={dateRange.to ? format(dateRange.to, 'yyyy-MM-dd HH:mm:ss') : undefined}
                         />
                     </CardContent>
                 </Card>
@@ -125,23 +87,23 @@ export default function VercelDashboard() {
                         <CardTitle>Deploy Duration</CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <DurationChart
-                            data={durationData}
-                            timeRange={timeRange} />
+                        {/* Deploy Duration chart */}
+                        <VercelDeploymentDuration
+                            time_range={timeRange}
+                            date_from={dateRange.from ? format(dateRange.from, 'yyyy-MM-dd HH:mm:ss') : undefined}
+                            date_to={dateRange.to ? format(dateRange.to, 'yyyy-MM-dd HH:mm:ss') : undefined}
+                        />
                     </CardContent>
                 </Card>
             </div>
 
-            {/* Tables and Additional Charts */}
             <div className="grid gap-4 md:grid-cols-2">
                 <Card>
                     <CardHeader>
                         <CardTitle>Top Projects</CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <ProjectsChart
-                            data={projectsData}
-                        />
+                        {/* Top Projects table */}
                     </CardContent>
                 </Card>
 
@@ -150,9 +112,7 @@ export default function VercelDashboard() {
                         <CardTitle>Git Analytics</CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <GitAnalyticsChart
-                            data={gitData}
-                        />
+                        {/* Git Analytics chart */}
                     </CardContent>
                 </Card>
             </div>

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

@@ -0,0 +1,23 @@
+'use client'
+
+import { LineChart } from '@tinybirdco/charts'
+
+export function VercelDeploymentDuration(params: {
+  date_from?: string
+  date_to?: string
+  time_range?: string
+}) {
+  return (
+    <LineChart
+      endpoint="https://api.tinybird.co/v0/pipes/vercel_deployment_duration.json"
+      token = "p.eyJ1IjogIjdjNjJiZGRjLWQ3MDItNDBiMy04YTc5LTdkYWQ4ODZmN2FhYiIsICJpZCI6ICIwYWYxMDYzMi1iMTdhLTQzMWEtYjlkOS0wZjdlZWU1M2I3ODMiLCAiaG9zdCI6ICJldV9zaGFyZWQifQ.EUq1kGyKew75WAzACmSmPLjfjDI0F5Jj0DXQAQSqhD8"
+      index="period"
+      categories={['avg_duration', 'p95_duration']}
+      colorPalette={['#27F795', '#008060', '#0EB1B9', '#9263AF', '#5A6FC0', '#86BFDB', '#FFC145', '#FF6B6C', '#DC82C8', '#FFC0F1']}
+      stacked={true}
+      title="Vercel Deployment Duration"
+      height="500px"
+      params={params}
+    />
+  )
+}