From af7f751b4249f2b34866137113b12c992697ba49 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 14 Jun 2022 14:36:08 +0200
Subject: [PATCH] feat(ui) - issues and errors widgets

---
 .../FunnelIssueDetails/FunnelIssueDetails.tsx |  2 +-
 .../FunnelIssueGraph/FunnelIssueGraph.tsx     | 61 +++++++++----------
 2 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx
index 6a0a02897..215c5f0cc 100644
--- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx
+++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx
@@ -29,7 +29,7 @@ function FunnelIssueDetails(props: Props) {
 
     return (
         <Loader loading={loading}>
-            { funnelIssue && <FunnelIssuesListItem
+            {funnelIssue && <FunnelIssuesListItem
                 issue={funnelIssue}
                 inDetails={true}
             />}
diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/FunnelIssueGraph.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/FunnelIssueGraph.tsx
index 4a69dc280..8821fe5e9 100644
--- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/FunnelIssueGraph.tsx
+++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/FunnelIssueGraph.tsx
@@ -7,45 +7,42 @@ interface Props {
 }
 function FunnelIssueGraph(props: Props) {
     const { issue } = props;
+
     return (
         <div className="flex rounded-sm" style={{ width: '600px' }}>
-            <Popup
-                trigger={
-                <div style={{ width: issue.unaffectedSessionsPer + '%', minWidth: MIN_WIDTH }} className="relative">
+            <div style={{ width: issue.unaffectedSessionsPer + '%', minWidth: MIN_WIDTH }} className="relative">
+                <Popup
+                    content={ `Unaffected sessions` }
+                    size="tiny"
+                    inverted
+                    position="top center"
+                >
                     <div className="w-full relative rounded-tl-sm rounded-bl-sm" style={{ height: '18px', backgroundColor: 'rgba(217, 219, 238, 0.7)' }} />
-                    <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">{issue.unaffectedSessions}</div>            
-                </div>
-                }
-                content={ `Unaffected sessions` }
-                size="tiny"
-                inverted
-                position="top center"
-            />
-            <Popup
-                trigger={        
-                <div style={{ width: issue.affectedSessionsPer + '%', minWidth: MIN_WIDTH}} className="border-l relative">
+                    <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">{issue.unaffectedSessions}</div>               
+                </Popup>
+            </div>
+            <div style={{ width: issue.affectedSessionsPer + '%', minWidth: MIN_WIDTH}} className="border-l relative">
+                <Popup
+                    content={ `Affected sessions` }
+                    size="tiny"
+                    inverted
+                    position="top center"
+                >        
                     <div className="w-full relative" style={{ height: '18px', backgroundColor: 'rgba(238, 238, 238, 0.7)' }} />
                     <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">{issue.affectedSessions}</div>
-                    {/* <div className="absolute left-0 ml-1 text-xs">{issue.affectedSessionsPer}</div> */}
-                </div>
-                }
-                content={ `Affected sessions` }
-                size="tiny"
-                inverted
-                position="top center"
-            />      
-            <Popup
-                trigger={        
-                <div style={{ width: issue.lostConversionsPer + '%', minWidth: MIN_WIDTH}} className="border-l relative">
+                </Popup>
+            </div>
+            <div style={{ width: issue.lostConversionsPer + '%', minWidth: MIN_WIDTH}} className="border-l relative">
+                <Popup
+                    content={ `Conversion lost` }
+                    size="tiny"
+                    inverted
+                    position="top center"
+                >
                     <div className="w-full relative rounded-tr-sm rounded-br-sm" style={{ height: '18px', backgroundColor: 'rgba(204, 0, 0, 0.26)' }} />
                     <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm color-red">{issue.lostConversions}</div>            
-                </div>
-                }
-                content={ `Conversion lost` }
-                size="tiny"
-                inverted
-                position="top center"
-            />            
+                </Popup>
+            </div>
         </div>
     );
 }