From 0880ce0e20519db204a6dc147eec128492d598c2 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 27 Jun 2024 13:52:28 +0200
Subject: [PATCH] change(ui): funnel example

---
 .../NewDashModal/ExampleCards.tsx             |  28 ++++-
 .../NewDashModal/Examples/ExCard.tsx          |   6 +-
 .../NewDashModal/Examples/Funnel.tsx          | 105 ++++++++++--------
 .../Funnels/FunnelWidget/FunnelBar.tsx        |   2 +-
 .../Funnels/FunnelWidget/FunnelWidget.tsx     |   2 +-
 5 files changed, 91 insertions(+), 52 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
index f77e18343..6706838c4 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
@@ -86,6 +86,32 @@ export const CARD_LIST: CardType[] = [
         cardType: FUNNEL,
         category: CARD_CATEGORIES[0].key,
         example: ExampleFunnel,
+        width: 4,
+        data: {
+            stages: [
+                {
+                    "value": [
+                        "/sessions"
+                    ],
+                    "type": "location",
+                    "operator": "contains",
+                    "sessionsCount": 1586,
+                    "dropPct": null,
+                    "usersCount": 470,
+                    "dropDueToIssues": 0
+                },
+                {
+                    "value": [],
+                    "type": "click",
+                    "operator": "onAny",
+                    "sessionsCount": 1292,
+                    "dropPct": 18,
+                    "usersCount": 450,
+                    "dropDueToIssues": 294
+                }
+            ],
+            totalDropDueToIssues: 294
+        }
     },
     {
         title: 'Path Finder',
@@ -95,7 +121,7 @@ export const CARD_LIST: CardType[] = [
         example: ExamplePath,
     },
     {
-        title: 'Trend',
+        title: 'Sessions Trend',
         key: TIMESERIES,
         cardType: TIMESERIES,
         metricOf: 'sessionCount',
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
index 5294648a2..be2938e65 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
@@ -16,11 +16,11 @@ function ExCard({
   return (
     <div
       className={'rounded-lg overflow-hidden border border-transparent p-4 bg-white hover:border-blue hover:shadow-sm'}
-      style={{width: '100%', height: height || 286}}
+      style={{width: '100%', minHeight: height || 286}}
     >
       <div className={'font-medium text-lg'}>{title}</div>
-      <div className={'flex flex-col gap-2 mt-2 cursor-pointer'} 
-      style={{height: height ? height - 50 : 236,}}
+      <div className={'flex flex-col gap-2 mt-2 cursor-pointer'}
+           style={{minHeight: height ? height - 50 : 236,}}
       onClick={() => onCard(type)}>{children}</div>
     </div>
   );
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx
index f8c0c361a..1e07a1d3e 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx
@@ -1,54 +1,67 @@
-import { ArrowRight } from 'lucide-react';
+import {ArrowRight} from 'lucide-react';
 import React from 'react';
 
 import ExCard from './ExCard';
 import {FUNNEL} from "App/constants/card";
+import FunnelWidget from "Components/Funnels/FunnelWidget/FunnelWidget";
+import Funnel from "App/mstore/types/funnel";
 
-function ExampleFunnel(props: any) {
-  const steps = [
-    {
-      progress: 500,
-    },
-    {
-      progress: 250,
-    },
-    {
-      progress: 100,
-    },
-  ];
-  return (
-    <ExCard
-      {...props}
-    >
-      <>
-        {steps.map((step, index) => (
-          <div key={index}>
-            <div>Step {index + 1}</div>
-            <div className={'rounded flex items-center w-full overflow-hidden'}>
-              <div
-                style={{
-                  backgroundColor: step.progress <= 100 ? '#394EFF' : '#E2E4F6',
-                  width: `${(step.progress / 500) * 100}%`,
-                  height: 30,
-                }}
-              />
-              <div
-                style={{
-                  width: `${((500 - step.progress) / 500) * 100}%`,
-                  height: 30,
-                  background: '#FFF1F0',
-                }}
-              />
-            </div>
-            <div className={'flex items-center gap-2'}>
-              <ArrowRight size={14} color={'#8C8C8C'} strokeWidth={1} />
-              <div className={'text-disabled-text'}>{step.progress}</div>
-            </div>
-          </div>
-        ))}
-      </>
-    </ExCard>
-  );
+interface Props {
+    title: string;
+    type: string;
+    onCard: (card: string) => void;
+    data?: any,
+}
+
+function ExampleFunnel(props: Props) {
+    // const steps = [
+    //     {
+    //         progress: 500,
+    //     },
+    //     {
+    //         progress: 250,
+    //     },
+    //     {
+    //         progress: 100,
+    //     },
+    // ];
+    const _data = {
+        funnel: new Funnel().fromJSON(props.data)
+    }
+    return (
+        <ExCard
+            {...props}
+        >
+            <FunnelWidget data={_data} isWidget={true}/>
+            {/*<>*/}
+            {/*    {steps.map((step, index) => (*/}
+            {/*        <div key={index}>*/}
+            {/*            <div>Step {index + 1}</div>*/}
+            {/*            <div className={'rounded flex items-center w-full overflow-hidden'}>*/}
+            {/*                <div*/}
+            {/*                    style={{*/}
+            {/*                        backgroundColor: step.progress <= 100 ? '#394EFF' : '#E2E4F6',*/}
+            {/*                        width: `${(step.progress / 500) * 100}%`,*/}
+            {/*                        height: 30,*/}
+            {/*                    }}*/}
+            {/*                />*/}
+            {/*                <div*/}
+            {/*                    style={{*/}
+            {/*                        width: `${((500 - step.progress) / 500) * 100}%`,*/}
+            {/*                        height: 30,*/}
+            {/*                        background: '#FFF1F0',*/}
+            {/*                    }}*/}
+            {/*                />*/}
+            {/*            </div>*/}
+            {/*            <div className={'flex items-center gap-2'}>*/}
+            {/*                <ArrowRight size={14} color={'#8C8C8C'} strokeWidth={1}/>*/}
+            {/*                <div className={'text-disabled-text'}>{step.progress}</div>*/}
+            {/*            </div>*/}
+            {/*        </div>*/}
+            {/*    ))}*/}
+            {/*</>*/}
+        </ExCard>
+    );
 }
 
 export default ExampleFunnel;
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index b3aef756c..0ca634028 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -35,7 +35,7 @@ function FunnelBar(props: Props) {
             top: 0,
             left: 0,
             bottom: 0,
-            backgroundColor: '#00b5ad',
+            backgroundColor: '#394EFF',
           }}
         >
           <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index 5feefb888..22f95d3c2 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -8,7 +8,7 @@ import { NoContent, Icon } from 'UI';
 import { useModal } from 'App/components/Modal';
 
 interface Props {
-    metric: Widget;
+    metric?: Widget;
     isWidget?: boolean;
     data: any;
 }