#2665 fix proposal

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, formatValue };
+  return {
+    formatOS,
+    formatBrowser,
+    formatDevice,
+    formatCountry,
+    formatRegion,
+    formatCity,
+    formatLanguage,
+    formatValue,
+  };
 }
 
 export default useFormat;

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 (
-      <FilterLink id="city" value={city} label={renderLabel(city, country)}>
+      <FilterLink id="city" value={city} label={formatCity(city, country)}>
         {country && (
           <img
             src={`${process.env.basePath}/images/flags/${country?.toLowerCase() || 'xx'}.png`}
@@ -36,6 +29,7 @@ export function CitiesTable(props: MetricsTableProps) {
       metric={formatMessage(labels.visitors)}
       dataFilter={emptyFilter}
       renderLabel={renderLink}
+      searchFormattedValues={true}
     />
   );
 }

src/components/metrics/CountriesTable.tsx

@@ -42,6 +42,7 @@ export function CountriesTable({
       metric={formatMessage(labels.visitors)}
       renderLabel={renderLink}
       onDataLoad={handleDataLoad}
+      searchFormattedValues={true}
     />
   );
 }

src/components/metrics/DevicesTable.tsx

@@ -27,6 +27,7 @@ export function DevicesTable(props: MetricsTableProps) {
       type="device"
       metric={formatMessage(labels.visitors)}
       renderLabel={renderLink}
+      searchFormattedValues={true}
     />
   );
 }

src/components/metrics/LanguagesTable.tsx

@@ -1,19 +1,19 @@
 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,
   ...props
 }: { onDataLoad: (data: any) => void } & MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
-  const languageNames = useLanguageNames(locale);
+  const { formatLanguage } = useFormat();
 
   const renderLabel = ({ x }) => {
-    return <div className={locale}>{languageNames[x?.split('-')[0]] ?? x}</div>;
+    return <div className={locale}>{formatLanguage(x)}</div>;
   };
 
   return (
@@ -24,6 +24,7 @@ export function LanguagesTable({
       metric={formatMessage(labels.visitors)}
       onDataLoad={data => onDataLoad?.(percentFilter(data))}
       renderLabel={renderLabel}
+      searchFormattedValues={true}
     />
   );
 }

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;

src/components/metrics/RegionsTable.tsx

@@ -35,6 +35,7 @@ export function RegionsTable(props: MetricsTableProps) {
       metric={formatMessage(labels.visitors)}
       dataFilter={emptyFilter}
       renderLabel={renderLink}
+      searchFormattedValues={true}
     />
   );
 }