Updated cities table.

src/components/layout/SideNav.js

@@ -4,7 +4,13 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styles from './SideNav.module.css';
 
-export function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
+export function SideNav({
+  selectedKey,
+  items,
+  shallow = true,
+  scroll = false,
+  onSelect = () => {},
+}) {
   const { asPath } = useRouter();
   return (
     <Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
@@ -13,7 +19,7 @@ export function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
           key={key}
           className={classNames(styles.item, { [styles.selected]: asPath.startsWith(url) })}
         >
-          <Link href={url} shallow={shallow}>
+          <Link href={url} shallow={shallow} scroll={scroll}>
             {label}
           </Link>
         </Item>

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 })}>

src/components/pages/realtime/RealtimeCountries.js

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useRouter } from 'next/router';
-import DataTable from 'components/metrics/DataTable';
+import ListTable from 'components/metrics/ListTable';
 import useLocale from 'components/hooks/useLocale';
 import useCountryNames from 'components/hooks/useCountryNames';
 import useMessages from 'components/hooks/useMessages';
@@ -24,7 +24,7 @@ export function RealtimeCountries({ data }) {
   );
 
   return (
-    <DataTable
+    <ListTable
       title={formatMessage(labels.countries)}
       metric={formatMessage(labels.visitors)}
       data={data}

src/components/pages/realtime/RealtimeUrls.js

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import { ButtonGroup, Button, Flexbox } from 'react-basics';
 import firstBy from 'thenby';
 import { percentFilter } from 'lib/filters';
-import DataTable from 'components/metrics/DataTable';
+import ListTable from 'components/metrics/ListTable';
 import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
 import useMessages from 'components/hooks/useMessages';
 
@@ -82,7 +82,7 @@ export function RealtimeUrls({ websiteDomain, data = {} }) {
         </ButtonGroup>
       </Flexbox>
       {filter === FILTER_REFERRERS && (
-        <DataTable
+        <ListTable
           title={formatMessage(labels.referrers)}
           metric={formatMessage(labels.views)}
           renderLabel={renderLink}
@@ -90,7 +90,7 @@ export function RealtimeUrls({ websiteDomain, data = {} }) {
         />
       )}
       {filter === FILTER_PAGES && (
-        <DataTable
+        <ListTable
           title={formatMessage(labels.pages)}
           metric={formatMessage(labels.views)}
           renderLabel={renderLink}

src/components/pages/reports/funnel/FunnelTable.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import DataTable from 'components/metrics/DataTable';
+import ListTable from 'components/metrics/ListTable';
 import { useMessages } from 'components/hooks';
 import { ReportContext } from '../Report';
 
@@ -7,7 +7,7 @@ export function FunnelTable() {
   const { report } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
   return (
-    <DataTable
+    <ListTable
       data={report?.data}
       title={formatMessage(labels.url)}
       metric={formatMessage(labels.visitors)}

src/queries/analytics/sessions/getSessionMetrics.ts

@@ -28,14 +28,18 @@ async function relationalQuery(websiteId: string, column: string, filters: Query
 
   return rawQuery(
     `
-    select ${column} x, count(*) y
+    select 
+      ${column} x,
+      count(*) y
+      ${column === 'city' ? ', country' : ''}
     from website_event
     ${joinSession}
     where website_event.website_id = {{websiteId::uuid}}
       and website_event.created_at between {{startDate}} and {{endDate}}
       and website_event.event_type = {{eventType}}
     ${filterQuery}
-    group by 1
+    group by 1 
+    ${column === 'city' ? ', 3' : ''}
     order by 2 desc
     limit 100`,
     params,
@@ -52,13 +56,16 @@ async function clickhouseQuery(websiteId: string, column: string, filters: Query
   return rawQuery(
     `
     select
-      ${column} x, count(distinct session_id) y
+      ${column} x,
+      count(distinct session_id) y
+      ${column === 'city' ? ', country' : ''}
     from website_event
     where website_id = {websiteId:UUID}
       and created_at between {startDate:DateTime} and {endDate:DateTime}
       and event_type = {eventType:UInt32}
       ${filterQuery}
-    group by x
+    group by x 
+    ${column === 'city' ? ', country' : ''}
     order by y desc
     limit 100
     `,