Merge pull request #57 from tinybirdco/vercel_xaxis

sdairs · web-flow · commit 7101d9d745a8 · 2025-01-13T15:17:41.000Z
xaxis &amp; order
diff --git a/apps/web/src/components/time-range.tsx b/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')}
                 >
diff --git a/apps/web/src/components/tools/vercel/dashboard.tsx b/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>
diff --git a/apps/web/src/components/tools/vercel/deployments-chart.tsx b/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
diff --git a/apps/web/src/components/tools/vercel/duration-chart.tsx b/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
diff --git a/apps/web/src/components/tools/vercel_logs/dashboard.tsx b/apps/web/src/components/tools/vercel_logs/dashboard.tsx
@@ -9,7 +9,7 @@ import { CacheStatsChart } from './cache-stats-chart'
 import { ResponseTimesChart } from './response-times-chart'
 import { TopPathsTable } from './top-paths-table'
 import { VercelFilters } from './filters'
-import { TimeRange } from '@/components/time-range'
+import { TimeRange, type TimeRange as TR } from '@/components/time-range'
 import { format } from 'date-fns'
 import { addDays } from 'date-fns'
 import { DateRange } from 'react-day-picker'
@@ -34,7 +34,7 @@ export default function VercelLogsDashboard() {
     const [cacheStatsData, setCacheStatsData] = useState<any[]>([])
     const [topPathsPage, setTopPathsPage] = useState(0)
     const [topPathsLoading, setTopPathsLoading] = useState(false)
-    const [timeRange, setTimeRange] = useState('daily')
+    const [timeRange, setTimeRange] = useState<TR>('daily')
     const [dateRange, setDateRange] = useState<DateRange>({
         from: addDays(new Date(), -7),
         to: new Date()
diff --git a/tinybird/pipes/vercel_deployment_duration.pipe b/tinybird/pipes/vercel_deployment_duration.pipe
@@ -31,4 +31,4 @@ SQL >
         HAVING count(DISTINCT event_type) = 2
     )
     GROUP BY period
-    ORDER BY period DESC 
+    ORDER BY period ASC 
diff --git a/tinybird/pipes/vercel_deployments_over_time.pipe b/tinybird/pipes/vercel_deployments_over_time.pipe
@@ -23,4 +23,4 @@ SQL >
     AND event_time >= {{DateTime(date_from, '2024-01-01 00:00:00')}}
     AND event_time <= {{DateTime(date_to, '2024-12-31 23:59:59')}}
     GROUP BY period, event_type
-    ORDER BY period DESC 
+    ORDER BY period ASC 

Original file line number	Diff line number	Diff line change
`@@ -31,4 +31,4 @@ SQL >`
`31`	`31`	`HAVING count(DISTINCT event_type) = 2`
`32`	`32`	`)`
`33`	`33`	`GROUP BY period`
`34`		`- ORDER BY period DESC`
	`34`	`+ ORDER BY period ASC`