Localized country names.

components/common/WorldMap.js

@@ -6,6 +6,8 @@ import tinycolor from 'tinycolor2';
 import useTheme from 'hooks/useTheme';
 import { THEME_COLORS } from 'lib/constants';
 import styles from './WorldMap.module.css';
+import useCountryNames from 'hooks/useCountryNames';
+import useLocale from 'hooks/useLocale';
 
 const geoUrl = '/world-110m.json';
 
@@ -21,6 +23,8 @@ export default function WorldMap({ data, className }) {
     }),
     [theme],
   );
+  const [locale] = useLocale();
+  const countryNames = useCountryNames(locale);
 
   function getFillColor(code) {
     if (code === 'AQ') return;
@@ -39,10 +43,10 @@ export default function WorldMap({ data, className }) {
     return code === 'AQ' ? 0 : 1;
   }
 
-  function handleHover({ ISO_A2: code, NAME: name }) {
+  function handleHover(code) {
     if (code === 'AQ') return;
     const country = data?.find(({ x }) => x === code);
-    setTooltip(`${name}: ${country?.y || 0} visitors`);
+    setTooltip(`${countryNames[code]}: ${country?.y || 0} visitors`);
   }
 
   return (
@@ -70,7 +74,7 @@ export default function WorldMap({ data, className }) {
                       hover: { outline: 'none', fill: colors.hoverColor },
                       pressed: { outline: 'none' },
                     }}
-                    onMouseOver={() => handleHover(geo.properties)}
+                    onMouseOver={() => handleHover(code)}
                     onMouseOut={() => setTooltip(null)}
                   />
                 );

components/metrics/CountriesTable.js

@@ -1,9 +1,18 @@
 import React from 'react';
 import MetricsTable from './MetricsTable';
-import { countryFilter, percentFilter } from 'lib/filters';
+import { percentFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
+import useCountryNames from 'hooks/useCountryNames';
+import useLocale from 'hooks/useLocale';
 
 export default function CountriesTable({ websiteId, token, limit, onDataLoad = () => {} }) {
+  const [locale] = useLocale();
+  const countryNames = useCountryNames(locale);
+
+  function renderLabel({ x }) {
+    return <div className={locale}>{countryNames[x]}</div>;
+  }
+
   return (
     <MetricsTable
       title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
@@ -12,8 +21,8 @@ export default function CountriesTable({ websiteId, token, limit, onDataLoad = (
       websiteId={websiteId}
       token={token}
       limit={limit}
-      dataFilter={countryFilter}
       onDataLoad={data => onDataLoad(percentFilter(data))}
+      renderLabel={renderLabel}
     />
   );
 }

components/pages/WebsiteDetails.js

@@ -42,7 +42,7 @@ export default function WebsiteDetails({ websiteId, token }) {
   } = usePageQuery();
 
   const BackButton = () => (
-    <div className={styles.backButton}>
+    <div key="back-button" className={styles.backButton}>
       <Link
         key="back-button"
         href={router.pathname}

hooks/useCountryNames.js

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import { get } from 'lib/web';
+import enUS from 'public/country/en-US.json';
+
+const countryNames = {
+  'en-US': enUS,
+};
+
+export default function useCountryNames(locale) {
+  const [list, setList] = useState(countryNames[locale] || enUS);
+
+  async function loadData(locale) {
+    const { ok, data } = await get(`/country/${locale}.json`);
+
+    if (ok) {
+      countryNames[locale] = data;
+      setList(countryNames[locale]);
+    } else {
+      setList(enUS);
+    }
+  }
+
+  useEffect(() => {
+    if (!countryNames[locale]) {
+      loadData(locale);
+    } else {
+      setList(countryNames[locale]);
+    }
+  }, [locale]);
+
+  return list;
+}

hooks/useTheme.js

@@ -4,7 +4,7 @@ import { getItem, setItem } from 'lib/web';
 import { THEME_CONFIG } from 'lib/constants';
 import { useEffect } from 'react';
 
-export default function useLocale() {
+export default function useTheme() {
   const theme = useSelector(state => state.app.theme || getItem(THEME_CONFIG) || 'light');
   const dispatch = useDispatch();
 

hooks/useTimezone.js

@@ -1,13 +1,14 @@
 import { useState, useCallback } from 'react';
 import { getTimezone } from 'lib/date';
 import { getItem, setItem } from 'lib/web';
+import { TIMEZONE_CONFIG } from 'lib/constants';
 
 export default function useTimezone() {
-  const [timezone, setTimezone] = useState(getItem('umami.timezone') || getTimezone());
+  const [timezone, setTimezone] = useState(getItem(TIMEZONE_CONFIG) || getTimezone());
 
   const saveTimezone = useCallback(
     value => {
-      setItem('umami.timezone', value);
+      setItem(TIMEZONE_CONFIG, value);
       setTimezone(value);
     },
     [setTimezone],

lib/constants.js

@@ -132,251 +132,3 @@ export const BROWSERS = {
   'ios-webview': 'iOS (webview)',
   searchbot: 'Searchbot',
 };
-
-export const ISO_COUNTRIES = {
-  AF: 'Afghanistan',
-  AX: 'Aland Islands',
-  AL: 'Albania',
-  DZ: 'Algeria',
-  AS: 'American Samoa',
-  AD: 'Andorra',
-  AO: 'Angola',
-  AI: 'Anguilla',
-  AQ: 'Antarctica',
-  AG: 'Antigua And Barbuda',
-  AR: 'Argentina',
-  AM: 'Armenia',
-  AW: 'Aruba',
-  AU: 'Australia',
-  AT: 'Austria',
-  AZ: 'Azerbaijan',
-  BS: 'Bahamas',
-  BH: 'Bahrain',
-  BD: 'Bangladesh',
-  BB: 'Barbados',
-  BY: 'Belarus',
-  BE: 'Belgium',
-  BZ: 'Belize',
-  BJ: 'Benin',
-  BM: 'Bermuda',
-  BT: 'Bhutan',
-  BO: 'Bolivia',
-  BA: 'Bosnia And Herzegovina',
-  BW: 'Botswana',
-  BV: 'Bouvet Island',
-  BR: 'Brazil',
-  IO: 'British Indian Ocean Territory',
-  BN: 'Brunei Darussalam',
-  BG: 'Bulgaria',
-  BF: 'Burkina Faso',
-  BI: 'Burundi',
-  KH: 'Cambodia',
-  CM: 'Cameroon',
-  CA: 'Canada',
-  CV: 'Cape Verde',
-  KY: 'Cayman Islands',
-  CF: 'Central African Republic',
-  TD: 'Chad',
-  CL: 'Chile',
-  CN: 'China',
-  CX: 'Christmas Island',
-  CC: 'Cocos (Keeling) Islands',
-  CO: 'Colombia',
-  KM: 'Comoros',
-  CG: 'Congo',
-  CD: 'Congo, Democratic Republic',
-  CK: 'Cook Islands',
-  CR: 'Costa Rica',
-  CI: "Cote D'Ivoire",
-  HR: 'Croatia',
-  CU: 'Cuba',
-  CY: 'Cyprus',
-  CZ: 'Czech Republic',
-  DK: 'Denmark',
-  DJ: 'Djibouti',
-  DM: 'Dominica',
-  DO: 'Dominican Republic',
-  EC: 'Ecuador',
-  EG: 'Egypt',
-  SV: 'El Salvador',
-  GQ: 'Equatorial Guinea',
-  ER: 'Eritrea',
-  EE: 'Estonia',
-  ET: 'Ethiopia',
-  FK: 'Falkland Islands (Malvinas)',
-  FO: 'Faroe Islands',
-  FJ: 'Fiji',
-  FI: 'Finland',
-  FR: 'France',
-  GF: 'French Guiana',
-  PF: 'French Polynesia',
-  TF: 'French Southern Territories',
-  GA: 'Gabon',
-  GM: 'Gambia',
-  GE: 'Georgia',
-  DE: 'Germany',
-  GH: 'Ghana',
-  GI: 'Gibraltar',
-  GR: 'Greece',
-  GL: 'Greenland',
-  GD: 'Grenada',
-  GP: 'Guadeloupe',
-  GU: 'Guam',
-  GT: 'Guatemala',
-  GG: 'Guernsey',
-  GN: 'Guinea',
-  GW: 'Guinea-Bissau',
-  GY: 'Guyana',
-  HT: 'Haiti',
-  HM: 'Heard Island & Mcdonald Islands',
-  VA: 'Holy See (Vatican City State)',
-  HN: 'Honduras',
-  HK: 'Hong Kong',
-  HU: 'Hungary',
-  IS: 'Iceland',
-  IN: 'India',
-  ID: 'Indonesia',
-  IR: 'Iran, Islamic Republic Of',
-  IQ: 'Iraq',
-  IE: 'Ireland',
-  IM: 'Isle Of Man',
-  IL: 'Israel',
-  IT: 'Italy',
-  JM: 'Jamaica',
-  JP: 'Japan',
-  JE: 'Jersey',
-  JO: 'Jordan',
-  KZ: 'Kazakhstan',
-  KE: 'Kenya',
-  KI: 'Kiribati',
-  KR: 'Korea',
-  KW: 'Kuwait',
-  KG: 'Kyrgyzstan',
-  LA: "Lao People's Democratic Republic",
-  LV: 'Latvia',
-  LB: 'Lebanon',
-  LS: 'Lesotho',
-  LR: 'Liberia',
-  LY: 'Libyan Arab Jamahiriya',
-  LI: 'Liechtenstein',
-  LT: 'Lithuania',
-  LU: 'Luxembourg',
-  MO: 'Macao',
-  MK: 'Macedonia',
-  MG: 'Madagascar',
-  MW: 'Malawi',
-  MY: 'Malaysia',
-  MV: 'Maldives',
-  ML: 'Mali',
-  MT: 'Malta',
-  MH: 'Marshall Islands',
-  MQ: 'Martinique',
-  MR: 'Mauritania',
-  MU: 'Mauritius',
-  YT: 'Mayotte',
-  MX: 'Mexico',
-  FM: 'Micronesia, Federated States Of',
-  MD: 'Moldova',
-  MC: 'Monaco',
-  MN: 'Mongolia',
-  ME: 'Montenegro',
-  MS: 'Montserrat',
-  MA: 'Morocco',
-  MZ: 'Mozambique',
-  MM: 'Myanmar',
-  NA: 'Namibia',
-  NR: 'Nauru',
-  NP: 'Nepal',
-  NL: 'Netherlands',
-  AN: 'Netherlands Antilles',
-  NC: 'New Caledonia',
-  NZ: 'New Zealand',
-  NI: 'Nicaragua',
-  NE: 'Niger',
-  NG: 'Nigeria',
-  NU: 'Niue',
-  NF: 'Norfolk Island',
-  MP: 'Northern Mariana Islands',
-  NO: 'Norway',
-  OM: 'Oman',
-  PK: 'Pakistan',
-  PW: 'Palau',
-  PS: 'Palestinian Territory, Occupied',
-  PA: 'Panama',
-  PG: 'Papua New Guinea',
-  PY: 'Paraguay',
-  PE: 'Peru',
-  PH: 'Philippines',
-  PN: 'Pitcairn',
-  PL: 'Poland',
-  PT: 'Portugal',
-  PR: 'Puerto Rico',
-  QA: 'Qatar',
-  RE: 'Reunion',
-  RO: 'Romania',
-  RU: 'Russia',
-  RW: 'Rwanda',
-  BL: 'Saint Barthelemy',
-  SH: 'Saint Helena',
-  KN: 'Saint Kitts And Nevis',
-  LC: 'Saint Lucia',
-  MF: 'Saint Martin',
-  PM: 'Saint Pierre And Miquelon',
-  VC: 'Saint Vincent And Grenadines',
-  WS: 'Samoa',
-  SM: 'San Marino',
-  ST: 'Sao Tome And Principe',
-  SA: 'Saudi Arabia',
-  SN: 'Senegal',
-  RS: 'Serbia',
-  SC: 'Seychelles',
-  SL: 'Sierra Leone',
-  SG: 'Singapore',
-  SK: 'Slovakia',
-  SI: 'Slovenia',
-  SB: 'Solomon Islands',
-  SO: 'Somalia',
-  ZA: 'South Africa',
-  GS: 'South Georgia And Sandwich Isl.',
-  ES: 'Spain',
-  LK: 'Sri Lanka',
-  SD: 'Sudan',
-  SR: 'Suriname',
-  SJ: 'Svalbard And Jan Mayen',
-  SZ: 'Swaziland',
-  SE: 'Sweden',
-  CH: 'Switzerland',
-  SY: 'Syrian Arab Republic',
-  TW: 'Taiwan',
-  TJ: 'Tajikistan',
-  TZ: 'Tanzania',
-  TH: 'Thailand',
-  TL: 'Timor-Leste',
-  TG: 'Togo',
-  TK: 'Tokelau',
-  TO: 'Tonga',
-  TT: 'Trinidad And Tobago',
-  TN: 'Tunisia',
-  TR: 'Turkey',
-  TM: 'Turkmenistan',
-  TC: 'Turks And Caicos Islands',
-  TV: 'Tuvalu',
-  UG: 'Uganda',
-  UA: 'Ukraine',
-  AE: 'United Arab Emirates',
-  GB: 'United Kingdom',
-  US: 'United States',
-  UM: 'United States Outlying Islands',
-  UY: 'Uruguay',
-  UZ: 'Uzbekistan',
-  VU: 'Vanuatu',
-  VE: 'Venezuela',
-  VN: 'Viet Nam',
-  VG: 'Virgin Islands, British',
-  VI: 'Virgin Islands, U.S.',
-  WF: 'Wallis And Futuna',
-  EH: 'Western Sahara',
-  YE: 'Yemen',
-  ZM: 'Zambia',
-  ZW: 'Zimbabwe',
-};