add filtering to event chart

src/components/hooks/queries/useWebsiteEvents.ts

@@ -1,18 +1,14 @@
-import useApi from './useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useDateRange, useNavigation, useTimezone } from 'components/hooks';
 import { zonedTimeToUtc } from 'date-fns-tz';
+import useApi from './useApi';
 
-export function useWebsiteEvents(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useWebsiteEvents(websiteId: string, options?: { [key: string]: string }) {
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit, offset } = dateRange;
   const { timezone } = useTimezone();
   const {
-    query: { url, event },
+    query: { url, referrer, os, browser, device, country, region, city, title, event },
   } = useNavigation();
 
   const params = {
@@ -20,14 +16,22 @@ export function useWebsiteEvents(
     endAt: +zonedTimeToUtc(endDate, timezone),
     unit,
     offset,
-    timezone,
     url,
+    referrer,
+    os,
+    browser,
+    device,
+    country,
+    region,
+    city,
+    title,
+    timezone,
     event,
   };
 
   return useQuery({
-    queryKey: ['events', { ...params }],
-    queryFn: () => get(`/websites/${websiteId}/events`, { ...params }),
+    queryKey: ['events', { websiteId, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/events`, params),
     enabled: !!websiteId,
     ...options,
   });

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

@@ -1,6 +1,6 @@
 import { canViewWebsite } from 'lib/auth';
 import { useAuth, useCors, useValidate } from 'lib/middleware';
-import { getRequestDateRange } from 'lib/request';
+import { getRequestFilters, getRequestDateRange } from 'lib/request';
 import { NextApiRequestQueryBody, WebsiteMetric } from 'lib/types';
 import { TimezoneTest, UnitTypeTest } from 'lib/yup';
 import { NextApiResponse } from 'next';
@@ -15,6 +15,14 @@ export interface WebsiteEventsRequestQuery {
   unit?: string;
   timezone?: string;
   url: string;
+  referrer?: string;
+  title?: string;
+  os?: string;
+  browser?: string;
+  device?: string;
+  country?: string;
+  region: string;
+  city?: string;
 }
 
 const schema = {
@@ -25,6 +33,14 @@ const schema = {
     unit: UnitTypeTest,
     timezone: TimezoneTest,
     url: yup.string(),
+    referrer: yup.string(),
+    title: yup.string(),
+    os: yup.string(),
+    browser: yup.string(),
+    device: yup.string(),
+    country: yup.string(),
+    region: yup.string(),
+    city: yup.string(),
   }),
 };
 
@@ -36,7 +52,7 @@ export default async (
   await useAuth(req, res);
   await useValidate(schema, req, res);
 
-  const { websiteId, timezone, url } = req.query;
+  const { websiteId, timezone } = req.query;
   const { startDate, endDate, unit } = await getRequestDateRange(req);
 
   if (req.method === 'GET') {
@@ -44,13 +60,15 @@ export default async (
       return unauthorized(res);
     }
 
-    const events = await getEventMetrics(websiteId, {
+    const filters = {
+      ...getRequestFilters(req),
       startDate,
       endDate,
       timezone,
       unit,
-      url,
-    });
+    };
+
+    const events = await getEventMetrics(websiteId, filters);
 
     return ok(res, events);
   }

src/queries/analytics/events/getEventMetrics.ts

@@ -25,12 +25,12 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
     `
     select
       event_name x,
-      ${getDateQuery('created_at', unit, timezone)} t,
+      ${getDateQuery('website_event.created_at', unit, timezone)} t,
       count(*) y
     from website_event
     ${joinSession}
-    where website_id = {{websiteId::uuid}}
-      and created_at between {{startDate}} and {{endDate}}
+    where website_event.website_id = {{websiteId::uuid}}
+      and website_event.created_at between {{startDate}} and {{endDate}}
       and event_type = {{eventType}}
       ${filterQuery}
     group by 1, 2