eventdata api

components/pages/TestConsole.js

@@ -24,9 +24,9 @@ export default function TestConsole() {
     return null;
   }
 
-  const options = data.map(({ name, websiteId }) => ({ label: name, value: websiteId }));
-  const website = data.find(({ websiteId }) => websiteId === +websiteId);
-  const selectedValue = options.find(({ value }) => value === website?.websiteId)?.value;
+  const options = data.map(({ name, websiteUuid }) => ({ label: name, value: websiteUuid }));
+  const website = data.find(({ websiteUuid }) => websiteId === websiteUuid);
+  const selectedValue = options.find(({ value }) => value === website?.websiteUuid)?.value;
 
   function handleSelect(value) {
     router.push(`/console/${value}`);
@@ -104,13 +104,13 @@ export default function TestConsole() {
           <div className="row">
             <div className="col-12">
               <WebsiteChart
-                websiteId={website.websiteId}
+                websiteId={website.websiteUuid}
                 title={website.name}
                 domain={website.domain}
                 showLink
               />
               <PageHeader>Events</PageHeader>
-              <EventsChart websiteId={website.websiteId} />
+              <EventsChart websiteId={website.websiteUuid} />
             </div>
           </div>
         </>

lib/clickhouse.js

@@ -69,6 +69,44 @@ function getBetweenDates(field, start_at, end_at) {
     and ${getDateFormat(end_at)}`;
 }
 
+function getJsonField(column, property) {
+  return `${column}.${property}`;
+}
+
+function getEventDataColumnsQuery(column, columns) {
+  const query = Object.keys(columns).reduce((arr, key) => {
+    const filter = columns[key];
+
+    if (filter === undefined) {
+      return arr;
+    }
+
+    arr.push(`${filter}(${getJsonField(column, key)})`);
+
+    return arr;
+  }, []);
+
+  return query.join(',\n');
+}
+
+function getEventDataFilterQuery(column, filters) {
+  const query = Object.keys(filters).reduce((arr, key) => {
+    const filter = filters[key];
+
+    if (filter === undefined) {
+      return arr;
+    }
+
+    arr.push(
+      `${getJsonField(column, key)} = ${typeof filter === 'string' ? `'${filter}'` : filter}`,
+    );
+
+    return arr;
+  }, []);
+
+  return query.join('\nand ');
+}
+
 function getFilterQuery(column, filters = {}, params = []) {
   const query = Object.keys(filters).reduce((arr, key) => {
     const filter = filters[key];
@@ -186,6 +224,8 @@ export default {
   getDateFormat,
   getCommaSeparatedStringFormat,
   getBetweenDates,
+  getEventDataColumnsQuery,
+  getEventDataFilterQuery,
   getFilterQuery,
   parseFilters,
   findUnique,

lib/prisma.js

@@ -85,6 +85,60 @@ function getTimestampInterval(field) {
   }
 }
 
+function getJsonField(column, property, value) {
+  const db = getDatabaseType(process.env.DATABASE_URL);
+
+  if (db === POSTGRESQL) {
+    let accessor = `${column} ->> '${property}'`;
+
+    if (value && typeof value === 'number') {
+      accessor = `CAST(${accessor} AS DECIMAL)`;
+    }
+
+    return accessor;
+  }
+
+  if (db === MYSQL) {
+    return `${column} ->> "$.${property}"`;
+  }
+}
+
+function getEventDataColumnsQuery(column, columns) {
+  const query = Object.keys(columns).reduce((arr, key) => {
+    const filter = columns[key];
+
+    if (filter === undefined) {
+      return arr;
+    }
+
+    arr.push(`${filter}(${getJsonField(column, key)})`);
+
+    return arr;
+  }, []);
+
+  return query.join(',\n');
+}
+
+function getEventDataFilterQuery(column, filters) {
+  const query = Object.keys(filters).reduce((arr, key) => {
+    const filter = filters[key];
+
+    if (filter === undefined) {
+      return arr;
+    }
+
+    arr.push(
+      `${getJsonField(column, key, filter)} = ${
+        typeof filter === 'string' ? `'${filter}'` : filter
+      }`,
+    );
+
+    return arr;
+  }, []);
+
+  return query.join('\nand ');
+}
+
 function getFilterQuery(table, column, filters = {}, params = []) {
   const query = Object.keys(filters).reduce((arr, key) => {
     const filter = filters[key];
@@ -193,6 +247,8 @@ export default {
   getDateQuery,
   getTimestampInterval,
   getFilterQuery,
+  getEventDataColumnsQuery,
+  getEventDataFilterQuery,
   parseFilters,
   rawQuery,
   transaction,

pages/api/collect.js

@@ -58,13 +58,11 @@ export default async (req, res) => {
 
   await useSession(req, res);
 
-  const {
-    session: { website, session },
-  } = req;
+  const { website, session } = req.session;
 
   const { type, payload } = getJsonBody(req);
 
-  let { url, referrer, eventName, eventData } = payload;
+  let { url, referrer, event_name: eventName, event_data: eventData } = payload;
 
   if (process.env.REMOVE_TRAILING_SLASH) {
     url = url.replace(/\/$/, '');
@@ -88,9 +86,8 @@ export default async (req, res) => {
 
   const token = createToken(
     {
-      websiteId: website.websiteUuid,
-      sessionId: session.sessionId,
-      sessionUuid: session.sessionUuid,
+      website,
+      session,
     },
     secret(),
   );

pages/api/websites/[id]/eventdata.js

@@ -0,0 +1,50 @@
+import moment from 'moment-timezone';
+import { getEventData } from 'queries';
+import { ok, badRequest, methodNotAllowed, unauthorized } from 'next-basics';
+import { allowQuery } from 'lib/auth';
+import { useAuth, useCors } from 'lib/middleware';
+
+const unitTypes = ['year', 'month', 'hour', 'day'];
+
+export default async (req, res) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  if (req.method === 'POST') {
+    if (!(await allowQuery(req))) {
+      return unauthorized(res);
+    }
+
+    const {
+      website_id: websiteId,
+      start_at,
+      end_at,
+      unit,
+      timezone,
+      event_name: eventName,
+      columns,
+      filters,
+    } = req.body;
+
+    if (!moment.tz.zone(timezone) || !unitTypes.includes(unit)) {
+      return badRequest(res);
+    }
+
+    const startDate = new Date(+start_at);
+    const endDate = new Date(+end_at);
+
+    const events = await getEventData(websiteId, {
+      startDate,
+      endDate,
+      timezone,
+      unit,
+      eventName,
+      columns,
+      filters,
+    });
+
+    return ok(res, events);
+  }
+
+  return methodNotAllowed(res);
+};

pages/console/[[...id]].js

@@ -18,3 +18,9 @@ export default function ConsolePage({ enabled }) {
     </Layout>
   );
 }
+
+export async function getServerSideProps() {
+  return {
+    props: { enabled: !!process.env.ENABLE_TEST_CONSOLE },
+  };
+}

queries/analytics/event/getEventData.js

@@ -0,0 +1,65 @@
+import clickhouse from 'lib/clickhouse';
+import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
+import prisma from 'lib/prisma';
+
+export async function getEventData(...args) {
+  return runQuery({
+    [PRISMA]: () => relationalQuery(...args),
+    [CLICKHOUSE]: () => clickhouseQuery(...args),
+  });
+}
+
+async function relationalQuery(
+  websiteId,
+  { startDate, endDate, timezone = 'utc', unit = 'day', event_name, columns, filters },
+) {
+  const { rawQuery, getDateQuery, getEventDataColumnsQuery, getEventDataFilterQuery } = prisma;
+  const params = [startDate, endDate];
+
+  return rawQuery(
+    `select
+      ${getDateQuery('event.created_at', unit, timezone)} t,
+      ${getEventDataColumnsQuery('event_data.event_data', columns)}
+    from event
+      join website 
+        on event.website_id = website.website_id
+      join event_data
+        on event.event_id = event_data.event_id
+    where website_uuid='${websiteId}'
+      and event.created_at between $1 and $2
+      ${event_name ? `and event_name = ${event_name}` : ''}
+      ${filters ? `and ${getEventDataFilterQuery('event_data.event_data', filters)}` : ''}
+    group by 1
+    order by 2`,
+    params,
+  );
+}
+
+async function clickhouseQuery(
+  websiteId,
+  { startDate, endDate, timezone = 'UTC', unit = 'day', event_name, columns, filters },
+) {
+  const {
+    rawQuery,
+    getDateQuery,
+    getBetweenDates,
+    getEventDataColumnsQuery,
+    getEventDataFilterQuery,
+  } = clickhouse;
+  const params = [websiteId];
+
+  return rawQuery(
+    `select
+      event_name x,
+      ${getDateQuery('created_at', unit, timezone)} t,
+      ${getEventDataColumnsQuery('event_data', columns)}
+    from event
+    where website_id= $1
+      ${event_name ? `and event_name = ${event_name}` : ''}
+      and ${getBetweenDates('created_at', startDate, endDate)}
+      ${filters ? `and ${getEventDataFilterQuery('event_data', filters)}` : ''}
+    group by x, t
+    order by t`,
+    params,
+  );
+}

queries/analytics/event/saveEvent.js

@@ -12,13 +12,14 @@ export async function saveEvent(...args) {
 
 async function relationalQuery(
   { websiteId },
-  { session: { id: sessionId }, url, eventName, eventData },
+  { session: { id: sessionId }, eventUuid, url, eventName, eventData },
 ) {
   const data = {
     websiteId,
     sessionId,
     url: url?.substring(0, URL_LENGTH),
     eventName: eventName?.substring(0, EVENT_NAME_LENGTH),
+    eventUuid,
   };
 
   if (eventData) {
@@ -47,7 +48,7 @@ async function clickhouseQuery(
     created_at: getDateFormat(new Date()),
     url: url?.substring(0, URL_LENGTH),
     event_name: eventName?.substring(0, EVENT_NAME_LENGTH),
-    event_data: JSON.stringify(eventData),
+    event_data: eventData ? JSON.stringify(eventData) : null,
     ...sessionArgs,
     country: country ? country : null,
   };

queries/index.js

@@ -17,6 +17,7 @@ export * from './admin/website/resetWebsite';
 export * from './admin/website/updateWebsite';
 export * from './analytics/event/getEventMetrics';
 export * from './analytics/event/getEvents';
+export * from './analytics/event/getEventData';
 export * from './analytics/event/saveEvent';
 export * from './analytics/pageview/getPageviewMetrics';
 export * from './analytics/pageview/getPageviewParams';