src/app/(main)/websites/[websiteId]/ExpandedViewModal.tsx

@@ -26,11 +26,9 @@ export function ExpandedViewModal({
     }
   };
 
-  const height = CSS.supports('height', '100dvh') ? 'calc(100dvh - 40px)' : 'calc(100vh - 40px)';
-
   return (
     <Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
-      <Dialog style={{ maxWidth: 1320, width: '100vw', height: height }}>
+      <Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
         {({ close }) => {
           return (
             <WebsiteExpandedView

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx

@@ -18,13 +18,7 @@ export function WebsiteExpandedView({
   } = useNavigation();
 
   return (
-    <Grid
-      columns={{ xs: '1fr', md: 'auto 1fr' }}
-      gap="6"
-      height="100%"
-      overflowX="auto"
-      minWidth="500px"
-    >
+    <Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap="6" height="100%" overflow="hidden">
       <Column
         display={{ xs: 'none', md: 'flex' }}
         gap="6"

src/app/api/websites/[websiteId]/event-data/[eventId]/route.ts

@@ -19,7 +19,7 @@ export async function GET(
     return unauthorized();
   }
 
-  const data = await getEventData(websiteId, eventId);
+  const data = await getEventData(eventId);
 
   return json(data);
 }

src/app/api/websites/[websiteId]/event-data/events/route.ts

@@ -3,7 +3,6 @@ import { getQueryFilters, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/permissions';
 import { getEventDataEvents } from '@/queries/sql/events/getEventDataEvents';
-import { filterParams } from '@/lib/schema';
 
 export async function GET(
   request: Request,
@@ -13,7 +12,6 @@ export async function GET(
     startAt: z.coerce.number().int(),
     endAt: z.coerce.number().int(),
     event: z.string().optional(),
-    ...filterParams,
   });
   const { auth, query, error } = await parseRequest(request, schema);
 
@@ -27,10 +25,12 @@ export async function GET(
     return unauthorized();
   }
 
+  const { event } = query;
   const filters = await getQueryFilters(query, websiteId);
 
   const data = await getEventDataEvents(websiteId, {
     ...filters,
+    event,
   });
 
   return json(data);

src/app/api/websites/[websiteId]/event-data/fields/route.ts

@@ -3,7 +3,6 @@ import { getQueryFilters, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/permissions';
 import { getEventDataFields } from '@/queries/sql';
-import { filterParams } from '@/lib/schema';
 
 export async function GET(
   request: Request,
@@ -12,7 +11,6 @@ export async function GET(
   const schema = z.object({
     startAt: z.coerce.number().int(),
     endAt: z.coerce.number().int(),
-    ...filterParams,
   });
 
   const { auth, query, error } = await parseRequest(request, schema);

src/app/api/websites/[websiteId]/event-data/properties/route.ts

@@ -1,17 +1,17 @@
+import { z } from 'zod';
 import { getQueryFilters, parseRequest } from '@/lib/request';
-import { json, unauthorized } from '@/lib/response';
-import { filterParams } from '@/lib/schema';
+import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/permissions';
 import { getEventDataProperties } from '@/queries/sql';
-import { z } from 'zod';
+import { dateRangeParams, filterParams } from '@/lib/schema';
 
 export async function GET(
   request: Request,
   { params }: { params: Promise<{ websiteId: string }> },
 ) {
   const schema = z.object({
-    startAt: z.coerce.number().int(),
-    endAt: z.coerce.number().int(),
+    propertyName: z.string().optional(),
+    ...dateRangeParams,
     ...filterParams,
   });
 
@@ -27,9 +27,10 @@ export async function GET(
     return unauthorized();
   }
 
+  const { propertyName } = query;
   const filters = await getQueryFilters(query, websiteId);
 
-  const data = await getEventDataProperties(websiteId, filters);
+  const data = await getEventDataProperties(websiteId, { ...filters, propertyName });
 
   return json(data);
 }

src/app/api/websites/[websiteId]/event-data/stats/route.ts

@@ -3,7 +3,6 @@ import { getQueryFilters, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/permissions';
 import { getEventDataStats } from '@/queries/sql';
-import { filterParams } from '@/lib/schema';
 
 export async function GET(
   request: Request,
@@ -12,7 +11,7 @@ export async function GET(
   const schema = z.object({
     startAt: z.coerce.number().int(),
     endAt: z.coerce.number().int(),
-    ...filterParams,
+    propertyName: z.string().optional(),
   });
 
   const { auth, query, error } = await parseRequest(request, schema);

src/app/api/websites/[websiteId]/event-data/values/route.ts

@@ -3,17 +3,16 @@ import { getQueryFilters, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/permissions';
 import { getEventDataValues } from '@/queries/sql';
-import { filterParams } from '@/lib/schema';
+import { dateRangeParams, filterParams } from '@/lib/schema';
 
 export async function GET(
   request: Request,
   { params }: { params: Promise<{ websiteId: string }> },
 ) {
   const schema = z.object({
-    startAt: z.coerce.number().int(),
-    endAt: z.coerce.number().int(),
-    event: z.string(),
-    propertyName: z.string(),
+    eventName: z.string().optional(),
+    propertyName: z.string().optional(),
+    ...dateRangeParams,
     ...filterParams,
   });
 
@@ -29,11 +28,12 @@ export async function GET(
     return unauthorized();
   }
 
-  const { propertyName } = query;
+  const { eventName, propertyName } = query;
   const filters = await getQueryFilters(query, websiteId);
 
   const data = await getEventDataValues(websiteId, {
     ...filters,
+    eventName,
     propertyName,
   });
 

src/app/api/websites/[websiteId]/events/route.ts

@@ -1,17 +1,16 @@
-import { getQueryFilters, parseRequest } from '@/lib/request';
-import { json, unauthorized } from '@/lib/response';
-import { filterParams, pagingParams, searchParams } from '@/lib/schema';
-import { canViewWebsite } from '@/permissions';
-import { getWebsiteEvents } from '@/queries/sql';
 import { z } from 'zod';
+import { getQueryFilters, parseRequest } from '@/lib/request';
+import { unauthorized, json } from '@/lib/response';
+import { canViewWebsite } from '@/permissions';
+import { dateRangeParams, pagingParams, filterParams, searchParams } from '@/lib/schema';
+import { getWebsiteEvents } from '@/queries/sql';
 
 export async function GET(
   request: Request,
   { params }: { params: Promise<{ websiteId: string }> },
 ) {
   const schema = z.object({
-    startAt: z.coerce.number().optional(),
-    endAt: z.coerce.number().optional(),
+    ...dateRangeParams,
     ...filterParams,
     ...pagingParams,
     ...searchParams,

src/components/hooks/queries/useEventDataValuesQuery.ts

@@ -5,7 +5,7 @@ import { useFilterParameters } from '../useFilterParameters';
 
 export function useEventDataValuesQuery(
   websiteId: string,
-  event: string,
+  eventName: string,
   propertyName: string,
   options?: ReactQueryOptions,
 ) {
@@ -16,7 +16,7 @@ export function useEventDataValuesQuery(
   return useQuery<any>({
     queryKey: [
       'websites:event-data:values',
-      { websiteId, event, propertyName, startAt, endAt, unit, timezone, ...filters },
+      { websiteId, eventName, propertyName, startAt, endAt, unit, timezone, ...filters },
     ],
     queryFn: () =>
       get(`/websites/${websiteId}/event-data/values`, {
@@ -25,7 +25,7 @@ export function useEventDataValuesQuery(
         unit,
         timezone,
         ...filters,
-        event,
+        eventName,
         propertyName,
       }),
     enabled: !!(websiteId && propertyName),

src/components/hooks/queries/useWebsiteEventsQuery.ts

@@ -15,20 +15,14 @@ export function useWebsiteEventsQuery(
   options?: ReactQueryOptions,
 ) {
   const { get } = useApi();
-  const { startAt, endAt, unit, timezone } = useDateParameters();
+  const date = useDateParameters();
   const filters = useFilterParameters();
 
   return usePagedQuery({
-    queryKey: [
-      'websites:events',
-      { websiteId, startAt, endAt, unit, timezone, ...filters, ...params },
-    ],
+    queryKey: ['websites:events', { websiteId, ...date, ...filters, ...params }],
     queryFn: pageParams =>
       get(`/websites/${websiteId}/events`, {
-        startAt,
-        endAt,
-        unit,
-        timezone,
+        ...date,
         ...filters,
         ...pageParams,
         eventType: EVENT_TYPES[params.view],

src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts

@@ -5,13 +5,12 @@ import { ReactQueryOptions } from '@/lib/types';
 
 export function useWebsiteEventsSeriesQuery(websiteId: string, options?: ReactQueryOptions) {
   const { get, useQuery } = useApi();
-  const { startAt, endAt, unit, timezone } = useDateParameters();
+  const date = useDateParameters();
   const filters = useFilterParameters();
 
   return useQuery({
-    queryKey: ['websites:events:series', { websiteId, startAt, endAt, unit, timezone, ...filters }],
-    queryFn: () =>
-      get(`/websites/${websiteId}/events/series`, { startAt, endAt, unit, timezone, ...filters }),
+    queryKey: ['websites:events:series', { websiteId, ...date, ...filters }],
+    queryFn: () => get(`/websites/${websiteId}/events/series`, { ...date, ...filters }),
     enabled: !!websiteId,
     ...options,
   });

src/queries/sql/events/getEventData.ts

@@ -5,16 +5,14 @@ import { CLICKHOUSE, PRISMA, runQuery } from '@/lib/db';
 
 const FUNCTION_NAME = 'getEventData';
 
-export async function getEventData(
-  ...args: [websiteId: string, eventId: string]
-): Promise<EventData[]> {
+export async function getEventData(...args: [eventId: string]): Promise<EventData[]> {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
     [CLICKHOUSE]: () => clickhouseQuery(...args),
   });
 }
 
-async function relationalQuery(websiteId: string, eventId: string) {
+async function relationalQuery(eventId: string) {
   const { rawQuery } = prisma;
 
   return rawQuery(
@@ -31,15 +29,14 @@ async function relationalQuery(websiteId: string, eventId: string) {
        data_type as dataType,
        created_at as createdAt
     from event_data
-    website_id = {{websiteId::uuid}}
-      event_id = {{eventId::uuid}}
+    where event_id = {{eventId::uuid}}
     `,
-    { websiteId, eventId },
+    { eventId },
     FUNCTION_NAME,
   );
 }
 
-async function clickhouseQuery(websiteId: string, eventId: string): Promise<EventData[]> {
+async function clickhouseQuery(eventId: string): Promise<EventData[]> {
   const { rawQuery } = clickhouse;
 
   return rawQuery(
@@ -56,10 +53,9 @@ async function clickhouseQuery(websiteId: string, eventId: string): Promise<Even
         data_type as dataType,
         created_at as createdAt
       from event_data
-      where website_id = {websiteId:UUID} 
-        and event_id = {eventId:UUID}
+      where event_id = {eventId:UUID}
     `,
-    { websiteId, eventId },
+    { eventId },
     FUNCTION_NAME,
   );
 }

src/queries/sql/events/getEventDataEvents.ts

@@ -25,10 +25,7 @@ export async function getEventDataEvents(
 async function relationalQuery(websiteId: string, filters: QueryFilters) {
   const { rawQuery, parseFilters } = prisma;
   const { event } = filters;
-  const { queryParams } = parseFilters({
-    ...filters,
-    websiteId,
-  });
+  const { queryParams } = parseFilters(filters);
 
   if (event) {
     return rawQuery(
@@ -78,10 +75,7 @@ async function clickhouseQuery(
 ): Promise<{ eventName: string; propertyName: string; dataType: number; total: number }[]> {
   const { rawQuery, parseFilters } = clickhouse;
   const { event } = filters;
-  const { filterQuery, cohortQuery, queryParams } = parseFilters({
-    ...filters,
-    websiteId,
-  });
+  const { queryParams } = parseFilters(filters);
 
   if (event) {
     return rawQuery(
@@ -93,16 +87,9 @@ async function clickhouseQuery(
         string_value as propertyValue,
         count(*) as total
       from event_data
-      join website_event
-      on website_event.event_id = event_data.event_id
-        and website_event.website_id = event_data.website_id
-        and website_event.website_id = {websiteId:UUID}
-        and website_event.created_at between {startDate:DateTime64} and {endDate:DateTime64}
-      ${cohortQuery}
-      where event_data.website_id = {websiteId:UUID}
-        and event_data.created_at between {startDate:DateTime64} and {endDate:DateTime64}
-        and event_data.event_name = {event:String}
-      ${filterQuery}
+      where website_id = {websiteId:UUID}
+        and created_at between {startDate:DateTime64} and {endDate:DateTime64}
+        and event_name = {event:String}
       group by data_key, data_type, string_value, event_name
       order by 1 asc, 2 asc, 3 asc, 5 desc
       limit 500
@@ -120,15 +107,8 @@ async function clickhouseQuery(
       data_type as dataType,
       count(*) as total
     from event_data
-    join website_event
-    on website_event.event_id = event_data.event_id
-      and website_event.website_id = event_data.website_id
-      and website_event.website_id = {websiteId:UUID}
-      and website_event.created_at between {startDate:DateTime64} and {endDate:DateTime64}
-    ${cohortQuery}
-    where event_data.website_id = {websiteId:UUID}
-      and event_data.created_at between {startDate:DateTime64} and {endDate:DateTime64}
-    ${filterQuery}
+    where website_id = {websiteId:UUID}
+      and created_at between {startDate:DateTime64} and {endDate:DateTime64}
     group by data_key, data_type, event_name
     order by 1 asc, 2 asc
     limit 500

src/queries/sql/events/getEventDataFields.ts

@@ -64,15 +64,10 @@ async function clickhouseQuery(
               data_type = 4, toString(date_trunc('hour', date_value)),
               string_value) as "value",
       count(*) as "total"
-    from event_data
-    join website_event
-    on website_event.event_id = event_data.event_id
-      and website_event.website_id = event_data.website_id
-      and website_event.website_id = {websiteId:UUID}
-      and website_event.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+    from event_data website_event
     ${cohortQuery}
-    where event_data.website_id = {websiteId:UUID}
-      and event_data.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+    where website_id = {websiteId:UUID}
+      and created_at between {startDate:DateTime64} and {endDate:DateTime64}
     ${filterQuery}
     group by data_key, data_type, value
     order by 2 desc

src/queries/sql/events/getEventDataStats.ts

@@ -71,15 +71,10 @@ async function clickhouseQuery(
         event_id,
         data_key,
         count(*) as "total"
-      from event_data
-      join website_event
-      on website_event.event_id = event_data.event_id
-        and website_event.website_id = event_data.website_id
-        and website_event.website_id = {websiteId:UUID}
-        and website_event.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+      from event_data website_event
       ${cohortQuery}
-      where event_data.website_id = {websiteId:UUID}
-        and event_data.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+      where website_id = {websiteId:UUID}
+        and created_at between {startDate:DateTime64} and {endDate:DateTime64}
       ${filterQuery}
       group by event_id, data_key
       ) as t

src/queries/sql/events/getEventDataValues.ts

@@ -11,7 +11,10 @@ interface WebsiteEventData {
 }
 
 export async function getEventDataValues(
-  ...args: [websiteId: string, filters: QueryFilters & { propertyName?: string }]
+  ...args: [
+    websiteId: string,
+    filters: QueryFilters & { eventName?: string; propertyName?: string },
+  ]
 ): Promise<WebsiteEventData[]> {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
@@ -21,7 +24,7 @@ export async function getEventDataValues(
 
 async function relationalQuery(
   websiteId: string,
-  filters: QueryFilters & { propertyName?: string },
+  filters: QueryFilters & { eventName?: string; propertyName?: string },
 ) {
   const { rawQuery, parseFilters, getDateSQL } = prisma;
   const { filterQuery, joinSessionQuery, cohortQuery, queryParams } = parseFilters({
@@ -60,7 +63,7 @@ async function relationalQuery(
 
 async function clickhouseQuery(
   websiteId: string,
-  filters: QueryFilters & { propertyName?: string },
+  filters: QueryFilters & { eventName?: string; propertyName?: string },
 ): Promise<{ value: string; total: number }[]> {
   const { rawQuery, parseFilters } = clickhouse;
   const { filterQuery, cohortQuery, queryParams } = parseFilters({ ...filters, websiteId });
@@ -82,7 +85,7 @@ async function clickhouseQuery(
     where event_data.website_id = {websiteId:UUID}
       and event_data.created_at between {startDate:DateTime64} and {endDate:DateTime64}
       and event_data.data_key = {propertyName:String}
-      and event_data.event_name = {event:String}
+      and event_data.event_name = {eventName:String}
     ${filterQuery}
     group by value
     order by 2 desc