fix(metrics): use analytics top_regions for country filter options
Some checks failed
DB migration compat / Check if migrations changed (push) Has been cancelled
DB migration compat / Back-compat — Current branch migrations with ${{ needs.check-migrations-changed.outputs.base_branch }} branch code (push) Has been cancelled
DB migration compat / Forward-compat — Current branch code with ${{ needs.check-migrations-changed.outputs.base_branch }} branch migrations (push) Has been cancelled
DB migration compat / No migration changes (skipped) (push) Has been cancelled

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>
This commit is contained in:
Devin AI 2026-06-04 02:16:37 +00:00
parent bfc1e62cd2
commit a956108e42

View File

@ -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);