From 0fdc8f792264c4f73ea70aeb1ee8c53b24999596 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Fri, 25 Aug 2023 17:44:16 -0700 Subject: [PATCH 1/5] Fixed region rendering. --- src/components/metrics/RegionsTable.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/metrics/RegionsTable.js b/src/components/metrics/RegionsTable.js index 2e260e41..cafe9300 100644 --- a/src/components/metrics/RegionsTable.js +++ b/src/components/metrics/RegionsTable.js @@ -14,7 +14,9 @@ export function RegionsTable({ websiteId, ...props }) { const { basePath } = useRouter(); const renderLabel = x => { - return regions[x] ? `${regions[x]}, ${countryNames[x.split('-')[0]]}` : x; + const [country, ...codes] = x.split('-'); + const region = codes.join('-'); + return regions[region] ? `${regions[region]}, ${countryNames[country]}` : x; }; const renderLink = ({ x: code }) => { From aff63ed6e40905bbf91e8ce8cac3e4d79602c3fa Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Fri, 25 Aug 2023 17:52:44 -0700 Subject: [PATCH 2/5] Fixed language rendering. --- src/components/hooks/useLanguageNames.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/hooks/useLanguageNames.js b/src/components/hooks/useLanguageNames.js index afcb0ba6..ff59e93d 100644 --- a/src/components/hooks/useLanguageNames.js +++ b/src/components/hooks/useLanguageNames.js @@ -1,7 +1,7 @@ import { useState, useEffect } from 'react'; import { useRouter } from 'next/router'; import { httpGet } from 'next-basics'; -import enUS from 'public/intl/country/en-US.json'; +import enUS from 'public/intl/language/en-US.json'; const languageNames = { 'en-US': enUS, From e422fc1ecd289cc50d050d026ed9efbbbb68461d Mon Sep 17 00:00:00 2001 From: Brian Cao Date: Fri, 25 Aug 2023 18:40:02 -0700 Subject: [PATCH 3/5] Just use subdivision-1. --- src/queries/analytics/events/saveEvent.ts | 4 ++-- src/queries/analytics/sessions/createSession.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/queries/analytics/events/saveEvent.ts b/src/queries/analytics/events/saveEvent.ts index 51087a59..59bacd99 100644 --- a/src/queries/analytics/events/saveEvent.ts +++ b/src/queries/analytics/events/saveEvent.ts @@ -138,8 +138,8 @@ async function clickhouseQuery(data: { session_id: sessionId, event_id: uuid(), country: country ? country : null, - subdivision1: country && subdivision1 ? `${country}-${subdivision1}` : null, - subdivision2: subdivision2 ? subdivision2 : null, + subdivision1: subdivision1 ?? null, + subdivision2: subdivision2 ?? null, city: city ? city : null, url_path: urlPath?.substring(0, URL_LENGTH), url_query: urlQuery?.substring(0, URL_LENGTH), diff --git a/src/queries/analytics/sessions/createSession.ts b/src/queries/analytics/sessions/createSession.ts index 4fd36d2e..65dbd794 100644 --- a/src/queries/analytics/sessions/createSession.ts +++ b/src/queries/analytics/sessions/createSession.ts @@ -30,7 +30,7 @@ export async function createSession(data: Prisma.SessionCreateInput) { screen, language, country, - subdivision1: country && subdivision1 ? `${country}-${subdivision1}` : null, + subdivision1, subdivision2, city, }, From c22fefaa2db29a12dfe48a38da6f6b0e82b7016e Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Fri, 25 Aug 2023 21:26:11 -0700 Subject: [PATCH 4/5] Revert regions rendering due to bad data. --- src/components/metrics/RegionsTable.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/metrics/RegionsTable.js b/src/components/metrics/RegionsTable.js index cafe9300..2e260e41 100644 --- a/src/components/metrics/RegionsTable.js +++ b/src/components/metrics/RegionsTable.js @@ -14,9 +14,7 @@ export function RegionsTable({ websiteId, ...props }) { const { basePath } = useRouter(); const renderLabel = x => { - const [country, ...codes] = x.split('-'); - const region = codes.join('-'); - return regions[region] ? `${regions[region]}, ${countryNames[country]}` : x; + return regions[x] ? `${regions[x]}, ${countryNames[x.split('-')[0]]}` : x; }; const renderLink = ({ x: code }) => { From bb77c2ead6a008e82f021bebe06f8f66b2579ef7 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sat, 26 Aug 2023 12:46:27 -0700 Subject: [PATCH 5/5] Updated cities table. --- src/components/layout/SideNav.js | 10 +++++-- src/components/metrics/CitiesTable.js | 26 +++++++++++++++---- .../metrics/{DataTable.js => ListTable.js} | 6 ++--- src/components/metrics/MetricsTable.js | 4 +-- .../pages/realtime/RealtimeCountries.js | 4 +-- src/components/pages/realtime/RealtimeUrls.js | 6 ++--- .../pages/reports/funnel/FunnelTable.js | 4 +-- .../analytics/sessions/getSessionMetrics.ts | 15 ++++++++--- 8 files changed, 52 insertions(+), 23 deletions(-) rename src/components/metrics/{DataTable.js => ListTable.js} (96%) diff --git a/src/components/layout/SideNav.js b/src/components/layout/SideNav.js index e7e96b7d..ccb6f360 100644 --- a/src/components/layout/SideNav.js +++ b/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 ( @@ -13,7 +19,7 @@ export function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) { key={key} className={classNames(styles.item, { [styles.selected]: asPath.startsWith(url) })} > - + {label} diff --git a/src/components/metrics/CitiesTable.js b/src/components/metrics/CitiesTable.js index fcdc8f88..86b7f07a 100644 --- a/src/components/metrics/CitiesTable.js +++ b/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 ( -
- -
+ + {country && ( + {country} + )} + ); - } + }; return ( `${n}%`) }} /> - {props.width.to(n => `${n.toFixed(0)}%`)} + {props.width.to(n => `${n?.toFixed?.(0)}%`)} )} @@ -102,4 +102,4 @@ const AnimatedRow = ({ ); }; -export default DataTable; +export default ListTable; diff --git a/src/components/metrics/MetricsTable.js b/src/components/metrics/MetricsTable.js index 893427a5..39578381 100644 --- a/src/components/metrics/MetricsTable.js +++ b/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({
{!data && isLoading && !isFetched && } {error && } - {data && !error && } + {data && !error && }
{data && !error && limit && ( diff --git a/src/components/pages/realtime/RealtimeCountries.js b/src/components/pages/realtime/RealtimeCountries.js index 3aecad5f..7a61651a 100644 --- a/src/components/pages/realtime/RealtimeCountries.js +++ b/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 ( - {filter === FILTER_REFERRERS && ( - )} {filter === FILTER_PAGES && ( -