From 9ecb4c369e9aa750e75c773ca9929a5dec102d95 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 10 May 2022 18:03:19 +0200
Subject: [PATCH] feat(ui) - funnels - step percentage dynamic

---
 .../Funnels/FunnelWidget/FunnelBar.tsx        | 21 ++++++++++++++-----
 frontend/app/mstore/metricStore.ts            |  8 +++----
 frontend/app/mstore/types/filterItem.ts       |  5 +++++
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index 4e35ce2f3..5530a550c 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -8,7 +8,18 @@ interface Props {
     filter: any;
 }``
 function FunnelBar(props: Props) {
-    const { completed, dropped, filter } = props;
+    const { filter } = props;
+    const { completed, dropped } = filter;
+
+    const calculatePercentage = (completed: number, dropped: number) => {
+        const total = completed + dropped;
+        if (total === 0) {
+            return 0;
+        }
+        return Math.round((completed / total) * 100);
+    }
+    const completedPercentage = calculatePercentage(completed, dropped);
+    console.log('completedPercentage', completedPercentage)
 
     return (
         <div className="w-full mb-4">
@@ -23,7 +34,7 @@ function FunnelBar(props: Props) {
                 overflow: 'hidden',
             }}>
                 <div className="flex items-center" style={{
-                    width: `${completed * 100 / (completed + dropped)}px`,
+                    width: `${completedPercentage}%`,
                     position: 'absolute',
                     top: 0,
                     left: 0,
@@ -31,18 +42,18 @@ function FunnelBar(props: Props) {
                     // height: '10px',
                     backgroundColor: '#00b5ad',
                 }}>
-                    <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">10%</div>
+                    <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">{completedPercentage}%</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">{13}</span>
+                    <span className="mx-1 font-medium">{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">20</span>
+                    <span className="font-medium mx-1 color-red">{dropped}</span>
                     <span>Dropped off</span>
                 </div>
             </div>
diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts
index 2c60141b3..eb9147620 100644
--- a/frontend/app/mstore/metricStore.ts
+++ b/frontend/app/mstore/metricStore.ts
@@ -192,7 +192,7 @@ export default class MetricStore implements IMetricStore {
 }
 
 const sampleJson = {
-    metricId: 1,
+    // metricId: 1,
     name: "Funnel Sample",
     metricType: 'funnel',
     series: [
@@ -214,15 +214,15 @@ const sampleJson = {
                         value: ['/sessions'],
                         percent: 80,
                         completed: 40,
-                        dropped: 20,
+                        dropped: 60,
                     },
                     {
                         type: 'CLICK',
                         operator: 'on',
                         value: ['DASHBOARDS'],
                         percent: 80,
-                        completed: 40,
-                        dropped: 20,
+                        completed: 10,
+                        dropped: 90,
                     }
                 ]
             }
diff --git a/frontend/app/mstore/types/filterItem.ts b/frontend/app/mstore/types/filterItem.ts
index 45442cc4d..291fd6f8a 100644
--- a/frontend/app/mstore/types/filterItem.ts
+++ b/frontend/app/mstore/types/filterItem.ts
@@ -15,6 +15,8 @@ export default class FilterItem {
     operatorOptions: any[] = []
     options: any[] = []
     isActive: boolean = true
+    completed: number = 0
+    dropped: number = 0
 
     constructor(data: any = {}) {
         makeAutoObservable(this, {
@@ -65,6 +67,9 @@ export default class FilterItem {
         this.operator = json.operator
         
         this.filters = _filter.type === FilterType.SUB_FILTERS && json.filters ? json.filters.map(i => new FilterItem().fromJson(i, json.type)) : []
+
+        this.completed = json.completed
+        this.dropped = json.dropped
         return this
     }