From fe9db71ba8f1ee52c2a7fefde822b26c55c88636 Mon Sep 17 00:00:00 2001 From: Maxime-J Date: Mon, 15 Apr 2024 07:45:56 +0000 Subject: [PATCH 1/4] Restore client-side search where needed. --- src/components/metrics/CountriesTable.tsx | 1 + src/components/metrics/DevicesTable.tsx | 1 + src/components/metrics/LanguagesTable.tsx | 1 + src/components/metrics/MetricsTable.tsx | 12 +++++++++++- src/components/metrics/RegionsTable.tsx | 1 + 5 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/metrics/CountriesTable.tsx b/src/components/metrics/CountriesTable.tsx index e38666bfd4..4a5db7fd2f 100644 --- a/src/components/metrics/CountriesTable.tsx +++ b/src/components/metrics/CountriesTable.tsx @@ -42,6 +42,7 @@ export function CountriesTable({ metric={formatMessage(labels.visitors)} renderLabel={renderLink} onDataLoad={handleDataLoad} + searchFormattedValues={true} /> ); } diff --git a/src/components/metrics/DevicesTable.tsx b/src/components/metrics/DevicesTable.tsx index 4df331a4b6..7e078986aa 100644 --- a/src/components/metrics/DevicesTable.tsx +++ b/src/components/metrics/DevicesTable.tsx @@ -27,6 +27,7 @@ export function DevicesTable(props: MetricsTableProps) { type="device" metric={formatMessage(labels.visitors)} renderLabel={renderLink} + searchFormattedValues={true} /> ); } diff --git a/src/components/metrics/LanguagesTable.tsx b/src/components/metrics/LanguagesTable.tsx index 67b6e62237..f6a4de564a 100644 --- a/src/components/metrics/LanguagesTable.tsx +++ b/src/components/metrics/LanguagesTable.tsx @@ -24,6 +24,7 @@ export function LanguagesTable({ metric={formatMessage(labels.visitors)} onDataLoad={data => onDataLoad?.(percentFilter(data))} renderLabel={renderLabel} + searchFormattedValues={true} /> ); } diff --git a/src/components/metrics/MetricsTable.tsx b/src/components/metrics/MetricsTable.tsx index 26355018ff..87779f947b 100644 --- a/src/components/metrics/MetricsTable.tsx +++ b/src/components/metrics/MetricsTable.tsx @@ -28,6 +28,7 @@ export interface MetricsTableProps extends ListTableProps { onDataLoad?: (data: any) => void; onSearch?: (search: string) => void; allowSearch?: boolean; + searchFormattedValues?: boolean; children?: ReactNode; } @@ -40,6 +41,7 @@ export function MetricsTable({ onDataLoad, delay = null, allowSearch = false, + searchFormattedValues = false, children, ...props }: MetricsTableProps) { @@ -69,7 +71,7 @@ export function MetricsTable({ region, city, limit, - search, + search: (searchFormattedValues) ? undefined : search, }, { retryDelay: delay || DEFAULT_ANIMATION_DURATION, onDataLoad }, ); @@ -88,6 +90,14 @@ export function MetricsTable({ } } + if (searchFormattedValues && search) { + items = items.filter(({ x, ...data }) => { + const value = formatValue(x, type, data); + + return value?.toLowerCase().includes(search.toLowerCase()); + }); + } + items = percentFilter(items); return items; diff --git a/src/components/metrics/RegionsTable.tsx b/src/components/metrics/RegionsTable.tsx index 65c91f211d..174ccf0e1e 100644 --- a/src/components/metrics/RegionsTable.tsx +++ b/src/components/metrics/RegionsTable.tsx @@ -35,6 +35,7 @@ export function RegionsTable(props: MetricsTableProps) { metric={formatMessage(labels.visitors)} dataFilter={emptyFilter} renderLabel={renderLink} + searchFormattedValues={true} /> ); } From 53449d65bb1ce194140ef08d1ac0e45331974c7c Mon Sep 17 00:00:00 2001 From: Maxime-J Date: Mon, 15 Apr 2024 16:41:16 +0000 Subject: [PATCH 2/4] Export and use formatCity. --- src/components/hooks/useFormat.ts | 2 +- src/components/metrics/CitiesTable.tsx | 13 +++---------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/src/components/hooks/useFormat.ts b/src/components/hooks/useFormat.ts index 57edfa5201..11bfcd4937 100644 --- a/src/components/hooks/useFormat.ts +++ b/src/components/hooks/useFormat.ts @@ -53,7 +53,7 @@ export function useFormat() { } }; - return { formatOS, formatBrowser, formatDevice, formatCountry, formatRegion, formatValue }; + return { formatOS, formatBrowser, formatDevice, formatCountry, formatRegion, formatCity, formatValue }; } export default useFormat; diff --git a/src/components/metrics/CitiesTable.tsx b/src/components/metrics/CitiesTable.tsx index d275e65049..7ef3223f35 100644 --- a/src/components/metrics/CitiesTable.tsx +++ b/src/components/metrics/CitiesTable.tsx @@ -1,23 +1,16 @@ import MetricsTable, { MetricsTableProps } from './MetricsTable'; import { emptyFilter } from 'lib/filters'; import FilterLink from 'components/common/FilterLink'; -import { useLocale } from 'components/hooks'; import { useMessages } from 'components/hooks'; -import { useCountryNames } from 'components/hooks'; +import { useFormat } from 'components/hooks'; export function CitiesTable(props: MetricsTableProps) { - const { locale } = useLocale(); const { formatMessage, labels } = useMessages(); - const countryNames = useCountryNames(locale); - - const renderLabel = (city: string, country: string) => { - const countryName = countryNames[country]; - return countryName ? `${city}, ${countryName}` : city; - }; + const { formatCity } = useFormat(); const renderLink = ({ x: city, country }) => { return ( - + {country && ( Date: Mon, 15 Apr 2024 16:50:16 +0000 Subject: [PATCH 3/4] Add language to useFormat. --- src/components/hooks/useFormat.ts | 19 ++++++++++++++++++- src/components/metrics/LanguagesTable.tsx | 6 +++--- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/components/hooks/useFormat.ts b/src/components/hooks/useFormat.ts index 11bfcd4937..2316e73292 100644 --- a/src/components/hooks/useFormat.ts +++ b/src/components/hooks/useFormat.ts @@ -2,12 +2,14 @@ import useMessages from './useMessages'; import { BROWSERS, OS_NAMES } from 'lib/constants'; import useLocale from './useLocale'; import useCountryNames from './useCountryNames'; +import useLanguageNames from './useLanguageNames'; import regions from '../../../public/iso-3166-2.json'; export function useFormat() { const { formatMessage, labels } = useMessages(); const { locale } = useLocale(); const countryNames = useCountryNames(locale); + const languageNames = useLanguageNames(locale); const formatOS = (value: string): string => { return OS_NAMES[value] || value; @@ -34,6 +36,10 @@ export function useFormat() { return countryNames[country] ? `${value}, ${countryNames[country]}` : value; }; + const formatLanguage = (value: string): string => { + return languageNames[value?.split('-')[0]] || value; + }; + const formatValue = (value: string, type: string, data?: { [key: string]: any }): string => { switch (type) { case 'os': @@ -48,12 +54,23 @@ export function useFormat() { return formatRegion(value); case 'city': return formatCity(value, data?.country); + case 'language': + return formatLanguage(value); default: return value; } }; - return { formatOS, formatBrowser, formatDevice, formatCountry, formatRegion, formatCity, formatValue }; + return { + formatOS, + formatBrowser, + formatDevice, + formatCountry, + formatRegion, + formatCity, + formatLanguage, + formatValue, + }; } export default useFormat; diff --git a/src/components/metrics/LanguagesTable.tsx b/src/components/metrics/LanguagesTable.tsx index f6a4de564a..24b62046f6 100644 --- a/src/components/metrics/LanguagesTable.tsx +++ b/src/components/metrics/LanguagesTable.tsx @@ -1,8 +1,8 @@ import MetricsTable, { MetricsTableProps } from './MetricsTable'; import { percentFilter } from 'lib/filters'; -import { useLanguageNames } from 'components/hooks'; import { useLocale } from 'components/hooks'; import { useMessages } from 'components/hooks'; +import { useFormat } from 'components/hooks'; export function LanguagesTable({ onDataLoad, @@ -10,10 +10,10 @@ export function LanguagesTable({ }: { onDataLoad: (data: any) => void } & MetricsTableProps) { const { formatMessage, labels } = useMessages(); const { locale } = useLocale(); - const languageNames = useLanguageNames(locale); + const { formatLanguage } = useFormat(); const renderLabel = ({ x }) => { - return
{languageNames[x?.split('-')[0]] ?? x}
; + return
{formatLanguage(x)}
; }; return ( From 73f5aca8effe6f4215d8de357b3b7e80bd180110 Mon Sep 17 00:00:00 2001 From: Maxime-J Date: Mon, 15 Apr 2024 16:54:42 +0000 Subject: [PATCH 4/4] Search cities in app. --- src/components/metrics/CitiesTable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/metrics/CitiesTable.tsx b/src/components/metrics/CitiesTable.tsx index 7ef3223f35..fbbcafa697 100644 --- a/src/components/metrics/CitiesTable.tsx +++ b/src/components/metrics/CitiesTable.tsx @@ -29,6 +29,7 @@ export function CitiesTable(props: MetricsTableProps) { metric={formatMessage(labels.visitors)} dataFilter={emptyFilter} renderLabel={renderLink} + searchFormattedValues={true} /> ); }