From 100e7c1a1bd6dbce62a5449e6c10736448908957 Mon Sep 17 00:00:00 2001 From: Sajid Mehmood Date: Wed, 22 Jul 2026 20:49:37 +0000 Subject: [PATCH 1/2] Add click-to-filter by country on WorldMap Clicking a country on the world map now applies a country=eq.XX filter, matching the filter behavior of the country metrics table. Adds a pointer cursor to indicate countries are clickable. Run-on: Niteshift Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/metrics/WorldMap.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx index 3c8fadb80..82153e054 100644 --- a/src/components/metrics/WorldMap.tsx +++ b/src/components/metrics/WorldMap.tsx @@ -6,6 +6,7 @@ import { useCountryNames, useLocale, useMessages, + useNavigation, useWebsiteMetricsQuery, } from '@/components/hooks'; import { getThemeColors } from '@/lib/colors'; @@ -25,6 +26,7 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) { const { locale } = useLocale(); const { formatMessage, labels } = useMessages(); const { countryNames } = useCountryNames(locale); + const { router, updateParams } = useNavigation(); const visitorsLabel = formatMessage(labels.visitors).toLocaleLowerCase(locale); const unknownLabel = formatMessage(labels.unknown); @@ -54,6 +56,11 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) { return code === 'AQ' ? 0 : 1; }; + const handleClick = (code: string) => { + if (!code || code === 'AQ') return; + router.replace(updateParams({ country: `eq.${code}` })); + }; + const handleHover = (code: string) => { if (code === 'AQ') return; const country = metrics?.find(({ x }) => x === code); @@ -86,12 +93,13 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) { stroke={colors.map.strokeColor} opacity={getOpacity(code)} style={{ - default: { outline: 'none' }, + default: { outline: 'none', cursor: code ? 'pointer' : 'default' }, hover: { outline: 'none', fill: colors.map.hoverColor }, pressed: { outline: 'none' }, }} onMouseOver={() => handleHover(code)} onMouseOut={() => setTooltipPopup(null)} + onClick={() => handleClick(code)} /> ); }); From 1b79c5dd6ac6664fdfc45806957b080dc6dc5e28 Mon Sep 17 00:00:00 2001 From: Sajid Mehmood Date: Wed, 22 Jul 2026 20:53:02 +0000 Subject: [PATCH 2/2] Only show pointer cursor on filterable countries Antarctica (AQ) is skipped by handleClick, so it should not display a clickable cursor. Match the cursor guard to the click guard. Run-on: Niteshift Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/metrics/WorldMap.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx index 82153e054..1fee6deb4 100644 --- a/src/components/metrics/WorldMap.tsx +++ b/src/components/metrics/WorldMap.tsx @@ -93,7 +93,10 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) { stroke={colors.map.strokeColor} opacity={getOpacity(code)} style={{ - default: { outline: 'none', cursor: code ? 'pointer' : 'default' }, + default: { + outline: 'none', + cursor: code && code !== 'AQ' ? 'pointer' : 'default', + }, hover: { outline: 'none', fill: colors.map.hoverColor }, pressed: { outline: 'none' }, }}