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

---
 .../components/Funnels/FunnelWidget/FunnelBar.tsx    |  8 +++++---
 frontend/app/mstore/metricStore.ts                   | 12 ++++++++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index 89d6efdb0..4e35ce2f3 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -22,7 +22,7 @@ function FunnelBar(props: Props) {
                 borderRadius: '3px',
                 overflow: 'hidden',
             }}>
-                <div style={{
+                <div className="flex items-center" style={{
                     width: `${completed * 100 / (completed + dropped)}px`,
                     position: 'absolute',
                     top: 0,
@@ -30,7 +30,9 @@ function FunnelBar(props: Props) {
                     bottom: 0,
                     // height: '10px',
                     backgroundColor: '#00b5ad',
-                }} />
+                }}>
+                    <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">10%</div>
+                </div>
             </div>
             <div className="flex justify-between py-2">
                 <div className="flex items-center">
@@ -39,7 +41,7 @@ function FunnelBar(props: Props) {
                     <span>completed</span>
                 </div>
                 <div className="flex items-center">
-                    <Icon name="caret-down-fill" color="red" size={18} />
+                    <Icon name="caret-down-fill" color="red" size={16} />
                     <span className="font-medium mx-1 color-red">20</span>
                     <span>Dropped off</span>
                 </div>
diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts
index 9442dccbf..2c60141b3 100644
--- a/frontend/app/mstore/metricStore.ts
+++ b/frontend/app/mstore/metricStore.ts
@@ -206,12 +206,20 @@ const sampleJson = {
                         value: ['/sessions', '/errors', '/users'],
                         percent: 100,
                         completed: 60,
-                        dropped: 0,
+                        dropped: 40,
                     },
                     {
                         type: 'LOCATION',
                         operator: 'is',
-                        value: ['/sessions', '/errors', '/users'],
+                        value: ['/sessions'],
+                        percent: 80,
+                        completed: 40,
+                        dropped: 20,
+                    },
+                    {
+                        type: 'CLICK',
+                        operator: 'on',
+                        value: ['DASHBOARDS'],
                         percent: 80,
                         completed: 40,
                         dropped: 20,