From 858f4655661935e31adfa2b8238be338e382d9be Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Fri, 21 Jul 2023 00:14:37 -0700
Subject: [PATCH] add dropoff percentages to funnel report

---
 components/messages.js                          | 1 +
 components/metrics/DataTable.js                 | 2 +-
 components/pages/reports/funnel/FunnelTable.js  | 3 +--
 lib/prisma.ts                                   | 7 +++++--
 queries/analytics/pageview/getPageviewFunnel.ts | 9 +++++++--
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/messages.js b/components/messages.js
index 32c89687..7bd4e9bc 100644
--- a/components/messages.js
+++ b/components/messages.js
@@ -161,6 +161,7 @@ export const labels = defineMessages({
   overview: { id: 'labels.overview', defaultMessage: 'Overview' },
   totalRecords: { id: 'labels.total-records', defaultMessage: 'Total records' },
   insights: { id: 'label.insights', defaultMessage: 'Insights' },
+  dropoff: { id: 'label.dropoff', defaultMessage: 'Dropoff' },
 });
 
 export const messages = defineMessages({
diff --git a/components/metrics/DataTable.js b/components/metrics/DataTable.js
index e2e9462d..9c5fb559 100644
--- a/components/metrics/DataTable.js
+++ b/components/metrics/DataTable.js
@@ -78,7 +78,7 @@ const AnimatedRow = ({
   showPercentage = true,
 }) => {
   const props = useSpring({
-    width: percent,
+    width: Number(percent),
     y: value,
     from: { width: 0, y: 0 },
     config: animate ? config.default : { duration: 0 },
diff --git a/components/pages/reports/funnel/FunnelTable.js b/components/pages/reports/funnel/FunnelTable.js
index ff6bdfb5..9ae8ab58 100644
--- a/components/pages/reports/funnel/FunnelTable.js
+++ b/components/pages/reports/funnel/FunnelTable.js
@@ -6,13 +6,12 @@ import { ReportContext } from '../Report';
 export function FunnelTable() {
   const { report } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
-
   return (
     <DataTable
       data={report?.data}
       title={formatMessage(labels.url)}
       metric={formatMessage(labels.visitors)}
-      showPercentage={false}
+      showPercentage={true}
     />
   );
 }
diff --git a/lib/prisma.ts b/lib/prisma.ts
index 2197a1ae..722535c2 100644
--- a/lib/prisma.ts
+++ b/lib/prisma.ts
@@ -48,11 +48,11 @@ function getDropoffQuery() {
   const db = getDatabaseType(process.env.DATABASE_URL);
 
   if (db === POSTGRESQL) {
-    return `round((1.0 - count::numeric/lag(count, 1) over ()),2)`;
+    return `round((1.0 - count::numeric/lag(nullif(count, 0), 1) over ()),2) * 100`;
   }
 
   if (db === MYSQL) {
-    return `round((1.0 - count/LAG(count, 1) OVER (ORDER BY level)),2)`;
+    return `round((1.0 - count/LAG(nullif(count, 0), 1) OVER (ORDER BY level)),2) * 100`;
   }
 }
 
@@ -173,6 +173,7 @@ function getFunnelQuery(
               and ${getAddMinutesQuery(`l.created_at `, windowMinutes)}
               and we.referrer_path = $${i + initParamLength}
               and we.url_path = $${levelNumber + initParamLength}
+              and we.created_at between $2 and $3
               and we.website_id = $1${toUuid()}
         )`;
       }
@@ -216,6 +217,8 @@ async function rawQuery(query: string, params: never[] = []): Promise<any> {
 
   const sql = db === MYSQL ? query.replace(/\$[0-9]+/g, '?') : query;
 
+  // console.log(sql);
+  // console.log(params);
   return prisma.rawQuery(sql, params);
 }
 
diff --git a/queries/analytics/pageview/getPageviewFunnel.ts b/queries/analytics/pageview/getPageviewFunnel.ts
index ef52101f..b7d918b9 100644
--- a/queries/analytics/pageview/getPageviewFunnel.ts
+++ b/queries/analytics/pageview/getPageviewFunnel.ts
@@ -31,6 +31,7 @@ async function relationalQuery(
   {
     x: string;
     y: number;
+    z: number;
   }[]
 > {
   const { windowMinutes, startDate, endDate, urls } = criteria;
@@ -60,8 +61,12 @@ async function relationalQuery(
     from levelCount;
     `,
     params,
-  ).then((a: { [key: string]: number }) => {
-    return urls.map((b, i) => ({ x: b, y: a[0][`level${i + 1}`] || 0 }));
+  ).then(results => {
+    return urls.map((a, i) => ({
+      x: a,
+      y: results[i]?.count || 0,
+      z: results[i]?.drop_off || 0,
+    }));
   });
 }