From ec6803fbc51e10694251625c355403f5fef3c47e Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 18 Oct 2022 12:19:41 +0200
Subject: [PATCH] change(ui) - funnel updates

---
 .../Funnels/FunnelWidget/FunnelBar.tsx        | 152 ++++++++++--------
 .../SessionSettingButton.tsx                  |   2 +-
 frontend/app/mstore/types/funnelStage.ts      |   2 +
 frontend/app/styles/general.css               |  10 ++
 4 files changed, 97 insertions(+), 69 deletions(-)

diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index b84fff021..813c394e3 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -1,83 +1,99 @@
 import React from 'react';
 import FunnelStepText from './FunnelStepText';
 import { Icon, Popup } from 'UI';
+import { Tooltip } from 'react-tippy';
 
 interface Props {
-    filter: any;
+  filter: any;
 }
 function FunnelBar(props: Props) {
-    const { filter } = props;
-    // const completedPercentage = calculatePercentage(filter.sessionsCount, filter.dropDueToIssues);
+  const { filter } = props;
+  // const completedPercentage = calculatePercentage(filter.sessionsCount, filter.dropDueToIssues);
 
-    return (
-        <div className="w-full mb-4">
-            <FunnelStepText filter={filter} />
-            <div style={{
-                height: '25px',
-                // marginBottom: '10px',
-                width: '100%',
-                backgroundColor: '#f5f5f5',
-                position: 'relative',
-                borderRadius: '3px',
-                overflow: 'hidden',
-            }}>
-                <div className="flex items-center" style={{
-                    width: `${filter.completedPercentage}%`,
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    bottom: 0,
-                    // height: '10px',
-                    backgroundColor: '#00b5ad',
-                }}>
-                    <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">{filter.completedPercentage}%</div>
-                </div>
-                {filter.dropDueToIssues > 0 && (
-                    <div className="flex items-center justify-end" style={{
-                        width: `${filter.dropDueToIssuesPercentage}%`,
-                        position: 'absolute',
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                        left: `${filter.completedPercentage}%`,
-                        // height: '10px',
-                        backgroundColor: '#ff5a5f',
-                        opacity: 0.5,
-                    }}>
-                        <Popup
-                            content="Drop due to issues"
-                            // offset={100}
-                            sticky={true}
-                        >
-                            <div className="color-white w-full flex items-center font-medium mr-2 leading-3">{filter.dropDueToIssuesPercentage}%</div>
-                        </Popup>
-                    </div>
-                    
-                )}
-            </div>
-            <div className="flex justify-between py-2">
-                <div className="flex items-center">
-                    <Icon name="arrow-right-short" size="20" color="green" />
-                    <span className="mx-1 font-medium">{filter.sessionsCount}</span>
-                    <span>Completed</span>
-                </div>
-                <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>Dropped</span>
-                </div>
-            </div>
+  return (
+    <div className="w-full mb-4">
+      <FunnelStepText filter={filter} />
+      <div
+        style={{
+          height: '25px',
+          // marginBottom: '10px',
+          width: '100%',
+          backgroundColor: '#f5f5f5',
+          position: 'relative',
+          borderRadius: '3px',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          className="flex items-center"
+          style={{
+            width: `${filter.completedPercentage}%`,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            bottom: 0,
+            // height: '10px',
+            backgroundColor: '#00b5ad',
+          }}
+        >
+          <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
+            {/* {filter.completedPercentage}% */}
+          </div>
         </div>
-    );
+        {filter.dropDueToIssues > 0 && (
+          <div
+            className="flex items-center"
+            style={{
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: `${filter.completedPercentage}%`,
+              opacity: 0.5,
+              padding: '4px',
+            }}
+          >
+            <div
+              className="stripes relative"
+              style={{
+                width: `${filter.dropDueToIssuesPercentage}%`,
+                // backgroundColor: 'red',
+                height: '16px',
+              }}
+            >
+              {/* @ts-ignore */}
+              <Tooltip title={`${filter.dropDueToIssues} (${filter.dropDueToIssuesPercentage}%) Dropped due to issues`} position="top-start">
+                <div className="w-full h-8 absolute"/>
+              </Tooltip>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="flex justify-between py-2">
+        <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>
+          {/* <span>Completed</span> */}
+        </div>
+        <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>
+      </div>
+    </div>
+  );
 }
 
 export default FunnelBar;
 
 const calculatePercentage = (completed: number, dropped: number) => {
-    const total = completed + dropped;
-    if (dropped === 0) return 100;
-    if (total === 0) return 0;
+  const total = completed + dropped;
+  if (dropped === 0) return 100;
+  if (total === 0) return 0;
 
-    return Math.round((completed / dropped) * 100);
-    
-}
\ No newline at end of file
+  return Math.round((completed / dropped) * 100);
+};
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
index 5d76f8979..6dde016a3 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
@@ -14,7 +14,7 @@ function SessionSettingButton(props: any) {
     return (
         <div className="cursor-pointer ml-4" onClick={handleClick}>
             {/* @ts-ignore */}
-            <Tooltip title="Session Settings">
+            <Tooltip title="Session Settings" unmountHTMLWhenHide>
                 <Button icon="sliders" variant="text" />
             </Tooltip>
         </div>
diff --git a/frontend/app/mstore/types/funnelStage.ts b/frontend/app/mstore/types/funnelStage.ts
index c1a98035f..0860fd71c 100644
--- a/frontend/app/mstore/types/funnelStage.ts
+++ b/frontend/app/mstore/types/funnelStage.ts
@@ -13,6 +13,7 @@ export default class FunnelStage {
     isActive: boolean = true;
     completedPercentage: number = 0;
     droppedCount: number = 0;
+    droppedPercentage: number = 0;
 
     constructor() {
         makeAutoObservable(this, {
@@ -33,6 +34,7 @@ export default class FunnelStage {
         this.completedPercentage = 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;
         return this;
     }
 
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index 7e072fcd4..c14a95d14 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -316,3 +316,13 @@ p {
 .recharts-legend-item-text {
   white-space: nowrap !important;
 }
+
+.stripes {
+  background: repeating-linear-gradient(
+    135deg,
+    transparent,
+    transparent 2px,
+    #ccc 2px,
+    #ccc 4px
+  );
+}
\ No newline at end of file