From 2e5048a41fef0a4af8fd93d7e67a60c170855c14 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 9 Nov 2022 17:26:54 +0100
Subject: [PATCH] change(ui) - funnel changes

---
 .../Funnels/FunnelWidget/FunnelBar.tsx        | 34 +++++++++----------
 .../Funnels/FunnelWidget/FunnelWidget.tsx     |  8 +----
 frontend/app/components/hocs/withReport.tsx   |  2 +-
 frontend/app/mstore/dashboardStore.ts         |  6 ++--
 frontend/app/mstore/types/funnel.ts           |  2 ++
 frontend/app/mstore/types/funnelStage.ts      |  6 ++--
 6 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index a09e48777..4947b543e 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -26,7 +26,7 @@ function FunnelBar(props: Props) {
         <div
           className="flex items-center"
           style={{
-            width: `${filter.completedPercentage}%`,
+            width: `${filter.completedPercentageTotal}%`,
             position: 'absolute',
             top: 0,
             left: 0,
@@ -34,7 +34,9 @@ function FunnelBar(props: Props) {
             backgroundColor: '#00b5ad',
           }}
         >
-          <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3" />
+          <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
+            {filter.completedPercentageTotal}%
+          </div>
         </div>
         {/* {filter.dropDueToIssues > 0 && (
           <div
@@ -65,23 +67,19 @@ function FunnelBar(props: Props) {
       </div>
       <div className="flex justify-between py-2">
         {/* @ts-ignore */}
-        <Tooltip title="With respect to the previous step." disabled={isFirst}>
-          <div className="flex items-center">
-            <Icon name="arrow-right-short" size="20" color="green" />
-            <span className="mx-1 font-medium">{filter.sessionsCount}</span>
-            <span className="color-gray-medium text-sm">
-              ({filter.completedPercentage}%) Completed
-            </span>
-          </div>
-        </Tooltip>
+        <div className="flex items-center">
+          <Icon name="arrow-right-short" size="20" color="green" />
+          <span className="mx-1 font-medium">{filter.sessionsCount} Sessions</span>
+          <span className="color-gray-medium text-sm">
+            ({filter.completedPercentage}%) Completed
+          </span>
+        </div>
         {/* @ts-ignore */}
-        <Tooltip title="Total drop till this step." disabled={isFirst}>
-          <div className="flex items-center">
-            <Icon name="caret-down-fill" color="red" size={16} />
-            <span className="font-medium mx-1 color-red">{filter.droppedCount}</span>
-            <span className="text-sm color-red">({filter.droppedPercentage}%) Dropped</span>
-          </div>
-        </Tooltip>
+        <div className="flex items-center">
+          <Icon name="caret-down-fill" color="red" size={16} />
+          <span className="font-medium mx-1 color-red">{filter.droppedCount} Sessions</span>
+          <span className="text-sm color-red">({filter.droppedPercentage}%) Dropped</span>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index 80e498a2f..22ae335ac 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -70,14 +70,8 @@ function FunnelWidget(props: Props) {
                         <span className="text-sm">({funnel.totalConversionsPercentage}%)</span>
                     </div>
                 </div>
-                <div className="mx-3" />
-                <div className="flex items-center">
-                    <span className="text-xl mr-2">Affected users</span>
-                    <div className="rounded px-2 py-1 bg-gray-lightest">
-                        <span className="text-xl font-medium">{funnel.affectedUsers}</span>
-                    </div>
-                </div>
             </div>
+            {funnel.totalDropDueToIssues && <div>{funnel.totalDropDueToIssues} sessions dropped due to issues.</div>}
         </NoContent>
     ));
 }
