feat: drag to select date ranges on chart

Author: izadoesdev

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

@@ -32,6 +32,7 @@ import {
 } from '@/components/table/rows';
 import { useBatchDynamicQuery } from '@/hooks/use-dynamic-query';
 import { getUserTimezone } from '@/lib/timezone';
+import { useDateFilters } from '@/hooks/use-date-filters';
 import {
 	metricVisibilityAtom,
 	toggleMetricAtom,
@@ -52,6 +53,7 @@ const CustomEventsSection = dynamic(() =>
 
 interface ChartDataPoint {
 	date: string;
+	rawDate?: string;
 	pageviews?: number;
 	visitors?: number;
 	sessions?: number;
@@ -142,11 +144,15 @@ export function WebsiteOverviewTab({
 		[]
 	);
 
+	const { setDateRangeAction } = useDateFilters();
+
 	const previousPeriodRange = useMemo(
 		() => calculatePreviousPeriod(dateRange),
 		[dateRange, calculatePreviousPeriod]
 	);
 
+	const [visibleMetrics] = useAtom(metricVisibilityAtom);
+
 	const queries = [
 		{
 			id: 'overview-summary',
@@ -241,26 +247,6 @@ export function WebsiteOverviewTab({
 			getDataForQuery('overview-custom-events', 'outbound_domains') || [],
 	};
 
-	const [visibleMetrics] = useAtom(metricVisibilityAtom);
-	const [, toggleMetricAction] = useAtom(toggleMetricAtom);
-
-	const toggleMetric = useCallback(
-		(metric: string) => {
-			if (metric in visibleMetrics) {
-				toggleMetricAction(metric as keyof typeof visibleMetrics);
-			}
-		},
-		[visibleMetrics, toggleMetricAction]
-	);
-
-	const hiddenMetrics = useMemo(() => {
-		const result: Record<string, boolean> = {};
-		for (const key of Object.keys(visibleMetrics)) {
-			result[key] = !visibleMetrics[key as keyof typeof visibleMetrics];
-		}
-		return result;
-	}, [visibleMetrics]);
-
 	const createPercentageCell = () => (info: CellInfo) => {
 		const percentage = info.getValue() as number;
 		return <PercentageBadge percentage={percentage} />;
@@ -355,32 +341,22 @@ export function WebsiteOverviewTab({
 	);
 
 	const chartData = useMemo(() => {
-		if (!analytics.events_by_date?.length) {
-			return [];
-		}
+		if (!analytics.events_by_date?.length) return [];
+
 		const filteredEvents = filterFutureEvents(analytics.events_by_date);
-		return filteredEvents.map((event: MetricPoint): ChartDataPoint => {
-			const filtered: ChartDataPoint = {
-				date: formatDateByGranularity(event.date, dateRange.granularity),
-			};
-			if (visibleMetrics.pageviews) {
-				filtered.pageviews = event.pageviews as number;
-			}
-			if (visibleMetrics.visitors) {
-				filtered.visitors =
-					(event.visitors as number) || (event.unique_visitors as number) || 0;
-			}
-			if (visibleMetrics.sessions) {
-				filtered.sessions = event.sessions as number;
-			}
-			if (visibleMetrics.bounce_rate) {
-				filtered.bounce_rate = event.bounce_rate as number;
-			}
-			if (visibleMetrics.avg_session_duration) {
-				filtered.avg_session_duration = event.avg_session_duration as number;
-			}
-			return filtered;
-		});
+		return filteredEvents.map((event: MetricPoint): ChartDataPoint => ({
+			date: formatDateByGranularity(event.date, dateRange.granularity),
+			rawDate: event.date,
+			...(visibleMetrics.pageviews && { pageviews: event.pageviews as number }),
+			...(visibleMetrics.visitors && { 
+				visitors: (event.visitors as number) || (event.unique_visitors as number) || 0 
+			}),
+			...(visibleMetrics.sessions && { sessions: event.sessions as number }),
+			...(visibleMetrics.bounce_rate && { bounce_rate: event.bounce_rate as number }),
+			...(visibleMetrics.avg_session_duration && { 
+				avg_session_duration: event.avg_session_duration as number 
+			}),
+		}));
 	}, [
 		analytics.events_by_date,
 		dateRange.granularity,
@@ -389,37 +365,32 @@ export function WebsiteOverviewTab({
 	]);
 
 	const miniChartData = useMemo(() => {
-		if (!analytics.events_by_date?.length) {
-			return {};
-		}
+		if (!analytics.events_by_date?.length) return {};
+
 		const filteredEvents = filterFutureEvents(analytics.events_by_date);
 		const createChartSeries = (
 			field: keyof MetricPoint,
 			transform?: (value: number) => number
 		) =>
 			filteredEvents.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,
+				date: dateRange.granularity === 'hourly' ? event.date : event.date.slice(0, 10),
+				value: transform ? transform(event[field] as number) : (event[field] as number) || 0,
 			}));
+
+		const formatSessionDuration = (value: number) => {
+			if (value < 60) return Math.round(value);
+			const minutes = Math.floor(value / 60);
+			const seconds = Math.round(value % 60);
+			return minutes * 60 + seconds;
+		};
+
 		return {
 			visitors: createChartSeries('visitors'),
 			sessions: createChartSeries('sessions'),
 			pageviews: createChartSeries('pageviews'),
 			pagesPerSession: createChartSeries('pages_per_session'),
 			bounceRate: createChartSeries('bounce_rate'),
-			sessionDuration: createChartSeries('avg_session_duration', (value) => {
-				if (value < 60) {
-					return Math.round(value);
-				}
-				const minutes = Math.floor(value / 60);
-				const seconds = Math.round(value % 60);
-				return minutes * 60 + seconds;
-			}),
+			sessionDuration: createChartSeries('avg_session_duration', formatSessionDuration),
 		};
 	}, [analytics.events_by_date, dateRange.granularity, filterFutureEvents]);
 
@@ -968,9 +939,8 @@ export function WebsiteOverviewTab({
 						className="rounded border-0"
 						data={chartData}
 						height={350}
-						hiddenMetrics={hiddenMetrics}
 						isLoading={isLoading}
-						onToggleMetric={toggleMetric}
+						onRangeSelect={setDateRangeAction}
 					/>
 				</div>
 			</div>

apps/dashboard/components/charts/metrics-chart.tsx

@@ -1,9 +1,12 @@
 import { ChartLineIcon } from '@phosphor-icons/react';
+import { useAtom } from 'jotai';
+import { useMemo, useState } from 'react';
 import {
 	Area,
 	CartesianGrid,
 	ComposedChart,
 	Legend,
+	ReferenceArea,
 	ResponsiveContainer,
 	Tooltip,
 	XAxis,
@@ -23,6 +26,10 @@ import {
 	type MetricConfig,
 } from './metrics-constants';
 import { SkeletonChart } from './skeleton-chart';
+import {
+	metricVisibilityAtom,
+	toggleMetricAtom,
+} from '@/stores/jotai/chartAtoms';
 
 const CustomTooltip = ({ active, payload, label }: any) => {
 	if (!(active && payload?.length)) {
@@ -76,17 +83,21 @@ const CustomTooltip = ({ active, payload, label }: any) => {
 	);
 };
 
+interface DateRangeState {
+	startDate: Date;
+	endDate: Date;
+}
+
 interface MetricsChartProps {
 	data: ChartDataRow[] | undefined;
 	isLoading: boolean;
 	height?: number;
 	title?: string;
 	description?: string;
 	className?: string;
-	hiddenMetrics?: Record<string, boolean>;
-	onToggleMetric?: (metricKey: string) => void;
 	metricsFilter?: (metric: MetricConfig) => boolean;
 	showLegend?: boolean;
+	onRangeSelect?: (dateRange: DateRangeState) => void;
 }
 
 export function MetricsChart({
@@ -96,41 +107,87 @@ export function MetricsChart({
 	title,
 	description,
 	className,
-	hiddenMetrics = {},
-	onToggleMetric,
 	metricsFilter,
 	showLegend = true,
+	onRangeSelect,
 }: MetricsChartProps) {
 	const rawData = data || [];
+	const [refAreaLeft, setRefAreaLeft] = useState<string | null>(null);
+	const [refAreaRight, setRefAreaRight] = useState<string | null>(null);
 
+	const [visibleMetrics] = useAtom(metricVisibilityAtom);
+	const [, toggleMetric] = useAtom(toggleMetricAtom);
+
+	const hiddenMetrics = useMemo(
+		() => Object.fromEntries(
+			Object.entries(visibleMetrics).map(([key, visible]) => [key, !visible])
+		),
+		[visibleMetrics]
+	);
+
+	const DEFAULT_METRICS = ['pageviews', 'visitors', 'sessions', 'bounce_rate', 'avg_session_duration'];
+	
 	const metrics = metricsFilter
 		? METRICS.filter(metricsFilter)
-		: METRICS.filter((metric) =>
-				[
-					'pageviews',
-					'visitors',
-					'sessions',
-					'bounce_rate',
-					'avg_session_duration',
-				].includes(metric.key)
-			);
+		: METRICS.filter((metric) => DEFAULT_METRICS.includes(metric.key));
 
 	const chartData = rawData.map((item, index) => {
-		const isFutureOrCurrent = index === rawData.length - 1;
-		const connectsToFuture = index === rawData.length - 2;
+		const isLastPoint = index === rawData.length - 1;
+		const isSecondToLast = index === rawData.length - 2;
 
 		const result = { ...item };
 		for (const metric of metrics) {
-			result[`${metric.key}_historical`] = isFutureOrCurrent
-				? null
-				: item[metric.key];
-			if (isFutureOrCurrent || connectsToFuture) {
+			result[`${metric.key}_historical`] = isLastPoint ? null : item[metric.key];
+			if (isLastPoint || isSecondToLast) {
 				result[`${metric.key}_future`] = item[metric.key];
 			}
 		}
 		return result;
 	});
 
+	const handleMouseDown = (e: any) => {
+		if (!e?.activeLabel) return;
+		setRefAreaLeft(e.activeLabel);
+		setRefAreaRight(null);
+	};
+
+	const handleMouseMove = (e: any) => {
+		if (!(refAreaLeft && e?.activeLabel)) return;
+		setRefAreaRight(e.activeLabel);
+	};
+
+	const handleMouseUp = () => {
+		if (!(refAreaLeft && refAreaRight && onRangeSelect)) {
+			setRefAreaLeft(null);
+			setRefAreaRight(null);
+			return;
+		}
+
+		const leftIndex = chartData.findIndex((d) => d.date === refAreaLeft);
+		const rightIndex = chartData.findIndex((d) => d.date === refAreaRight);
+
+		if (leftIndex === -1 || rightIndex === -1) {
+			setRefAreaLeft(null);
+			setRefAreaRight(null);
+			return;
+		}
+
+		const [startIndex, endIndex] = leftIndex < rightIndex 
+			? [leftIndex, rightIndex] 
+			: [rightIndex, leftIndex];
+		
+		const startDateStr = (chartData[startIndex] as any).rawDate || chartData[startIndex].date;
+		const endDateStr = (chartData[endIndex] as any).rawDate || chartData[endIndex].date;
+		
+		onRangeSelect({ 
+			startDate: new Date(startDateStr), 
+			endDate: new Date(endDateStr) 
+		});
+
+		setRefAreaLeft(null);
+		setRefAreaRight(null);
+	};
+
 	if (isLoading) {
 		return <SkeletonChart className="w-full" height={height} title={title} />;
 	}
@@ -178,8 +235,13 @@ export function MetricsChart({
 		<Card className={cn('w-full overflow-hidden rounded-none p-0', className)}>
 			<CardContent className="p-0">
 				<div
-					className="relative"
-					style={{ width: '100%', height: height + 20 }}
+					className="relative select-none"
+					style={{ 
+						width: '100%', 
+						height: height + 20,
+						userSelect: refAreaLeft ? 'none' : 'auto',
+						WebkitUserSelect: refAreaLeft ? 'none' : 'auto',
+					}}
 				>
 					<ResponsiveContainer height="100%" width="100%">
 						<ComposedChart
@@ -190,6 +252,9 @@ export function MetricsChart({
 								left: 20,
 								bottom: chartData.length > 5 ? 60 : 20,
 							}}
+							onMouseDown={handleMouseDown}
+							onMouseMove={handleMouseMove}
+							onMouseUp={handleMouseUp}
 						>
 							<defs>
 								{metrics.map((metric) => (
@@ -236,6 +301,15 @@ export function MetricsChart({
 								content={<CustomTooltip />}
 								cursor={{ stroke: 'var(--primary)', strokeDasharray: '4 4' }}
 							/>
+							{refAreaLeft && refAreaRight && (
+								<ReferenceArea
+									x1={refAreaLeft}
+									x2={refAreaRight}
+									strokeOpacity={0.3}
+									fill="var(--primary)"
+									fillOpacity={0.15}
+								/>
+							)}
 							{showLegend && (
 								<Legend
 									align="center"
@@ -258,8 +332,8 @@ export function MetricsChart({
 										const metric = metrics.find(
 											(m) => m.label === payload.value
 										);
-										if (metric && onToggleMetric) {
-											onToggleMetric(metric.key);
+										if (metric) {
+											toggleMetric(metric.key as keyof typeof visibleMetrics);
 										}
 									}}
 									verticalAlign="bottom"