Allow filter search for country and region.

src/components/hooks/queries/useWebsiteValues.ts

@@ -28,12 +28,15 @@ export function useWebsiteValues({
   const getSearch = (type: string, value: string) => {
     if (value) {
       const values = names[type];
-      return Object.keys(values).reduce((code: string, key: string) => {
+      return Object.keys(values)
-        if (!code && values[key].toLowerCase().includes(value.toLowerCase())) {
+        .reduce((arr: string[], key: string) => {
-          code = key;
+          if (values[key].toLowerCase().includes(value.toLowerCase())) {
-        }
+            return arr.concat(key);
-        return code;
+          }
-      }, '');
+          return arr;
+        }, [])
+        .slice(0, 5)
+        .join(',');
     }
   };
 

src/lib/clickhouse.ts

@@ -68,6 +68,10 @@ function getDateSQL(field: string, unit: string, timezone?: string) {
   return `toDateTime(date_trunc('${unit}', ${field}))`;
 }
 
+function getSearchSQL(column: string, param: string = 'search'): string {
+  return `and positionCaseInsensitive(${column}, {${param}:String}) > 0`;
+}
+
 function mapFilter(column: string, operator: string, name: string, type: string = 'String') {
   const value = `{${name}:${type}}`;
 
@@ -229,6 +233,7 @@ export default {
   connect,
   getDateStringSQL,
   getDateSQL,
+  getSearchSQL,
   getFilterQuery,
   getUTCString,
   parseFilters,

src/lib/prisma.ts

@@ -119,11 +119,11 @@ function getTimestampDiffSQL(field1: string, field2: string): string {
   }
 }
 
-function getSearchSQL(column: string): string {
+function getSearchSQL(column: string, param: string = 'search'): string {
   const db = getDatabaseType();
   const like = db === POSTGRESQL ? 'ilike' : 'like';
 
-  return `and ${column} ${like} {{search}}`;
+  return `and ${column} ${like} {{${param}}`;
 }
 
 function mapFilter(column: string, operator: string, name: string, type: string = '') {

src/pages/api/websites/[websiteId]/values.ts

@@ -49,13 +49,7 @@ export default async (req: NextApiRequestQueryBody<ValuesRequestQuery>, res: Nex
       return unauthorized(res);
     }
 
-    const values = await getValues(
+    const values = await getValues(websiteId, FILTER_COLUMNS[type], startDate, endDate, search);
-      websiteId,
-      FILTER_COLUMNS[type as string],
-      startDate,
-      endDate,
-      search,
-    );
 
     return ok(
       res,

src/queries/analytics/getValues.ts

@@ -19,10 +19,25 @@ async function relationalQuery(
   search: string,
 ) {
   const { rawQuery, getSearchSQL } = prisma;
+  const params = {};
   let searchQuery = '';
 
   if (search) {
-    searchQuery = getSearchSQL(column);
+    if (decodeURIComponent(search).includes(',')) {
+      searchQuery = `AND (${decodeURIComponent(search)
+        .split(',')
+        .slice(0, 5)
+        .map((value: string, index: number) => {
+          const key = `search${index}`;
+
+          params[key] = value;
+
+          return getSearchSQL(column, key).replace('and ', '');
+        })
+        .join(' OR ')})`;
+    } else {
+      searchQuery = getSearchSQL(column);
+    }
   }
 
   return rawQuery(
@@ -43,6 +58,7 @@ async function relationalQuery(
       startDate,
       endDate,
       search: `%${search}%`,
+      ...params,
     },
   );
 }
@@ -54,13 +70,32 @@ async function clickhouseQuery(
   endDate: Date,
   search: string,
 ) {
-  const { rawQuery } = clickhouse;
+  const { rawQuery, getSearchSQL } = clickhouse;
+  const params = {};
   let searchQuery = '';
 
   if (search) {
     searchQuery = `and positionCaseInsensitive(${column}, {search:String}) > 0`;
   }
 
+  if (search) {
+    if (decodeURIComponent(search).includes(',')) {
+      searchQuery = `AND (${decodeURIComponent(search)
+        .split(',')
+        .slice(0, 5)
+        .map((value: string, index: number) => {
+          const key = `search${index}`;
+
+          params[key] = value;
+
+          return getSearchSQL(column, key).replace('and ', '');
+        })
+        .join(' OR ')})`;
+    } else {
+      searchQuery = getSearchSQL(column);
+    }
+  }
+
   return rawQuery(
     `
     select ${column} as value, count(*)
@@ -77,6 +112,7 @@ async function clickhouseQuery(
       startDate,
       endDate,
       search,
+      ...params,
     },
   );
 }