From 90c6b3b536f01c891030abdfbf0d34374ef0a45d Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 27 Jun 2024 17:57:41 +0200
Subject: [PATCH] change(ui): funnel bar text color

---
 .../Funnels/FunnelWidget/FunnelBar.tsx        | 240 +++++++++---------
 1 file changed, 121 insertions(+), 119 deletions(-)

diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index 0ca634028..c4a35fded 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -1,146 +1,148 @@
-import { durationFormatted } from 'App/date';
+import {durationFormatted} from 'App/date';
 import React from 'react';
 import FunnelStepText from './FunnelStepText';
-import { Icon } from 'UI';
+import {Icon} from 'UI';
+import {Space} from "antd";
 
 interface Props {
-  filter: any;
-  index?: number;
-  focusStage?: (index: number, isFocused: boolean) => void
-  focusedFilter?: number | null
+    filter: any;
+    index?: number;
+    focusStage?: (index: number, isFocused: boolean) => void
+    focusedFilter?: number | null
 }
 
 function FunnelBar(props: Props) {
-  const { filter, index, focusStage, focusedFilter } = props;
+    const {filter, index, focusStage, focusedFilter} = props;
 
-  const isFocused = focusedFilter && index ? focusedFilter === index - 1 : false;
-  return (
-    <div className="w-full mb-4">
-      <FunnelStepText filter={filter} />
-      <div
-        style={{
-          height: '25px',
-          width: '100%',
-          backgroundColor: '#f5f5f5',
-          position: 'relative',
-          borderRadius: '3px',
-          overflow: 'hidden',
-        }}
-      >
-        <div
-          className="flex items-center"
-          style={{
-            width: `${filter.completedPercentageTotal}%`,
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            bottom: 0,
-            backgroundColor: '#394EFF',
-          }}
-        >
-          <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
-            {filter.completedPercentageTotal}%
-          </div>
-        </div>
-        <div
-          style={{
-            width: `${100.1 - filter.completedPercentageTotal}%`,
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: isFocused ? 'rgba(204, 0, 0, 0.3)' : '#f5f5f5',
-            cursor: 'pointer',
-          }}
-          onClick={() => focusStage?.(index! - 1, filter.isActive)}
-          className={'hover:border border-red-lightest'}
-        />
-      </div>
-      <div className="flex justify-between py-2">
-        {/* @ts-ignore */}
-        <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">
+    const isFocused = focusedFilter && index ? focusedFilter === index - 1 : false;
+    return (
+        <div className="w-full mb-4">
+            <FunnelStepText filter={filter}/>
+            <div
+                style={{
+                    height: '25px',
+                    width: '100%',
+                    backgroundColor: '#f5f5f5',
+                    position: 'relative',
+                    borderRadius: '3px',
+                    overflow: 'hidden',
+                }}
+            >
+                <div
+                    className="flex items-center"
+                    style={{
+                        width: `${filter.completedPercentageTotal}%`,
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        bottom: 0,
+                        backgroundColor: '#394EFF',
+                    }}
+                >
+                    <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
+                        {filter.completedPercentageTotal}%
+                    </div>
+                </div>
+                <div
+                    style={{
+                        width: `${100.1 - filter.completedPercentageTotal}%`,
+                        position: 'absolute',
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundColor: isFocused ? 'rgba(204, 0, 0, 0.3)' : '#f5f5f5',
+                        cursor: 'pointer',
+                    }}
+                    onClick={() => focusStage?.(index! - 1, filter.isActive)}
+                    className={'hover:border border-red-lightest'}
+                />
+            </div>
+            <div className="flex justify-between py-2">
+                {/* @ts-ignore */}
+                <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>
+                <Space className="items-center">
+                    <Icon name="caret-down-fill" color={filter.droppedCount > 0 ? "red" : "gray-light"} size={16}/>
+                    <span
+                        className={"font-medium mx-1 " + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>{filter.droppedCount} Sessions</span>
+                    <span
+                        className={"text-sm " + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>({filter.droppedPercentage}%) Dropped</span>
+                </Space>
+            </div>
         </div>
-        {/* @ts-ignore */}
-        <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>
-  );
+    );
 }
 
 export function UxTFunnelBar(props: Props) {
-  const { filter } = props;
+    const {filter} = props;
 
-  return (
-    <div className="w-full mb-4">
-      <div className={'font-medium'}>{filter.title}</div>
-      <div
-        style={{
-          height: '25px',
-          width: '100%',
-          backgroundColor: '#f5f5f5',
-          position: 'relative',
-          borderRadius: '3px',
-          overflow: 'hidden',
-        }}
-      >
-        <div
-          className="flex items-center"
-          style={{
-            width: `${(filter.completed/(filter.completed+filter.skipped))*100}%`,
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            bottom: 0,
-            backgroundColor: '#00b5ad',
-          }}
-        >
-          <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
-            {((filter.completed/(filter.completed+filter.skipped))*100).toFixed(1)}%
-          </div>
-        </div>
-      </div>
-      <div className="flex justify-between py-2">
-        {/* @ts-ignore */}
-        <div className={'flex items-center gap-4'}>
-          <div className="flex items-center">
-            <Icon name="arrow-right-short" size="20" color="green" />
-            <span className="mx-1 font-medium">{filter.completed}</span><span>completed this step</span>
-          </div>
-          <div className={'flex items-center'}>
-            <Icon name="clock" size="16" />
-            <span className="mx-1 font-medium">
+    return (
+        <div className="w-full mb-4">
+            <div className={'font-medium'}>{filter.title}</div>
+            <div
+                style={{
+                    height: '25px',
+                    width: '100%',
+                    backgroundColor: '#f5f5f5',
+                    position: 'relative',
+                    borderRadius: '3px',
+                    overflow: 'hidden',
+                }}
+            >
+                <div
+                    className="flex items-center"
+                    style={{
+                        width: `${(filter.completed / (filter.completed + filter.skipped)) * 100}%`,
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        bottom: 0,
+                        backgroundColor: '#00b5ad',
+                    }}
+                >
+                    <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
+                        {((filter.completed / (filter.completed + filter.skipped)) * 100).toFixed(1)}%
+                    </div>
+                </div>
+            </div>
+            <div className="flex justify-between py-2">
+                {/* @ts-ignore */}
+                <div className={'flex items-center gap-4'}>
+                    <div className="flex items-center">
+                        <Icon name="arrow-right-short" size="20" color="green"/>
+                        <span className="mx-1 font-medium">{filter.completed}</span><span>completed this step</span>
+                    </div>
+                    <div className={'flex items-center'}>
+                        <Icon name="clock" size="16"/>
+                        <span className="mx-1 font-medium">
               {durationFormatted(filter.avgCompletionTime)}
             </span>
-            <span>
+                        <span>
               Avg. completion time
             </span>
-          </div>
+                    </div>
+                </div>
+                {/* @ts-ignore */}
+                <div className="flex items-center">
+                    <Icon name="caret-down-fill" color="red" size={16}/>
+                    <span className="font-medium mx-1">{filter.skipped}</span><span> skipped</span>
+                </div>
+            </div>
         </div>
-        {/* @ts-ignore */}
-        <div className="flex items-center">
-          <Icon name="caret-down-fill" color="red" size={16} />
-          <span className="font-medium mx-1">{filter.skipped}</span><span> skipped</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);
+    return Math.round((completed / dropped) * 100);
 };