Updated cities table.

src/components/metrics/CitiesTable.js

@@ -1,20 +1,36 @@
+import { useRouter } from 'next/router';
 import MetricsTable from './MetricsTable';
 import { emptyFilter } from 'lib/filters';
 import FilterLink from 'components/common/FilterLink';
 import useLocale from 'components/hooks/useLocale';
 import useMessages from 'components/hooks/useMessages';
+import useCountryNames from 'components/hooks/useCountryNames';
 
 export function CitiesTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
+  const { basePath } = useRouter();
+  const countryNames = useCountryNames(locale);
 
-  function renderLink({ x }) {
+  const renderLabel = (city, country) => {
+    const name = countryNames[country];
+    return name ? `${city}, ${name}` : city;
+  };
+
+  const renderLink = ({ x: city, country }) => {
     return (
-      <div className={locale}>
-        <FilterLink id="city" value={x} />
-      </div>
+      <FilterLink id="city" value={city} label={renderLabel(city, country)}>
+        {country && (
+          <img
+            src={`${basePath}/images/flags/${
+              country?.split?.('-')?.[0]?.toLowerCase() || 'xx'
+            }.png`}
+            alt={country}
+          />
+        )}
+      </FilterLink>
     );
-  }
+  };
 
   return (
     <MetricsTable

src/components/metrics/ListTable.js

@@ -8,7 +8,7 @@ import { formatNumber, formatLongNumber } from 'lib/format';
 import useMessages from 'components/hooks/useMessages';
 import styles from './DataTable.module.css';
 
-export function DataTable({
+export function ListTable({
   data = [],
   title,
   metric,
@@ -94,7 +94,7 @@ const AnimatedRow = ({
         <div className={styles.percent}>
           <animated.div className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
           <animated.span className={styles.percentValue}>
-            {props.width.to(n => `${n.toFixed(0)}%`)}
+            {props.width.to(n => `${n?.toFixed?.(0)}%`)}
           </animated.span>
         </div>
       )}
@@ -102,4 +102,4 @@ const AnimatedRow = ({
   );
 };
 
-export default DataTable;
+export default ListTable;

src/components/metrics/MetricsTable.js

@@ -8,7 +8,7 @@ import { percentFilter } from 'lib/filters';
 import useDateRange from 'components/hooks/useDateRange';
 import usePageQuery from 'components/hooks/usePageQuery';
 import ErrorMessage from 'components/common/ErrorMessage';
-import DataTable from './DataTable';
+import ListTable from './ListTable';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import Icons from 'components/icons';
 import useMessages from 'components/hooks/useMessages';
@@ -104,7 +104,7 @@ export function MetricsTable({
     <div className={classNames(styles.container, className)}>
       {!data && isLoading && !isFetched && <Loading icon="dots" />}
       {error && <ErrorMessage />}
-      {data && !error && <DataTable {...props} data={filteredData} className={className} />}
+      {data && !error && <ListTable {...props} data={filteredData} className={className} />}
       <div className={styles.footer}>
         {data && !error && limit && (
           <Link href={router.pathname} as={resolveUrl({ view: type })}>