charts

Author: sdairs

apps/web/package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-scroll-area": "^1.2.2",

apps/web/pnpm-lock.yaml

@@ -9,6 +9,8 @@ import { TimeRange, type TimeRange as TR } from '@/components/time-range'
 import MetricCard from '@/components/metric-card'
 import { VercelDeploymentDuration } from './deployment-duration-ts'
 import { VercelDeploymentsOverTime } from './deployments-over-time'
+import { GitAnalytics } from './git-analytics'
+import { VercelProjects } from './project-stats'
 
 export default function VercelDashboard() {
     const [token] = useQueryState('token')
@@ -38,13 +40,15 @@ export default function VercelDashboard() {
 
     return (
         <div className="space-y-8">
-            <TimeRange
-                timeRange={timeRange}
-                onTimeRangeChange={setTimeRange}
-                dateRange={dateRange}
-                onDateRangeChange={(range) => setDateRange(range || { from: addDays(new Date(), -7), to: new Date() })}
-                className="mb-8"
-            />
+            <div className="flex gap-2">
+                <TimeRange
+                    timeRange={timeRange}
+                    onTimeRangeChange={setTimeRange}
+                    dateRange={dateRange}
+                    onDateRangeChange={(range) => setDateRange(range || { from: addDays(new Date(), -7), to: new Date() })}
+                    className="mb-8"
+                />
+            </div>
 
             {/* Metrics Row */}
             <div className="grid gap-4 md:grid-cols-4">
@@ -104,6 +108,10 @@ export default function VercelDashboard() {
                     </CardHeader>
                     <CardContent>
                         {/* Top Projects table */}
+                        <VercelProjects
+                            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>
 
@@ -113,6 +121,10 @@ export default function VercelDashboard() {
                     </CardHeader>
                     <CardContent>
                         {/* Git Analytics chart */}
+                        <GitAnalytics
+                            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>

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

@@ -0,0 +1,21 @@
+'use client'
+
+import { BarList } from '@tinybirdco/charts'
+
+export function GitAnalytics(params: {
+  date_from?: string
+  date_to?: string
+}) {
+  return (
+    <BarList
+      endpoint="https://api.tinybird.co/v0/pipes/vercel_git_analytics.json"
+      token = "p.eyJ1IjogIjdjNjJiZGRjLWQ3MDItNDBiMy04YTc5LTdkYWQ4ODZmN2FhYiIsICJpZCI6ICIwYWYxMDYzMi1iMTdhLTQzMWEtYjlkOS0wZjdlZWU1M2I3ODMiLCAiaG9zdCI6ICJldV9zaGFyZWQifQ.EUq1kGyKew75WAzACmSmPLjfjDI0F5Jj0DXQAQSqhD8"
+      index="author"
+      categories={['commits']}
+      colorPalette={['#27F795', '#008060', '#0EB1B9', '#9263AF', '#5A6FC0', '#86BFDB', '#FFC145', '#FF6B6C', '#DC82C8', '#FFC0F1']}
+      title="Git Analytics"
+      height="500px"
+      params={params}
+    />
+  )
+}

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

@@ -0,0 +1,21 @@
+'use client'
+
+import { BarList } from '@tinybirdco/charts'
+
+export function VercelProjects(params: {
+  date_from?: string
+  date_to?: string
+}) {
+  return (
+    <BarList
+      endpoint="https://api.tinybird.co/v0/pipes/vercel_project_stats.json"
+      token = "p.eyJ1IjogIjdjNjJiZGRjLWQ3MDItNDBiMy04YTc5LTdkYWQ4ODZmN2FhYiIsICJpZCI6ICIwYWYxMDYzMi1iMTdhLTQzMWEtYjlkOS0wZjdlZWU1M2I3ODMiLCAiaG9zdCI6ICJldV9zaGFyZWQifQ.EUq1kGyKew75WAzACmSmPLjfjDI0F5Jj0DXQAQSqhD8"
+      index="project_name"
+      categories={['total_deployments']}
+      colorPalette={['#27F795', '#008060', '#0EB1B9', '#9263AF', '#5A6FC0', '#86BFDB', '#FFC145', '#FF6B6C', '#DC82C8', '#FFC0F1']}
+      title="Vercel Projects"
+      height="500px"
+      params={params}
+    />
+  )
+}