update websitesession, add session duration

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx

@@ -1,15 +1,31 @@
-import MetricCard from 'components/metrics/MetricCard';
 import { useMessages } from 'components/hooks';
+import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
+import { formatShortTime } from 'lib/format';
 
 export function SessionStats({ data }) {
   const { formatMessage, labels } = useMessages();
+  const duration = (new Date(data?.lastAt).getTime() - new Date(data?.firstAt).getTime()) / 1000;
+  let dateFormat;
+
+  if (duration > 86400) {
+    dateFormat = ['d', 'm'];
+  } else if (duration > 3600) {
+    dateFormat = ['h', 'm'];
+  } else {
+    dateFormat = ['m', 's'];
+  }
 
   return (
     <MetricsBar isFetched={true}>
       <MetricCard label={formatMessage(labels.visits)} value={data?.visits} />
       <MetricCard label={formatMessage(labels.views)} value={data?.views} />
       <MetricCard label={formatMessage(labels.events)} value={data?.events} />
+      <MetricCard
+        label={formatMessage(labels.sessionDuration)}
+        value={duration}
+        formatValue={n => `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), dateFormat, ' ')}`}
+      />
     </MetricsBar>
   );
 }

src/components/messages.ts

@@ -141,6 +141,7 @@ export const labels = defineMessages({
   bounceRate: { id: 'label.bounce-rate', defaultMessage: 'Bounce rate' },
   viewsPerVisit: { id: 'label.views-per-visit', defaultMessage: 'Views per visit' },
   visitDuration: { id: 'label.visit-duration', defaultMessage: 'Visit duration' },
+  sessionDuration: { id: 'label.session-duration', defaultMessage: 'Session duration' },
   desktop: { id: 'label.desktop', defaultMessage: 'Desktop' },
   laptop: { id: 'label.laptop', defaultMessage: 'Laptop' },
   tablet: { id: 'label.tablet', defaultMessage: 'Tablet' },

src/lib/load.ts

@@ -18,17 +18,17 @@ export async function fetchWebsite(websiteId: string): Promise<Website> {
   return website;
 }
 
-export async function fetchSession(sessionId: string): Promise<Session> {
+export async function fetchSession(websiteId: string, sessionId: string): Promise<Session> {
   let session = null;
 
   if (redis.enabled) {
     session = await redis.client.fetch(
       `session:${sessionId}`,
-      () => getWebsiteSession(sessionId),
+      () => getWebsiteSession(websiteId, sessionId),
       86400,
     );
   } else {
-    session = await getWebsiteSession(sessionId);
+    session = await getWebsiteSession(websiteId, sessionId);
   }
 
   if (!session) {

src/lib/session.ts

@@ -62,7 +62,7 @@ export async function getSession(req: NextApiRequestCollect): Promise<SessionDat
   }
 
   // Find session
-  let session = await fetchSession(sessionId);
+  let session = await fetchSession(websiteId, sessionId);
 
   // Create a session if not found
   if (!session) {

src/pages/api/websites/[websiteId]/sessions/[sessionId]/activity.ts

@@ -40,8 +40,8 @@ export default async (
     const data = await getSessionActivity(
       websiteId,
       sessionId,
-      new Date(startDate),
+      new Date(startDate + 'Z'),
-      new Date(endDate),
+      new Date(endDate + 'Z'),
     );
 
     return ok(res, data);

src/queries/analytics/sessions/getWebsiteSessions.ts

@@ -47,7 +47,7 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters, pagePar
       min(created_at) as firstAt,
       max(created_at) as lastAt,
       uniq(visit_id) as visits,
-      count(*) as views
+      sumIf(1, event_type = 1) as views
     from website_event
     where website_id = {websiteId:UUID}
     ${dateQuery}