Merge pull request #2678 from Maxime-J/search-formatted-metrics

#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,25 +1,25 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import { emptyFilter } from 'lib/filters';
 import FilterLink from 'components/common/FilterLink';
+
 import TypeIcon from 'components/common/TypeIcon';
 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)}>
-        {country && <TypeIcon type="country" value={country} />}
+      <FilterLink id="city" value={city} label={formatCity(city, country)}>
+        {country && (
+          <img
+            src={`${process.env.basePath}/images/flags/${country?.toLowerCase() || 'xx'}.png`}
+            alt={country}
+          />
+        )}
       </FilterLink>
     );
   };
@@ -32,6 +32,7 @@ export function CitiesTable(props: MetricsTableProps) {
       metric={formatMessage(labels.visitors)}
       dataFilter={emptyFilter}
       renderLabel={renderLink}
+      searchFormattedValues={true}
     />
   );
 }

src/components/metrics/CountriesTable.tsx

@@ -29,6 +29,8 @@ export function CountriesTable({ ...props }: MetricsTableProps) {
       type="country"
       metric={formatMessage(labels.visitors)}
       renderLabel={renderLink}
+      onDataLoad={handleDataLoad}
+      searchFormattedValues={true}
     />
   );
 }

src/components/metrics/DevicesTable.tsx

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

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

@@ -26,6 +26,7 @@ export interface MetricsTableProps extends ListTableProps {
   onDataLoad?: (data: any) => void;
   onSearch?: (search: string) => void;
   allowSearch?: boolean;
+  searchFormattedValues?: boolean;
   showMore?: boolean;
   params?: { [key: string]: any };
   children?: ReactNode;
@@ -40,6 +41,7 @@ export function MetricsTable({
   onDataLoad,
   delay = null,
   allowSearch = false,
+  searchFormattedValues = false,
   showMore = true,
   params,
   children,
@@ -55,6 +57,20 @@ export function MetricsTable({
     websiteId,
     { type, limit, search, ...params },
     {
+      type,
+      startAt: +startDate,
+      endAt: +endDate,
+      url,
+      referrer,
+      os,
+      title,
+      browser,
+      device,
+      country,
+      region,
+      city,
+      limit,
+      search: (searchFormattedValues) ? undefined : search,
       retryDelay: delay || DEFAULT_ANIMATION_DURATION,
       onDataLoad,
     },
@@ -74,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

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