From a956108e42d37d57585a265e1d8eb20522b8fa81 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 4 Jun 2026 02:16:37 +0000
Subject: [PATCH] fix(metrics): use analytics top_regions for country filter
 options
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Country filter options were drawn from data.users_by_country (all-time
user registrations) while the analytics overview uses page-view events
scoped to the last 30 days. This caused countries with registered users
but no recent page-view activity to appear in the filter menu but yield
0 visitors when selected — a silently empty filter.

Switch to analytics.top_regions so the filter option list is consistent
with the data displayed in the overview.

Co-Authored-By: mantra <mantra@stack-auth.com>
---
 .../projects/[projectId]/(overview)/metrics-page.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx
index 222f866d9..72ceb9d21 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx
@@ -489,14 +489,6 @@ function FilterMenu({
   );
 }
 
-function countryRowsToFilterOptions(usersByCountry: Record<string, number>): FilterOption[] {
-  return Object.entries(usersByCountry)
-    .filter(([code, count]) => code.length > 0 && Number.isFinite(count) && count > 0)
-    .sort((a, b) => b[1] - a[1] || stringCompare(a[0], b[0]))
-    .slice(0, 15)
-    .map(([code]) => ({ value: code.toUpperCase(), label: code.toUpperCase() }));
-}
-
 function FilterMenuContent({
   filters,
   onSelect,
@@ -511,12 +503,12 @@ function FilterMenuContent({
   const analytics = data.analytics_overview;
 
   const dimensions = useMemo<FilterDimensionConfig[]>(() => [
-    { key: "country_code", label: "Country", options: countryRowsToFilterOptions(data.users_by_country) },
+    { key: "country_code", label: "Country", options: analytics.top_regions.slice(0, 15).map((r) => ({ value: r.country_code.toUpperCase(), label: r.country_code.toUpperCase() })) },
     { key: "referrer", label: "Referrer", options: analytics.top_referrers.slice(0, 15).map((r) => ({ value: r.referrer, label: r.referrer || "(direct)" })) },
     { key: "browser", label: "Browser", options: analytics.top_browsers.slice(0, 15).map((b) => ({ value: b.name, label: b.name })) },
     { key: "os", label: "OS", options: analytics.top_operating_systems.slice(0, 15).map((o) => ({ value: o.name, label: o.name })) },
     { key: "device", label: "Device", options: analytics.top_devices.slice(0, 15).map((d) => ({ value: d.name, label: d.name })) },
-  ], [analytics.top_browsers, analytics.top_devices, analytics.top_operating_systems, analytics.top_referrers, data.users_by_country]);
+  ], [analytics.top_browsers, analytics.top_devices, analytics.top_operating_systems, analytics.top_referrers, analytics.top_regions]);
 
   const firstAvailableDimension = dimensions.find((dimension) => dimension.options.length > 0)?.key ?? "country_code";
   const [selectedDimension, setSelectedDimension] = useState<keyof AnalyticsOverviewFilters>(firstAvailableDimension);