diff --git a/frontend/app/components/hocs/withReport.tsx b/frontend/app/components/hocs/withReport.tsx
index bf7f039a5..aebd72998 100644
--- a/frontend/app/components/hocs/withReport.tsx
+++ b/frontend/app/components/hocs/withReport.tsx
@@ -20,7 +20,7 @@ export default function withReport<P extends Props>(WrappedComponent: React.Comp
     const { dashboardStore } = useStore();
     const dashboard: any = useObserver(() => dashboardStore.selectedDashboard);
     const period = useObserver(() => dashboardStore.period);
-    const pendingRequests = useObserver(() => dashboardStore.pendingReuqests);
+    const pendingRequests = useObserver(() => dashboardStore.pendingRequests);
 
     useEffect(() => {
       if (rendering && pendingRequests <= 0) {
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts
index 7660d4463..9b2a98220 100644
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@@ -32,7 +32,7 @@ export default class DashboardStore {
     drillDownPeriod: Record<string, any> = Period({ rangeName: LAST_7_DAYS });
     startTimestamp: number = 0;
     endTimestamp: number = 0;
-    pendingReuqests: number = 0;
+    pendingRequests: number = 0;
 
     // Metrics
     metricsPage: number = 1;
@@ -422,7 +422,7 @@ export default class DashboardStore {
         }
 
         return new Promise((resolve, reject) => {
-            this.pendingReuqests += 1
+            this.pendingRequests += 1
             return metricService
                 .getMetricChartData(metric, params, isWidget)
                 .then((data: any) => {
@@ -502,7 +502,7 @@ export default class DashboardStore {
                     reject(err);
                 }).finally(() => {
                     setTimeout(() => {
-                        this.pendingReuqests = this.pendingReuqests - 1
+                        this.pendingRequests = this.pendingRequests - 1
                     }, 100)
                 });
         });
diff --git a/frontend/app/mstore/types/funnel.ts b/frontend/app/mstore/types/funnel.ts
index 1b9cf9a71..3cf4f675b 100644
--- a/frontend/app/mstore/types/funnel.ts
+++ b/frontend/app/mstore/types/funnel.ts
@@ -10,6 +10,7 @@ export default class Funnel {
     isPublic: boolean = false
     stages: FunnelStage[] = []
     raw: any = null
+    totalDropDueToIssues: number = 0;
 
     constructor() {
     }
@@ -18,6 +19,7 @@ export default class Funnel {
         if (!this.raw) {
             this.raw = json
         }
+        this.totalDropDueToIssues = json.totalDropDueToIssues;
         
         if (json.stages.length >= 1) {
             const firstStage = json.stages[0]
diff --git a/frontend/app/mstore/types/funnelStage.ts b/frontend/app/mstore/types/funnelStage.ts
index 0860fd71c..85cbb7a64 100644
--- a/frontend/app/mstore/types/funnelStage.ts
+++ b/frontend/app/mstore/types/funnelStage.ts
@@ -12,6 +12,7 @@ export default class FunnelStage {
     label: string = '';
     isActive: boolean = true;
     completedPercentage: number = 0;
+    completedPercentageTotal: number = 0;
     droppedCount: number = 0;
     droppedPercentage: number = 0;
 
@@ -31,10 +32,11 @@ export default class FunnelStage {
         this.value = json.value;
         this.type = json.type;
         this.label = filterLabelMap[json.type] || json.type;
-        this.completedPercentage = total ? Math.round((this.sessionsCount / total) * 100) : 0;
+        this.completedPercentage = total ? Math.round((this.sessionsCount / previousSessionCount) * 100) : 0;
+        this.completedPercentageTotal = total ? Math.round((this.sessionsCount / total) * 100) : 0;
         this.dropDueToIssuesPercentage = total ? Math.round((this.dropDueToIssues / total) * 100) : 0;
         this.droppedCount = previousSessionCount - this.sessionsCount;
-        this.droppedPercentage = this.droppedCount ? Math.round((this.droppedCount / total) * 100) : 0;
+        this.droppedPercentage = this.droppedCount ? Math.round((this.droppedCount / previousSessionCount) * 100) : 0;
         return this;
     }