fix: disable hourly data for 7+ days for performance reasons

Author: izadoesdev

apps/api/src/routes/query.ts

@@ -317,10 +317,35 @@ async function executeDynamicQuery(
 		? (domainCache?.[websiteId] ?? (await getWebsiteDomain(websiteId)))
 		: null;
 
-	const getTimeUnit = (granularity?: string): 'hour' | 'day' => {
-		if (['hourly', 'hour'].includes(granularity || '')) {
+	const MAX_HOURLY_DAYS = 7;
+	const MS_PER_DAY = 1000 * 60 * 60 * 24;
+
+	const validateHourlyDateRange = (start: string, end: string) => {
+		const rangeDays = Math.ceil(
+			(new Date(end).getTime() - new Date(start).getTime()) / MS_PER_DAY
+		);
+		
+		if (rangeDays > MAX_HOURLY_DAYS) {
+			throw new Error(
+				`Hourly granularity only supports ranges up to ${MAX_HOURLY_DAYS} days. Use daily granularity for longer periods.`
+			);
+		}
+	};
+
+	const getTimeUnit = (
+		granularity?: string,
+		startDate?: string,
+		endDate?: string
+	): 'hour' | 'day' => {
+		const isHourly = ['hourly', 'hour'].includes(granularity || '');
+		
+		if (isHourly) {
+			if (startDate && endDate) {
+				validateHourlyDateRange(startDate, endDate);
+			}
 			return 'hour';
 		}
+		
 		return 'day';
 	};
 
@@ -405,7 +430,11 @@ async function executeDynamicQuery(
 				type: parameterName,
 				from: validation.start,
 				to: validation.end,
-				timeUnit: getTimeUnit(paramGranularity),
+				timeUnit: getTimeUnit(
+					paramGranularity,
+					validation.start,
+					validation.end
+				),
 				filters: dynamicRequest.filters || [],
 				limit: dynamicRequest.limit || 100,
 				offset: dynamicRequest.page

apps/dashboard/app/(main)/websites/[id]/_components/analytics-toolbar.tsx

@@ -12,6 +12,31 @@ import { useDateFilters } from '@/hooks/use-date-filters';
 import { addDynamicFilterAtom } from '@/stores/jotai/filterAtoms';
 import { AddFilterForm } from './utils/add-filters';
 
+const MAX_HOURLY_DAYS = 7;
+
+type QuickRange = {
+	label: string;
+	fullLabel: string;
+	hours?: number;
+	days?: number;
+};
+
+const QUICK_RANGES: QuickRange[] = [
+	{ label: '24h', fullLabel: 'Last 24 hours', hours: 24 },
+	{ label: '7d', fullLabel: 'Last 7 days', days: 7 },
+	{ label: '30d', fullLabel: 'Last 30 days', days: 30 },
+	{ label: '90d', fullLabel: 'Last 90 days', days: 90 },
+	{ label: '180d', fullLabel: 'Last 180 days', days: 180 },
+	{ label: '365d', fullLabel: 'Last 365 days', days: 365 },
+];
+
+const getStartDateForRange = (range: QuickRange) => {
+	const now = new Date();
+	return range.hours
+		? dayjs(now).subtract(range.hours, 'hour').toDate()
+		: dayjs(now).subtract(range.days ?? 7, 'day').toDate();
+};
+
 interface AnalyticsToolbarProps {
 	isRefreshing: boolean;
 	onRefresh: () => void;
@@ -32,45 +57,68 @@ export function AnalyticsToolbar({
 
 	const [, addFilter] = useAtom(addDynamicFilterAtom);
 
-	const dayPickerSelectedRange: DayPickerRange | undefined = useMemo(
+	const dateRangeDays = useMemo(
+		() =>
+			dayjs(currentDateRange.endDate).diff(
+				currentDateRange.startDate,
+				'day'
+			),
+		[currentDateRange]
+	);
+
+	const isHourlyDisabled = dateRangeDays > MAX_HOURLY_DAYS;
+
+	const selectedRange: DayPickerRange | undefined = useMemo(
 		() => ({
 			from: currentDateRange.startDate,
 			to: currentDateRange.endDate,
 		}),
 		[currentDateRange]
 	);
 
-	const quickRanges = useMemo(
-		() => [
-			{ label: '24h', fullLabel: 'Last 24 hours', hours: 24 },
-			{ label: '7d', fullLabel: 'Last 7 days', days: 7 },
-			{ label: '30d', fullLabel: 'Last 30 days', days: 30 },
-			{ label: '90d', fullLabel: 'Last 90 days', days: 90 },
-			{ label: '180d', fullLabel: 'Last 180 days', days: 180 },
-			{ label: '365d', fullLabel: 'Last 365 days', days: 365 },
-		],
-		[]
+	const handleQuickRangeSelect = useCallback(
+		(range: QuickRange) => {
+			const start = getStartDateForRange(range);
+			setDateRangeAction({ startDate: start, endDate: new Date() });
+		},
+		[setDateRangeAction]
 	);
 
-	const handleQuickRangeSelect = useCallback(
-		(range: (typeof quickRanges)[0]) => {
+	const getGranularityButtonClass = (type: 'daily' | 'hourly') => {
+		const isActive = currentGranularity === type;
+		const baseClass =
+			'h-8 cursor-pointer touch-manipulation rounded-none px-3 text-sm';
+		const activeClass = isActive
+			? 'bg-primary/10 font-medium text-primary'
+			: 'text-muted-foreground';
+		const disabledClass =
+			type === 'hourly' && isHourlyDisabled
+				? 'cursor-not-allowed opacity-50'
+				: '';
+		return `${baseClass} ${activeClass} ${disabledClass}`.trim();
+	};
+
+	const isQuickRangeActive = useCallback(
+		(range: QuickRange) => {
+			if (!selectedRange?.from || !selectedRange?.to) return false;
+
 			const now = new Date();
-			const start = range.hours
-				? dayjs(now).subtract(range.hours, 'hour').toDate()
-				: dayjs(now)
-						.subtract(range.days || 7, 'day')
-						.toDate();
-			setDateRangeAction({ startDate: start, endDate: now });
+			const start = getStartDateForRange(range);
+
+			return (
+				dayjs(selectedRange.from).isSame(start, 'day') &&
+				dayjs(selectedRange.to).isSame(now, 'day')
+			);
 		},
-		[setDateRangeAction]
+		[selectedRange]
 	);
 
 	return (
 		<div className="mt-3 flex flex-col gap-2 rounded border bg-card p-3 shadow-sm">
 			<div className="flex items-center justify-between gap-3">
 				<div className="flex h-8 overflow-hidden rounded border bg-background shadow-sm">
 					<Button
-						className={`h-8 cursor-pointer touch-manipulation rounded-none px-3 text-sm ${currentGranularity === 'daily' ? 'bg-primary/10 font-medium text-primary' : 'text-muted-foreground'}`}
+						className={getGranularityButtonClass('daily')}
 						onClick={() => setCurrentGranularityAtomState('daily')}
 						size="sm"
 						title="View daily aggregated data"
@@ -79,10 +127,15 @@ export function AnalyticsToolbar({
 						Daily
 					</Button>
 					<Button
-						className={`h-8 cursor-pointer touch-manipulation rounded-none px-3 text-sm ${currentGranularity === 'hourly' ? 'bg-primary/10 font-medium text-primary' : 'text-muted-foreground'}`}
+						className={getGranularityButtonClass('hourly')}
+						disabled={isHourlyDisabled}
 						onClick={() => setCurrentGranularityAtomState('hourly')}
 						size="sm"
-						title="View hourly data (best for 24h periods)"
+						title={
+							isHourlyDisabled
+								? `Hourly view is only available for ${MAX_HOURLY_DAYS} days or less`
+								: `View hourly data (up to ${MAX_HOURLY_DAYS} days)`
+						}
 						variant="ghost"
 					>
 						Hourly
@@ -109,22 +162,8 @@ export function AnalyticsToolbar({
 			</div>
 
 			<div className="flex items-center gap-1 overflow-x-auto rounded border bg-background p-1 shadow-sm">
-				{quickRanges.map((range) => {
-					const now = new Date();
-					const start = range.hours
-						? dayjs(now).subtract(range.hours, 'hour').toDate()
-						: dayjs(now)
-								.subtract(range.days || 7, 'day')
-								.toDate();
-					const dayPickerCurrentRange = dayPickerSelectedRange;
-					const isActive =
-						dayPickerCurrentRange?.from &&
-						dayPickerCurrentRange?.to &&
-						dayjs(dayPickerCurrentRange.from).format('YYYY-MM-DD') ===
-							dayjs(start).format('YYYY-MM-DD') &&
-						dayjs(dayPickerCurrentRange.to).format('YYYY-MM-DD') ===
-							dayjs(now).format('YYYY-MM-DD');
-
+				{QUICK_RANGES.map((range) => {
+					const isActive = isQuickRangeActive(range);
 					return (
 						<Button
 							className={`h-8 cursor-pointer touch-manipulation whitespace-nowrap px-2 font-medium text-xs ${isActive ? 'bg-primary/10 text-primary shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
@@ -152,7 +191,7 @@ export function AnalyticsToolbar({
 								});
 							}
 						}}
-						value={dayPickerSelectedRange}
+						value={selectedRange}
 					/>
 				</div>
 			</div>

apps/dashboard/app/(main)/websites/[id]/_components/tabs/overview-tab.tsx

@@ -319,53 +319,42 @@ export function WebsiteOverviewTab({
 	const dateTo = dayjs(dateRange.end_date);
 	const dateDiff = dateTo.diff(dateFrom, 'day');
 
-	const filterFutureEvents = useCallback(
-		(events: MetricPoint[]) => {
-			const userTimezone = getUserTimezone();
-			const now = dayjs().tz(userTimezone);
+	const processedEventsData = useMemo(() => {
+		if (!analytics.events_by_date?.length) return [];
+		
+		const userTimezone = getUserTimezone();
+		const now = dayjs().tz(userTimezone);
+		const isHourly = dateRange.granularity === 'hourly';
 
-			return events.filter((event: MetricPoint) => {
-				const eventDate = dayjs.utc(event.date).tz(userTimezone);
+		// Step 1: Filter future events
+		const filteredEvents = analytics.events_by_date.filter((event: MetricPoint) => {
+			const eventDate = dayjs.utc(event.date).tz(userTimezone);
 
-				if (dateRange.granularity === 'hourly') {
-					return eventDate.isBefore(now);
-				}
+			if (isHourly) {
+				return eventDate.isBefore(now);
+			}
 
-				const endOfToday = now.endOf('day');
-				return (
-					eventDate.isBefore(endOfToday) || eventDate.isSame(endOfToday, 'day')
-				);
-			});
-		},
-		[dateRange.granularity]
-	);
+			const endOfToday = now.endOf('day');
+			return eventDate.isBefore(endOfToday) || eventDate.isSame(endOfToday, 'day');
+		});
 
-	const fillMissingDates = useCallback((data: MetricPoint[]) => {
-		const userTimezone = getUserTimezone();
-		const isHourly = dateRange.granularity === 'hourly';
-		
-		// Create a map of existing data for quick lookup
+		// Step 2: Create lookup map
 		const dataMap = new Map<string, MetricPoint>();
-		for (const item of data) {
+		for (const item of filteredEvents) {
 			const key = isHourly ? item.date : item.date.slice(0, 10);
 			dataMap.set(key, item);
 		}
 
-		// Generate all dates in range
+		// Step 3: Fill missing dates
 		const startDate = dayjs(dateRange.start_date).tz(userTimezone);
 		const endDate = dayjs(dateRange.end_date).tz(userTimezone);
-		const now = dayjs().tz(userTimezone);
-		
 		const filled: MetricPoint[] = [];
 		let current = startDate;
 
 		while (current.isBefore(endDate) || current.isSame(endDate, 'day')) {
 			if (isHourly) {
-				// Hourly granularity - iterate through hours
 				for (let hour = 0; hour < 24; hour++) {
 					const hourDate = current.hour(hour);
-					
-					// Don't add future hours
 					if (hourDate.isAfter(now)) break;
 
 					const key = hourDate.format('YYYY-MM-DD HH:00:00');
@@ -383,11 +372,8 @@ export function WebsiteOverviewTab({
 					});
 				}
 				current = current.add(1, 'day');
-				
-				// If we've reached today, stop after processing current hour
 				if (current.isAfter(endDate, 'day')) break;
 			} else {
-				// Daily granularity
 				const key = current.format('YYYY-MM-DD');
 				const existing = dataMap.get(key);
 
@@ -407,15 +393,15 @@ export function WebsiteOverviewTab({
 		}
 
 		return filled;
-	}, [dateRange.start_date, dateRange.end_date, dateRange.granularity]);
+	}, [
+		analytics.events_by_date,
+		dateRange.start_date,
+		dateRange.end_date,
+		dateRange.granularity,
+	]);
 
 	const chartData = useMemo(() => {
-		const filteredEvents = analytics.events_by_date?.length 
-			? filterFutureEvents(analytics.events_by_date) 
-			: [];
-		const filledEvents = fillMissingDates(filteredEvents);
-		
-		return filledEvents.map((event: MetricPoint): ChartDataPoint => ({
+		return processedEventsData.map((event: MetricPoint): ChartDataPoint => ({
 			date: formatDateByGranularity(event.date, dateRange.granularity),
 			rawDate: event.date,
 			...(visibleMetrics.pageviews && { pageviews: event.pageviews as number }),
@@ -428,27 +414,14 @@ export function WebsiteOverviewTab({
 				avg_session_duration: event.avg_session_duration as number 
 			}),
 		}));
-	}, [
-		analytics.events_by_date,
-		dateRange.granularity,
-		dateRange.start_date,
-		dateRange.end_date,
-		visibleMetrics,
-		filterFutureEvents,
-		fillMissingDates,
-	]);
+	}, [processedEventsData, dateRange.granularity, visibleMetrics]);
 
 	const miniChartData = useMemo(() => {
-		const filteredEvents = analytics.events_by_date?.length 
-			? filterFutureEvents(analytics.events_by_date) 
-			: [];
-		const filledEvents = fillMissingDates(filteredEvents);
-		
 		const createChartSeries = (
 			field: keyof MetricPoint,
 			transform?: (value: number) => number
 		) =>
-			filledEvents.map((event: MetricPoint) => ({
+			processedEventsData.map((event: MetricPoint) => ({
 				date: dateRange.granularity === 'hourly' ? event.date : event.date.slice(0, 10),
 				value: transform ? transform(event[field] as number) : (event[field] as number) || 0,
 			}));
@@ -468,7 +441,7 @@ export function WebsiteOverviewTab({
 			bounceRate: createChartSeries('bounce_rate'),
 			sessionDuration: createChartSeries('avg_session_duration', formatSessionDuration),
 		};
-	}, [analytics.events_by_date, dateRange.granularity, filterFutureEvents, fillMissingDates]);
+	}, [processedEventsData, dateRange.granularity]);
 
 	const createTechnologyCell = (type: 'browser' | 'os') => (info: CellInfo) => {
 		const entry = info.row.original as TechnologyData;