Fixed realtime chart display.

queries/analytics/event/getEvents.ts

@@ -26,12 +26,13 @@ function clickhouseQuery(websiteId: string, startAt: Date) {
 
   return rawQuery(
     `select
-      event_id,
-      website_id, 
-      session_id,
-      created_at,
+      event_id as id,
+      website_id as websiteId, 
+      session_id as sessionId,
+      created_at as createdAt,
+      toUnixTimestamp(created_at) as timestamp,
       url,
-      event_name
+      event_name as eventName
     from event
     where event_type = ${EVENT_TYPE.customEvent}
       and website_id = {websiteId:UUID}

queries/analytics/pageview/getPageviews.ts

@@ -29,6 +29,7 @@ async function clickhouseQuery(websiteId: string, startAt: Date) {
         website_id as websiteId,
         session_id as sessionId,
         created_at as createdAt,
+        toUnixTimestamp(created_at) as timestamp,
         url
       from event
       where event_type = ${EVENT_TYPE.pageView}

queries/analytics/session/getSessions.ts

@@ -25,9 +25,10 @@ async function clickhouseQuery(websiteId: string, startAt: Date) {
 
   return rawQuery(
     `select distinct
-      session_id,
-      website_id,
-      created_at,
+      session_id as sessionId,
+      website_id as websiteId,
+      created_at as createdAt,
+      toUnixTimestamp(created_at) as timestamp,
       hostname,
       browser,
       os,

queries/analytics/stats/getRealtimeData.ts

@@ -1,3 +1,4 @@
+import { md5 } from 'lib/crypto';
 import { getPageviews } from '../pageview/getPageviews';
 import { getSessions } from '../session/getSessions';
 import { getEvents } from '../event/getEvents';
@@ -9,22 +10,19 @@ export async function getRealtimeData(websiteId, time) {
     getEvents(websiteId, time),
   ]);
 
+  const decorate = (id, data) => {
+    return data.map(props => ({
+      ...props,
+      __id: md5(id, ...Object.values(props)),
+      timestamp: props.timestamp * 1000,
+      timestampCompare: new Date(props.createdAt).getTime(),
+    }));
+  };
+
   return {
-    pageviews: pageviews.map(({ id, ...props }) => ({
-      __id: `p${id}`,
-      pageviewId: id,
-      ...props,
-    })),
-    sessions: sessions.map(({ id, ...props }) => ({
-      __id: `s${id}`,
-      sessionId: id,
-      ...props,
-    })),
-    events: events.map(({ id, ...props }) => ({
-      __id: `e${id}`,
-      eventId: id,
-      ...props,
-    })),
+    pageviews: decorate('pageviews', pageviews),
+    sessions: decorate('sessions', sessions),
+    events: decorate('events', events),
     timestamp: Date.now(),
   };
 }