Merge branch 'main' into verceltypes

Author: sdairs

.gitignore

@@ -2,3 +2,6 @@
 .venv
 .tinyb
 .tmp
+.tb_error*
+tinybird/fixtures
+

README.md

@@ -1,5 +1,5 @@
-# Dev stack analytics template
-The dev stack analytics template is an open source utility built with love by Tinybird. Capture and analyze data from over a dozen common dev tools, from Vercel to Stripe to Auth0 and more, with just a few lines of code.
+# The Dev Stack Analytics Template
+The Dev Stack Analytics Template is an open source utility built with love by Tinybird. Capture and analyze data from over a dozen common dev tools, from Vercel to Stripe to Auth0 and more, with just a few lines of code.
 
 ![image](https://github.com/user-attachments/assets/32f24c18-a815-44f5-8a37-40e2d899e866)
 

TEMPLATE.md

@@ -6,6 +6,6 @@ Fork the GitHub repository and deploy the data project to Tinybird.
 
 ## Set up the dashboard
 
-Deploy the dashboard to Vercel or use the hosted dashboard at https://dsat.tinybird.co/ using the Workspace admin [token](https://app.tinybird.co/tokens).
+Deploy the dashboard to Vercel or use the hosted dashboard at https://dsat.tinybird.app/ using the Workspace admin [token](https://app.tinybird.co/tokens).
 
 Configure webhooks for the services you want to ingest. See instructions in the [README](https://github.com/tinybirdco/dev-stack-analytics-template/blob/main/README.md).

apps/web/src/app/api/datasources/route.ts

@@ -8,7 +8,7 @@ export async function GET(request: Request) {
     return NextResponse.json({ error: 'Token is required' }, { status: 400 });
   }
 
-  const response = await fetch('https://api.tinybird.co/v0/datasources', {
+  const response = await fetch(`${process.env.NEXT_PUBLIC_TINYBIRD_API_HOST}/v0/datasources`, {
     headers: {
       'Authorization': `Bearer ${token}`,
     },

apps/web/src/app/api/pipes/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 
-const TINYBIRD_API_URL = "https://api.tinybird.co/v0/pipes";
+const TINYBIRD_API_URL = `${process.env.NEXT_PUBLIC_TINYBIRD_API_HOST}/v0/pipes`;
 
 export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams;

apps/web/src/app/api/query/route.ts

@@ -9,7 +9,7 @@ export async function GET(request: Request) {
     return NextResponse.json({ error: 'Token and query are required' }, { status: 400 });
   }
 
-  const url = new URL('https://api.tinybird.co/v0/sql');
+  const url = new URL(`${process.env.NEXT_PUBLIC_TINYBIRD_API_HOST}/v0/sql`);
   url.searchParams.set('q', query);
 
   const response = await fetch(url.toString(), {

apps/web/src/components/time-range.tsx

@@ -3,9 +3,11 @@ import { cn } from '@/lib/utils'
 import { DateRange } from 'react-day-picker'
 import { DateRangePicker } from '@/components/ui/date-range-picker'
 
+export type TimeRange = 'hourly' | 'daily' | 'weekly' | 'monthly';
+
 interface TimeRangeProps {
-    timeRange: string
-    onTimeRangeChange: (range: string) => void
+    timeRange: TimeRange
+    onTimeRangeChange: (range: TimeRange) => void
     dateRange: DateRange | undefined
     onDateRangeChange: (range: DateRange | undefined) => void
     className?: string
@@ -22,7 +24,7 @@ export function TimeRange({
         <div className={cn("flex items-center gap-2", className)}>
             <div className="flex gap-1">
                 <Button
-                    variant={timeRange === 'hourly' ? 'default' : 'outline'}
+                    variant={timeRange == 'hourly' ? 'default' : 'outline'}
                     size="sm"
                     onClick={() => onTimeRangeChange('hourly')}
                 >

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

@@ -6,7 +6,7 @@ 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 } from '@/components/time-range'
+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'
@@ -21,7 +21,7 @@ interface VercelMetrics {
 
 export default function VercelDashboard() {
     const [token] = useQueryState('token')
-    const [timeRange, setTimeRange] = useState('daily')
+    const [timeRange, setTimeRange] = useState<TR>('daily')
     const [dateRange, setDateRange] = useState<DateRange>({
         from: addDays(new Date(), -7),
         to: new Date()
@@ -115,6 +115,7 @@ export default function VercelDashboard() {
                     <CardContent>
                         <DeploymentsChart
                             data={deploymentsData}
+                            timeRange={timeRange}
                         />
                     </CardContent>
                 </Card>
@@ -124,7 +125,9 @@ export default function VercelDashboard() {
                         <CardTitle>Deploy Duration</CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <DurationChart data={durationData} />
+                        <DurationChart
+                            data={durationData}
+                            timeRange={timeRange} />
                     </CardContent>
                 </Card>
             </div>

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

@@ -1,6 +1,7 @@
 import { BarChart, Bar, XAxis, YAxis } from 'recharts'
 import { ChartContainer, ChartTooltip, ChartConfig } from '@/components/ui/chart'
 import { format } from 'date-fns'
+import { type TimeRange } from '@/components/time-range'
 
 export interface DeploymentsData {
     period: string
@@ -19,9 +20,20 @@ const chartConfig = {
     },
 } satisfies ChartConfig
 
-export function DeploymentsChart({ data }: { data: DeploymentsData[] }) {
+export function DeploymentsChart({ data, timeRange }: { data: DeploymentsData[]; timeRange: TimeRange }) {
     if (!data.length) return <div className={`flex items-center justify-center`}>No data available</div>
 
+    let dateFormat = 'yyyy-MM-dd HH:mm'
+    if (timeRange === 'hourly') {
+        dateFormat = 'yyyy-MM-dd HH:mm'
+    } else if (timeRange === 'daily') {
+        dateFormat = 'd MMMM'
+    } else if (timeRange === 'weekly') {
+        dateFormat = 'd MMMM'
+    } else if (timeRange === 'monthly') {
+        dateFormat = 'MMMM'
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const chartData = data.reduce((acc: any[], curr: DeploymentsData) => {
         const existing = acc.find(d => d.period === curr.period)
@@ -46,7 +58,7 @@ export function DeploymentsChart({ data }: { data: DeploymentsData[] }) {
                     dataKey="period"
                     tickLine={false}
                     axisLine={false}
-                    tickFormatter={(value) => format(new Date(value), 'd HH:mm')}
+                    tickFormatter={(value) => format(new Date(value), dateFormat)}
                 />
                 <YAxis
                     tickLine={false}
@@ -59,7 +71,7 @@ export function DeploymentsChart({ data }: { data: DeploymentsData[] }) {
                         return (
                             <div className="rounded-lg border bg-background p-2 shadow-sm">
                                 <div className="text-xs text-muted-foreground">
-                                    {format(new Date(data.period), 'd HH:mm')}
+                                    {format(new Date(data.period), dateFormat)}
                                 </div>
                                 {
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -1,6 +1,7 @@
 import { format } from 'date-fns'
 import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
 import { Card } from '@/components/ui/card'
+import { type TimeRange } from '@/components/time-range'
 
 export interface DurationData {
     period: string
@@ -10,19 +11,32 @@ export interface DurationData {
 
 interface DurationChartProps {
     data: DurationData[]
+    timeRange: TimeRange
 }
 
-export function DurationChart({ data }: DurationChartProps) {
+export function DurationChart({ data, timeRange }: DurationChartProps) {
+
+    let dateFormat = 'yyyy-MM-dd HH:mm'
+    if (timeRange === 'hourly') {
+        dateFormat = 'yyyy-MM-dd HH:mm'
+    } else if (timeRange === 'daily') {
+        dateFormat = 'd MMMM'
+    } else if (timeRange === 'weekly') {
+        dateFormat = 'd MMMM'
+    } else if (timeRange === 'monthly') {
+        dateFormat = 'MMMM'
+    }
+
     return (
         <ResponsiveContainer width="100%" height={350}>
             <LineChart data={data}>
-                <XAxis 
-                    dataKey="period" 
+                <XAxis
+                    dataKey="period"
                     tickLine={false}
                     axisLine={false}
-                    tickFormatter={(value) => format(new Date(value), 'd MMM HH:mm')}
+                    tickFormatter={(value) => format(new Date(value), dateFormat)}
                 />
-                <YAxis 
+                <YAxis
                     tickLine={false}
                     axisLine={false}
                     tickFormatter={(value) => `${value}s`}
@@ -33,7 +47,7 @@ export function DurationChart({ data }: DurationChartProps) {
                         return (
                             <Card className="p-2">
                                 <div className="text-sm text-muted-foreground">
-                                    {format(new Date(payload[0].payload.period), 'd MMM HH:mm')}
+                                    {format(new Date(payload[0].payload.period), dateFormat)}
                                 </div>
                                 <div className="font-bold">
                                     Avg: {payload[0].payload.avg_duration}s