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

Merge pull request #774 from openreplay/funnel-changes

Browse source 
change(ui) - funnel updates
This commit is contained in:
Shekar Siri 2022-10-18 12:23:35 +02:00 • committed by GitHub
commit 688a055cff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 97 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

152
frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
View file

@ -1,83 +1,99 @@
import React from 'react';
import FunnelStepText from './FunnelStepText';
import { Icon, Popup } from 'UI';
import { Tooltip } from 'react-tippy';
interface Props {
filter: any;
filter: any;
}
function FunnelBar(props: Props) {
const { filter } = props;
// const completedPercentage = calculatePercentage(filter.sessionsCount, filter.dropDueToIssues);
const { filter } = props;
// const completedPercentage = calculatePercentage(filter.sessionsCount, filter.dropDueToIssues);
return (
<div className="w-full mb-4">
<FunnelStepText filter={filter} />
<div style={{
height: '25px',
// marginBottom: '10px',
width: '100%',
backgroundColor: '#f5f5f5',
position: 'relative',
borderRadius: '3px',
overflow: 'hidden',
}}>
<div className="flex items-center" style={{
width: `${filter.completedPercentage}%`,
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
// height: '10px',
backgroundColor: '#00b5ad',
}}>
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">{filter.completedPercentage}%</div>
</div>
{filter.dropDueToIssues > 0 && (
<div className="flex items-center justify-end" style={{
width: `${filter.dropDueToIssuesPercentage}%`,
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: `${filter.completedPercentage}%`,
// height: '10px',
backgroundColor: '#ff5a5f',
opacity: 0.5,
}}>
<Popup
content="Drop due to issues"
// offset={100}
sticky={true}
>
<div className="color-white w-full flex items-center font-medium mr-2 leading-3">{filter.dropDueToIssuesPercentage}%</div>
</Popup>
</div>
)}
</div>
<div className="flex justify-between py-2">
<div className="flex items-center">
<Icon name="arrow-right-short" size="20" color="green" />
<span className="mx-1 font-medium">{filter.sessionsCount}</span>
<span>Completed</span>
</div>
<div className="flex items-center">
<Icon name="caret-down-fill" color="red" size={16} />
<span className="font-medium mx-1 color-red">{filter.droppedCount}</span>
<span>Dropped</span>
</div>
</div>
return (
<div className="w-full mb-4">
<FunnelStepText filter={filter} />
<div
style={{
height: '25px',
// marginBottom: '10px',
width: '100%',
backgroundColor: '#f5f5f5',
position: 'relative',
borderRadius: '3px',
overflow: 'hidden',
}}
>
<div
className="flex items-center"
style={{
width: `${filter.completedPercentage}%`,
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
// height: '10px',
backgroundColor: '#00b5ad',
}}
>
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
{/* {filter.completedPercentage}% */}
</div>
</div>
);
{filter.dropDueToIssues > 0 && (
<div
className="flex items-center"
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: `${filter.completedPercentage}%`,
opacity: 0.5,
padding: '4px',
}}
>
<div
className="stripes relative"
style={{
width: `${filter.dropDueToIssuesPercentage}%`,
// backgroundColor: 'red',
height: '16px',
}}
>
{/* @ts-ignore */}
<Tooltip title={`${filter.dropDueToIssues} (${filter.dropDueToIssuesPercentage}%) Dropped due to issues`} position="top-start">
<div className="w-full h-8 absolute"/>
</Tooltip>
</div>
</div>
)}
</div>
<div className="flex justify-between py-2">
<div className="flex items-center">
<Icon name="arrow-right-short" size="20" color="green" />
<span className="mx-1 font-medium">{filter.sessionsCount}</span>
<span className="color-gray-medium text-sm">
({filter.completedPercentage}%) Completed
</span>
{/* <span>Completed</span> */}
</div>
<div className="flex items-center">
<Icon name="caret-down-fill" color="red" size={16} />
<span className="font-medium mx-1 color-red">{filter.droppedCount}</span>
<span className="text-sm color-red">({filter.droppedPercentage}%) Dropped</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);
};

2
frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
View file

@ -14,7 +14,7 @@ function SessionSettingButton(props: any) {
return (
<div className="cursor-pointer ml-4" onClick={handleClick}>
{/* @ts-ignore */}
<Tooltip title="Session Settings">
<Tooltip title="Session Settings" unmountHTMLWhenHide>
<Button icon="sliders" variant="text" />
</Tooltip>
</div>

2
frontend/app/mstore/types/funnelStage.ts
View file

@ -13,6 +13,7 @@ export default class FunnelStage {
isActive: boolean = true;
completedPercentage: number = 0;
droppedCount: number = 0;
droppedPercentage: number = 0;
constructor() {
makeAutoObservable(this, {
@ -33,6 +34,7 @@ export default class FunnelStage {
this.completedPercentage = total ? Math.round((this.sessionsCount / total) * 100) : 0;
this.dropDueToIssuesPercentage = total ? Math.round((this.dropDueToIssues / total) * 100) : 0;
this.droppedCount = previousSessionCount - this.sessionsCount;
this.droppedPercentage = this.droppedCount ? Math.round((this.droppedCount / total) * 100) : 0;
return this;
}

10
frontend/app/styles/general.css
View file

@ -316,3 +316,13 @@ p {
.recharts-legend-item-text {
white-space: nowrap !important;
}
.stripes {
background: repeating-linear-gradient(
135deg,
transparent,
transparent 2px,
#ccc 2px,
#ccc 4px
);
}