jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - issues and errors widgets

Browse source
This commit is contained in:
Shekar Siri 2022-06-14 14:36:08 +02:00
parent 7874dcbe0b
commit af7f751b42
2 changed files with 30 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx
View file

@ -29,7 +29,7 @@ function FunnelIssueDetails(props: Props) {
return (
<Loader loading={loading}>
{ funnelIssue && <FunnelIssuesListItem
{funnelIssue && <FunnelIssuesListItem
issue={funnelIssue}
inDetails={true}
/>}

61
frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/FunnelIssueGraph.tsx
View file

@ -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>
);
}