Updated filtering logic.

components/pages/event-data/EventDataTable.js

@@ -16,7 +16,7 @@ export function EventDataTable({ data = [] }) {
     <GridTable data={data}>
       <GridColumn name="eventName" label={formatMessage(labels.event)}>
         {row => (
-          <Link href={resolveUrl({ eventName: row.eventName })} shallow={true}>
+          <Link href={resolveUrl({ event: row.eventName })} shallow={true}>
             {row.eventName}
           </Link>
         )}

components/pages/event-data/EventDataValueTable.js

@@ -6,14 +6,14 @@ import PageHeader from 'components/layout/PageHeader';
 import Empty from 'components/common/Empty';
 import { DATA_TYPES } from 'lib/constants';
 
-export function EventDataValueTable({ data = [], eventName }) {
+export function EventDataValueTable({ data = [], event }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl } = usePageQuery();
 
   const Title = () => {
     return (
       <>
-        <Link href={resolveUrl({ eventName: undefined })}>
+        <Link href={resolveUrl({ event: undefined })}>
           <Button>
             <Icon rotate={180}>
               <Icons.ArrowRight />
@@ -21,7 +21,7 @@ export function EventDataValueTable({ data = [], eventName }) {
             <Text>{formatMessage(labels.back)}</Text>
           </Button>
         </Link>
-        <Text>{eventName}</Text>
+        <Text>{event}</Text>
       </>
     );
   };

components/pages/websites/WebsiteEventData.js

@@ -26,15 +26,15 @@ function useData(websiteId, eventName) {
 
 export default function WebsiteEventData({ websiteId }) {
   const {
-    query: { eventName },
+    query: { event },
   } = usePageQuery();
-  const { data } = useData(websiteId, eventName);
+  const { data } = useData(websiteId, event);
 
   return (
     <Flexbox className={styles.container} direction="column" gap={20}>
       <EventDataMetricsBar websiteId={websiteId} />
-      {!eventName && <EventDataTable data={data} />}
-      {eventName && <EventDataValueTable eventName={eventName} data={data} />}
+      {!event && <EventDataTable data={data} />}
+      {event && <EventDataValueTable event={event} data={data} />}
     </Flexbox>
   );
 }

lib/clickhouse.ts

@@ -3,7 +3,7 @@ import dateFormat from 'dateformat';
 import debug from 'debug';
 import { CLICKHOUSE } from 'lib/db';
 import { QueryFilters } from './types';
-import { FILTER_COLUMNS, IGNORED_FILTERS } from './constants';
+import { FILTER_COLUMNS } from './constants';
 import { loadWebsite } from './load';
 import { maxDate } from './date';
 
@@ -66,9 +66,9 @@ function getDateFormat(date) {
 function getFilterQuery(filters = {}) {
   const query = Object.keys(filters).reduce((arr, key) => {
     const filter = filters[key];
+    const column = FILTER_COLUMNS[key];
 
-    if (filter !== undefined && !IGNORED_FILTERS.includes(key)) {
-      const column = FILTER_COLUMNS[key] || key;
+    if (filter !== undefined && column) {
       arr.push(`and ${column} = {${key}:String}`);
     }
 

lib/constants.ts

@@ -48,23 +48,16 @@ export const FILTER_COLUMNS = {
   referrer: 'referrer_domain',
   title: 'page_title',
   query: 'url_query',
+  os: 'os',
+  browser: 'browser',
+  device: 'device',
+  country: 'country',
   region: 'subdivision1',
-  eventType: 'event_type',
-  eventName: 'event_name',
+  city: 'city',
+  language: 'language',
   event: 'event_name',
 };
 
-export const IGNORED_FILTERS = [
-  'startDate',
-  'endDate',
-  'timezone',
-  'unit',
-  'eventType',
-  'fields',
-  'filters',
-  'groups',
-];
-
 export const COLLECTION_TYPE = {
   event: 'event',
   identify: 'identify',

lib/prisma.ts

@@ -1,7 +1,7 @@
 import prisma from '@umami/prisma-client';
 import moment from 'moment-timezone';
 import { MYSQL, POSTGRESQL, getDatabaseType } from 'lib/db';
-import { FILTER_COLUMNS, IGNORED_FILTERS, SESSION_COLUMNS } from './constants';
+import { FILTER_COLUMNS, SESSION_COLUMNS } from './constants';
 import { loadWebsite } from './load';
 import { maxDate } from './date';
 import { QueryFilters, QueryOptions } from './types';
@@ -70,9 +70,9 @@ function getTimestampIntervalQuery(field: string): string {
 function getFilterQuery(filters = {}): string {
   const query = Object.keys(filters).reduce((arr, key) => {
     const filter = filters[key];
+    const column = FILTER_COLUMNS[key];
 
-    if (filter !== undefined && !IGNORED_FILTERS.includes(key)) {
-      const column = FILTER_COLUMNS[key] || key;
+    if (filter !== undefined && column) {
       arr.push(`and ${column}={{${key}}}`);
 
       if (key === 'referrer') {

lib/types.ts

@@ -135,9 +135,7 @@ export interface QueryFilters {
   endDate?: Date;
   timezone?: string;
   unit?: string;
-  domain?: string;
   eventType?: number;
-  eventName?: string;
   url?: string;
   referrer?: string;
   title?: string;
@@ -149,6 +147,7 @@ export interface QueryFilters {
   region?: string;
   city?: string;
   language?: string;
+  event?: string;
 }
 
 export interface QueryOptions {

pages/api/event-data/events.ts

@@ -21,7 +21,7 @@ export default async (
   await useAuth(req, res);
 
   if (req.method === 'GET') {
-    const { websiteId, startAt, endAt, eventName } = req.query;
+    const { websiteId, startAt, endAt, event } = req.query;
 
     if (!(await canViewWebsite(req.auth, websiteId))) {
       return unauthorized(res);
@@ -33,7 +33,7 @@ export default async (
     const data = await getEventDataEvents(websiteId, {
       startDate,
       endDate,
-      eventName,
+      event,
     });
 
     return ok(res, data);