update terminology, add metric cards to new metrics

Author: franciscao633

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

@@ -21,11 +21,12 @@ export function WebsiteMetricsBar({
   const { ref, isSticky } = useSticky({ enabled: sticky });
   const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId);
 
-  const { pageviews, uniques, bounces, totaltime } = data || {};
-  const num = Math.min(data && uniques.value, data && bounces.value);
+  const { views, visitors, visits, bounces, totaltime } = data || {};
+  const num = Math.min(data && visitors.value, data && bounces.value);
   const diffs = data && {
-    pageviews: pageviews.value - pageviews.change,
-    uniques: uniques.value - uniques.change,
+    views: views.value - views.change,
+    visitors: visitors.value - visitors.change,
+    visits: visits.value - visits.change,
     bounces: bounces.value - bounces.change,
     totaltime: totaltime.value - totaltime.change,
   };
@@ -39,25 +40,39 @@ export function WebsiteMetricsBar({
       })}
     >
       <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
-        {pageviews && uniques && (
+        {views && visitors && (
           <>
             <MetricCard
               label={formatMessage(labels.views)}
-              value={pageviews.value}
-              change={pageviews.change}
+              value={views.value}
+              change={views.change}
             />
             <MetricCard
               label={formatMessage(labels.visitors)}
-              value={uniques.value}
-              change={uniques.change}
+              value={visitors.value}
+              change={visitors.change}
+            />
+            <MetricCard
+              label={formatMessage(labels.visits)}
+              value={visits.value}
+              change={visits.change}
+            />
+            <MetricCard
+              label={formatMessage(labels.viewsPerVisit)}
+              value={visits.value ? views.value / visits.value : 0}
+              change={
+                visits.value && visits.change
+                  ? views.value / visits.value - diffs.views / diffs.visits
+                  : 0
+              }
             />
             <MetricCard
               label={formatMessage(labels.bounceRate)}
-              value={uniques.value ? (num / uniques.value) * 100 : 0}
+              value={visitors.value ? (num / visitors.value) * 100 : 0}
               change={
-                uniques.value && uniques.change
-                  ? (num / uniques.value) * 100 -
-                      (Math.min(diffs.uniques, diffs.bounces) / diffs.uniques) * 100 || 0
+                visitors.value && visitors.change
+                  ? (num / visitors.value) * 100 -
+                      (Math.min(diffs.visitors, diffs.bounces) / diffs.visitors) * 100 || 0
                   : 0
               }
               format={n => Number(n).toFixed(0) + '%'}
@@ -66,14 +81,12 @@ export function WebsiteMetricsBar({
             <MetricCard
               label={formatMessage(labels.averageVisitTime)}
               value={
-                totaltime.value && pageviews.value
-                  ? totaltime.value / (pageviews.value - bounces.value)
-                  : 0
+                totaltime.value && views.value ? totaltime.value / (views.value - bounces.value) : 0
               }
               change={
-                totaltime.value && pageviews.value
-                  ? (diffs.totaltime / (diffs.pageviews - diffs.bounces) -
-                      totaltime.value / (pageviews.value - bounces.value)) *
+                totaltime.value && views.value
+                  ? (diffs.totaltime / (diffs.views - diffs.bounces) -
+                      totaltime.value / (views.value - bounces.value)) *
                       -1 || 0
                   : 0
               }

src/components/messages.ts

@@ -100,6 +100,7 @@ export const labels = defineMessages({
   queryParameters: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },
   back: { id: 'label.back', defaultMessage: 'Back' },
   visitors: { id: 'label.visitors', defaultMessage: 'Visitors' },
+  visits: { id: 'label.visits', defaultMessage: 'Visits' },
   filterCombined: { id: 'label.filter-combined', defaultMessage: 'Combined' },
   filterRaw: { id: 'label.filter-raw', defaultMessage: 'Raw' },
   views: { id: 'label.views', defaultMessage: 'Views' },
@@ -127,6 +128,7 @@ export const labels = defineMessages({
   pageViews: { id: 'label.page-views', defaultMessage: 'Page views' },
   uniqueVisitors: { id: 'label.unique-visitors', defaultMessage: 'Unique visitors' },
   bounceRate: { id: 'label.bounce-rate', defaultMessage: 'Bounce rate' },
+  viewsPerVisit: { id: 'label.views-per-visit', defaultMessage: 'Views per visit' },
   averageVisitTime: { id: 'label.average-visit-time', defaultMessage: 'Average visit time' },
   desktop: { id: 'label.desktop', defaultMessage: 'Desktop' },
   laptop: { id: 'label.laptop', defaultMessage: 'Laptop' },

src/queries/analytics/getWebsiteStats.ts

@@ -7,7 +7,7 @@ import { QueryFilters } from 'lib/types';
 export async function getWebsiteStats(
   ...args: [websiteId: string, filters: QueryFilters]
 ): Promise<
-  { pageviews: number; uniques: number; visitors: number; bounces: number; totaltime: number }[]
+  { views: number; visitors: number; visits: number; bounces: number; totaltime: number }[]
 > {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
@@ -19,7 +19,7 @@ async function relationalQuery(
   websiteId: string,
   filters: QueryFilters,
 ): Promise<
-  { pageviews: number; uniques: number; visitors: number; bounces: number; totaltime: number }[]
+  { views: number; visitors: number; visits: number; bounces: number; totaltime: number }[]
 > {
   const { getTimestampDiffQuery, parseFilters, rawQuery } = prisma;
   const { filterQuery, joinSession, params } = await parseFilters(websiteId, {
@@ -30,9 +30,9 @@ async function relationalQuery(
   return rawQuery(
     `
     select
-      sum(t.c) as "pageviews",
-      count(distinct t.session_id) as "uniques",
-      count(distinct t.visit_id) as "visitors",
+      sum(t.c) as "views",
+      count(distinct t.session_id) as "visitors",
+      count(distinct t.visit_id) as "visits",
       sum(case when t.c = 1 then 1 else 0 end) as "bounces",
       sum(${getTimestampDiffQuery('t.min_time', 't.max_time')}) as "totaltime"
     from (
@@ -61,7 +61,7 @@ async function clickhouseQuery(
   websiteId: string,
   filters: QueryFilters,
 ): Promise<
-  { pageviews: number; uniques: number; visitors: number; bounces: number; totaltime: number }[]
+  { views: number; visitors: number; visits: number; bounces: number; totaltime: number }[]
 > {
   const { rawQuery, parseFilters } = clickhouse;
   const { filterQuery, params } = await parseFilters(websiteId, {
@@ -72,9 +72,9 @@ async function clickhouseQuery(
   return rawQuery(
     `
     select 
-      sum(t.c) as "pageviews",
-      count(distinct t.session_id) as "uniques",
-      count(distinct t.visit_id) as "visitors",
+      sum(t.c) as "views",
+      count(distinct t.session_id) as "visitors",
+      count(distinct t.visit_id) as "visits",
       sum(if(t.c = 1, 1, 0)) as "bounces",
       sum(max_time-min_time) as "totaltime"
     from (
@@ -96,9 +96,9 @@ async function clickhouseQuery(
   ).then(a => {
     return Object.values(a).map(a => {
       return {
-        pageviews: Number(a.pageviews),
-        uniques: Number(a.uniques),
+        views: Number(a.views),
         visitors: Number(a.visitors),
+        visits: Number(a.visits),
         bounces: Number(a.bounces),
         totaltime: Number(a.totaltime),
       };