🎨 Improved y-axis scaling and country names in Analytics

apps/posts/src/utils/constants.ts

@@ -9,11 +9,13 @@ export const STATS_RANGES = {
 } as const;
 
 export const STATS_LABEL_MAPPINGS = {
-    // Countries
-    US: 'United States',
-    TWN: 'Taiwan',
-    TW: 'Taiwan',
-    CN: 'China',
+    // Countries — overrides where i18n-iso-countries has no friendly alias,
+    // or where the alias-mode pick isn't the common short form.
+    GB: 'United Kingdom',
+    KR: 'South Korea',
+    LA: 'Laos',
+    MD: 'Moldova',
+    SY: 'Syria',
 
     // Technical
     'mobile-ios': 'iOS',

apps/posts/src/views/PostAnalytics/Web/components/locations.tsx

@@ -8,7 +8,7 @@ import {STATS_LABEL_MAPPINGS} from '@src/utils/constants';
 
 countries.registerLocale(enLocale);
 const getCountryName = (label: string) => {
-    return STATS_LABEL_MAPPINGS[label as keyof typeof STATS_LABEL_MAPPINGS] || countries.getName(label, 'en') || 'Unknown';
+    return STATS_LABEL_MAPPINGS[label as keyof typeof STATS_LABEL_MAPPINGS] || countries.getName(label, 'en', {select: 'alias'}) || 'Unknown';
 };
 
 interface ProcessedLocationData {

apps/posts/src/views/PostAnalytics/components/stats-filter.tsx

@@ -20,7 +20,7 @@ interface StatsFilterProps extends Omit<React.ComponentProps<typeof Filters>, 'f
 
 // Helper to get country name from code
 const getCountryName = (code: string): string => {
-    return STATS_LABEL_MAPPINGS[code as keyof typeof STATS_LABEL_MAPPINGS] || countries.getName(code, 'en') || code;
+    return STATS_LABEL_MAPPINGS[code as keyof typeof STATS_LABEL_MAPPINGS] || countries.getName(code, 'en', {select: 'alias'}) || code;
 };
 
 // Helper component for visit count badge - used by all filter options

apps/stats/src/utils/constants.ts

@@ -34,10 +34,13 @@ export const STATS_RANGE_OPTIONS = Object.values(STATS_RANGES);
 export const STATS_DEFAULT_RANGE_KEY = 2;
 
 export const STATS_LABEL_MAPPINGS = {
-    // Countries
-    US: 'United States',
-    TWN: 'Taiwan',
-    TW: 'Taiwan',
+    // Countries — overrides where i18n-iso-countries has no friendly alias,
+    // or where the alias-mode pick isn't the common short form.
+    GB: 'United Kingdom',
+    KR: 'South Korea',
+    LA: 'Laos',
+    MD: 'Moldova',
+    SY: 'Syria',
 
     // Technical
     'mobile-ios': 'iOS',

apps/stats/src/views/Stats/Locations/components/locations-card.tsx

@@ -10,7 +10,7 @@ import {getPeriodText} from '@src/utils/chart-helpers';
 
 countries.registerLocale(enLocale);
 const getCountryName = (label: string) => {
-    return STATS_LABEL_MAPPINGS[label as keyof typeof STATS_LABEL_MAPPINGS] || countries.getName(label, 'en') || 'Unknown';
+    return STATS_LABEL_MAPPINGS[label as keyof typeof STATS_LABEL_MAPPINGS] || countries.getName(label, 'en', {select: 'alias'}) || 'Unknown';
 };
 
 // Normalize country code for flag display

apps/stats/src/views/Stats/Newsletters/components/newsletters-kpis.tsx

@@ -201,22 +201,30 @@ const NewsletterKPIs: React.FC<{
             return {barDomain: [0, 1], barTicks: [0, 1]};
         }
 
-        const minValue = Math.min(...values);
-        const maxValue = Math.max(...values);
-
-        // Round to nearest 0.1
-        const roundedMin = Math.floor(minValue * 10) / 10;
-        const roundedMax = Math.ceil(maxValue * 10) / 10;
-
-        // Ensure we have some padding and don't have the same min/max
-        const finalMin = Math.max(0, roundedMin);
-        const finalMax = roundedMax === finalMin ? finalMin + 0.1 : roundedMax;
+        // Include the avg line value so the y-axis always contains both the
+        // tallest bar and the avg reference line.
+        const avgForTab = currentTab === 'avg-open-rate' ? avgOpenRate : avgClickRate;
+        const bucketValue = Math.max(Math.max(...values), avgForTab);
+
+        // Min is always 0. Upper limit:
+        //   < 1%       → 1%
+        //   1% – 10%   → next whole percent above
+        //   10% – 100% → next multiple of 10 above
+        const finalMin = 0;
+        let finalMax;
+        if (bucketValue < 0.01) {
+            finalMax = 0.01;
+        } else if (bucketValue < 0.1) {
+            finalMax = (Math.floor(bucketValue * 100) + 1) / 100;
+        } else {
+            finalMax = (Math.floor(bucketValue * 10) + 1) / 10;
+        }
 
         return {
             barDomain: [finalMin, finalMax],
             barTicks: [finalMin, finalMax]
         };
-    }, [avgsData, currentTab, tabConfig]);
+    }, [avgsData, currentTab, tabConfig, avgOpenRate, avgClickRate]);
 
     if (isLoading) {
         return (

apps/stats/src/views/Stats/components/stats-filter.tsx

@@ -21,7 +21,7 @@ interface StatsFilterProps extends Omit<React.ComponentProps<typeof Filters>, 'f
 
 // Helper to get country name from code
 const getCountryName = (code: string): string => {
-    return STATS_LABEL_MAPPINGS[code as keyof typeof STATS_LABEL_MAPPINGS] || countries.getName(code, 'en') || code;
+    return STATS_LABEL_MAPPINGS[code as keyof typeof STATS_LABEL_MAPPINGS] || countries.getName(code, 'en', {select: 'alias'}) || code;
 };
 
 // Helper component for visit count badge - used by all filter options