add event name to properties table

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

@@ -8,9 +8,10 @@ import styles from './EventProperties.module.css';
 
 export function EventProperties({ websiteId }: { websiteId: string }) {
   const [propertyName, setPropertyName] = useState('');
+  const [eventName, setEventName] = useState('');
   const { formatMessage, labels } = useMessages();
   const { data, isLoading, isFetched, error } = useEventDataProperties(websiteId);
-  const { data: values } = useEventDataValues(websiteId, propertyName);
+  const { data: values } = useEventDataValues(websiteId, eventName, propertyName);
   const chartData =
     propertyName && values
       ? {
@@ -25,13 +26,25 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
         }
       : null;
 
+  const handleRowClick = row => {
+    setEventName(row.eventName);
+    setPropertyName(row.propertyName);
+  };
+
   return (
     <LoadingPanel isLoading={isLoading} isFetched={isFetched} data={data} error={error}>
       <div className={styles.container}>
         <GridTable data={data} cardMode={false} className={styles.table}>
+          <GridColumn name="eventName" label={formatMessage(labels.name)}>
+            {row => (
+              <div className={styles.link} onClick={() => handleRowClick(row)}>
+                {row.eventName}
+              </div>
+            )}
+          </GridColumn>
           <GridColumn name="propertyName" label={formatMessage(labels.property)}>
             {row => (
-              <div className={styles.link} onClick={() => setPropertyName(row.propertyName)}>
+              <div className={styles.link} onClick={() => handleRowClick(row)}>
                 {row.propertyName}
               </div>
             )}

src/components/hooks/queries/useEventDataValues.ts

@@ -4,6 +4,7 @@ import { useFilterParams } from '../useFilterParams';
 
 export function useEventDataValues(
   websiteId: string,
+  eventName: string,
   propertyName: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {
@@ -12,7 +13,8 @@ export function useEventDataValues(
 
   return useQuery<any>({
     queryKey: ['websites:event-data:values', { websiteId, propertyName, ...params }],
-    queryFn: () => get(`/websites/${websiteId}/event-data/values`, { ...params, propertyName }),
+    queryFn: () =>
+      get(`/websites/${websiteId}/event-data/values`, { ...params, eventName, propertyName }),
     enabled: !!(websiteId && propertyName),
     ...options,
   });

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

@@ -11,6 +11,7 @@ export interface EventDataFieldsRequestQuery {
   websiteId: string;
   startAt: string;
   endAt: string;
+  eventName?: string;
   propertyName?: string;
 }
 
@@ -19,6 +20,7 @@ const schema = {
     websiteId: yup.string().uuid().required(),
     startAt: yup.number().integer().required(),
     endAt: yup.number().integer().min(yup.ref('startAt')).required(),
+    eventName: yup.string(),
     propertyName: yup.string(),
   }),
 };
@@ -32,7 +34,7 @@ export default async (
   await useValidate(schema, req, res);
 
   if (req.method === 'GET') {
-    const { websiteId, startAt, endAt, propertyName } = req.query;
+    const { websiteId, startAt, endAt, eventName, propertyName } = req.query;
 
     if (!(await canViewWebsite(req.auth, websiteId))) {
       return unauthorized(res);
@@ -41,7 +43,12 @@ export default async (
     const startDate = new Date(+startAt);
     const endDate = new Date(+endAt);
 
-    const data = await getEventDataValues(websiteId, { startDate, endDate, propertyName });
+    const data = await getEventDataValues(websiteId, {
+      startDate,
+      endDate,
+      eventName,
+      propertyName,
+    });
 
     return ok(res, data);
   }

src/queries/analytics/events/getEventDataProperties.ts

@@ -24,14 +24,15 @@ async function relationalQuery(
   return rawQuery(
     `
     select
+      event_name as "eventName",
       data_key as "propertyName",
       count(*) as "total"
     from event_data
     where website_id = {{websiteId::uuid}}
       and created_at between {{startDate}} and {{endDate}}
     ${filterQuery}
-    group by data_key
-    order by 2 desc
+    group by event_name, data_key
+    order by 3 desc
     limit 500
     `,
     params,
@@ -41,7 +42,7 @@ async function relationalQuery(
 async function clickhouseQuery(
   websiteId: string,
   filters: QueryFilters & { propertyName?: string },
-): Promise<{ propertyName: string; dataType: number; propertyValue: string; total: number }[]> {
+): Promise<{ eventName: string; propertyName: string; total: number }[]> {
   const { rawQuery, parseFilters } = clickhouse;
   const { filterQuery, params } = await parseFilters(websiteId, filters, {
     columns: { propertyName: 'data_key' },
@@ -50,23 +51,23 @@ async function clickhouseQuery(
   return rawQuery(
     `
     select
+      event_name as eventName,
       data_key as propertyName,
       count(*) as total
     from event_data
     where website_id = {websiteId:UUID}
       and created_at between {startDate:DateTime64} and {endDate:DateTime64}
     ${filterQuery}
-    group by data_key
-    order by 2 desc
+    group by event_name, data_key
+    order by 1, 3 desc
     limit 500
     `,
     params,
   ).then(result => {
     return Object.values(result).map((a: any) => {
       return {
+        eventName: a.eventName,
         propertyName: a.propertyName,
-        dataType: Number(a.dataType),
-        propertyValue: a.propertyValue,
         total: Number(a.total),
       };
     });

src/queries/analytics/events/getEventDataValues.ts

@@ -4,7 +4,10 @@ import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
 import { QueryFilters, WebsiteEventData } from 'lib/types';
 
 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),
@@ -14,7 +17,7 @@ export async function getEventDataValues(
 
 async function relationalQuery(
   websiteId: string,
-  filters: QueryFilters & { propertyName?: string },
+  filters: QueryFilters & { eventName?: string; propertyName?: string },
 ) {
   const { rawQuery, parseFilters } = prisma;
   const { filterQuery, params } = await parseFilters(websiteId, filters);
@@ -28,6 +31,7 @@ async function relationalQuery(
     where website_id = {{websiteId::uuid}}
       and created_at between {{startDate}} and {{endDate}}
       and data_key = {{propertyName}}
+      and event_key = {{eventName}}
     ${filterQuery}
     group by string_value
     order by 2 desc
@@ -39,7 +43,7 @@ async function relationalQuery(
 
 async function clickhouseQuery(
   websiteId: string,
-  filters: QueryFilters & { propertyName?: string },
+  filters: QueryFilters & { eventName?: string; propertyName?: string },
 ): Promise<{ propertyName: string; dataType: number; propertyValue: string; total: number }[]> {
   const { rawQuery, parseFilters } = clickhouse;
   const { filterQuery, params } = await parseFilters(websiteId, filters);
@@ -55,8 +59,9 @@ async function clickhouseQuery(
     where website_id = {websiteId:UUID}
       and created_at between {startDate:DateTime64} and {endDate:DateTime64}
       and data_key = {propertyName:String}
+      and event_name = {eventName:String}
     ${filterQuery}
-    group by value
+    group by event_name, value
     order by 2 desc
     limit 500;
     `,