From c650b916092c9e5118916d88d7dcaa9477839c61 Mon Sep 17 00:00:00 2001 From: sdairs Date: Mon, 13 Jan 2025 14:59:54 +0000 Subject: [PATCH 1/3] xaxis & order --- apps/web/src/components/time-range.tsx | 14 +++++++--- .../src/components/tools/vercel/dashboard.tsx | 9 ++++--- .../tools/vercel/deployments-chart.tsx | 18 ++++++++++--- .../tools/vercel/duration-chart.tsx | 26 ++++++++++++++----- .../pipes/vercel_deployment_duration.pipe | 2 +- .../pipes/vercel_deployments_over_time.pipe | 2 +- 6 files changed, 54 insertions(+), 17 deletions(-) diff --git a/apps/web/src/components/time-range.tsx b/apps/web/src/components/time-range.tsx index 9fd0b84..5a30434 100644 --- a/apps/web/src/components/time-range.tsx +++ b/apps/web/src/components/time-range.tsx @@ -3,9 +3,17 @@ import { cn } from '@/lib/utils' import { DateRange } from 'react-day-picker' import { DateRangePicker } from '@/components/ui/date-range-picker' +const timeRanges = { + hourly: 'hourly', + daily: 'daily', + weekly: 'weekly', + monthly: 'monthly', +} as const; +export type TimeRange = typeof timeRanges[keyof typeof timeRanges] + 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 +30,7 @@ export function TimeRange({
diff --git a/apps/web/src/components/tools/vercel/deployments-chart.tsx b/apps/web/src/components/tools/vercel/deployments-chart.tsx index 66ba34e..77ea1c7 100644 --- 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
No data available
+ 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)} />
- {format(new Date(data.period), 'd HH:mm')} + {format(new Date(data.period), dateFormat)}
{ // 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 index 7986aae..831d189 100644 --- 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 ( - format(new Date(value), 'd MMM HH:mm')} + tickFormatter={(value) => format(new Date(value), dateFormat)} /> - `${value}s`} @@ -33,7 +47,7 @@ export function DurationChart({ data }: DurationChartProps) { return (
- {format(new Date(payload[0].payload.period), 'd MMM HH:mm')} + {format(new Date(payload[0].payload.period), dateFormat)}
Avg: {payload[0].payload.avg_duration}s diff --git a/tinybird/pipes/vercel_deployment_duration.pipe b/tinybird/pipes/vercel_deployment_duration.pipe index 0643086..da2061b 100644 --- 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 \ No newline at end of file + ORDER BY period ASC \ No newline at end of file diff --git a/tinybird/pipes/vercel_deployments_over_time.pipe b/tinybird/pipes/vercel_deployments_over_time.pipe index 2cd1d77..03339a6 100644 --- 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 \ No newline at end of file + ORDER BY period ASC \ No newline at end of file From 7805f1482ea2cb0b717d4d39fc17fda046002c1c Mon Sep 17 00:00:00 2001 From: sdairs Date: Mon, 13 Jan 2025 15:08:30 +0000 Subject: [PATCH 2/3] use string lits --- apps/web/src/components/time-range.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/apps/web/src/components/time-range.tsx b/apps/web/src/components/time-range.tsx index 5a30434..302b31e 100644 --- a/apps/web/src/components/time-range.tsx +++ b/apps/web/src/components/time-range.tsx @@ -3,13 +3,7 @@ import { cn } from '@/lib/utils' import { DateRange } from 'react-day-picker' import { DateRangePicker } from '@/components/ui/date-range-picker' -const timeRanges = { - hourly: 'hourly', - daily: 'daily', - weekly: 'weekly', - monthly: 'monthly', -} as const; -export type TimeRange = typeof timeRanges[keyof typeof timeRanges] +export type TimeRange = 'hourly' | 'daily' | 'weekly' | 'monthly'; interface TimeRangeProps { timeRange: TimeRange From 811e46cfd70536b9fc39ed1718c81f52788d462a Mon Sep 17 00:00:00 2001 From: sdairs Date: Mon, 13 Jan 2025 15:08:36 +0000 Subject: [PATCH 3/3] fix vercel logs --- apps/web/src/components/tools/vercel_logs/dashboard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/components/tools/vercel_logs/dashboard.tsx b/apps/web/src/components/tools/vercel_logs/dashboard.tsx index 5ac59ec..ffdd8b2 100644 --- 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([]) const [topPathsPage, setTopPathsPage] = useState(0) const [topPathsLoading, setTopPathsLoading] = useState(false) - const [timeRange, setTimeRange] = useState('daily') + const [timeRange, setTimeRange] = useState('daily') const [dateRange, setDateRange] = useState({ from: addDays(new Date(), -7), to: new Date()