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

change(ui) - funnel changes

Browse source
This commit is contained in:
Shekar Siri 2022-11-09 17:26:54 +01:00
parent 15ae991985
commit 2e5048a41f
6 changed files with 27 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,7 +26,7 @@ function FunnelBar(props: Props) {
<div
className="flex items-center"
style={{
width: `${filter.completedPercentage}%`,
width: `${filter.completedPercentageTotal}%`,
position: 'absolute',
top: 0,
left: 0,
@ -34,7 +34,9 @@ function FunnelBar(props: Props) {
backgroundColor: '#00b5ad',
}}
>
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3" />
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
{filter.completedPercentageTotal}%
</div>
</div>
{/* {filter.dropDueToIssues > 0 && (
<div
@ -65,23 +67,19 @@ function FunnelBar(props: Props) {
</div>
<div className="flex justify-between py-2">
{/* @ts-ignore */}
<Tooltip title="With respect to the previous step." disabled={isFirst}>
<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>
</div>
</Tooltip>
<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>
{/* @ts-ignore */}
<Tooltip title="Total drop till this step." disabled={isFirst}>
<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>
</Tooltip>
<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>
);

8
frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
View file

@ -70,14 +70,8 @@ function FunnelWidget(props: Props) {
<span className="text-sm">({funnel.totalConversionsPercentage}%)</span>
</div>
</div>
<div className="mx-3" />
<div className="flex items-center">
<span className="text-xl mr-2">Affected users</span>
<div className="rounded px-2 py-1 bg-gray-lightest">
<span className="text-xl font-medium">{funnel.affectedUsers}</span>
</div>
</div>
</div>
{funnel.totalDropDueToIssues && <div>{funnel.totalDropDueToIssues} sessions dropped due to issues.</div>}
</NoContent>
));
}

2
frontend/app/components/hocs/withReport.tsx
View file

@ -20,7 +20,7 @@ export default function withReport<P extends Props>(WrappedComponent: React.Comp
const { dashboardStore } = useStore();
const dashboard: any = useObserver(() => dashboardStore.selectedDashboard);
const period = useObserver(() => dashboardStore.period);
const pendingRequests = useObserver(() => dashboardStore.pendingReuqests);
const pendingRequests = useObserver(() => dashboardStore.pendingRequests);
useEffect(() => {
if (rendering && pendingRequests <= 0) {

6
frontend/app/mstore/dashboardStore.ts
View file

@ -32,7 +32,7 @@ export default class DashboardStore {
drillDownPeriod: Record<string, any> = Period({ rangeName: LAST_7_DAYS });
startTimestamp: number = 0;
endTimestamp: number = 0;
pendingReuqests: number = 0;
pendingRequests: number = 0;
// Metrics
metricsPage: number = 1;
@ -422,7 +422,7 @@ export default class DashboardStore {
}
return new Promise((resolve, reject) => {
this.pendingReuqests += 1
this.pendingRequests += 1
return metricService
.getMetricChartData(metric, params, isWidget)
.then((data: any) => {
@ -502,7 +502,7 @@ export default class DashboardStore {
reject(err);
}).finally(() => {
setTimeout(() => {
this.pendingReuqests = this.pendingReuqests - 1
this.pendingRequests = this.pendingRequests - 1
}, 100)
});
});

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

@ -10,6 +10,7 @@ export default class Funnel {
isPublic: boolean = false
stages: FunnelStage[] = []
raw: any = null
totalDropDueToIssues: number = 0;
constructor() {
}
@ -18,6 +19,7 @@ export default class Funnel {
if (!this.raw) {
this.raw = json
}
this.totalDropDueToIssues = json.totalDropDueToIssues;
if (json.stages.length >= 1) {
const firstStage = json.stages[0]

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

@ -12,6 +12,7 @@ export default class FunnelStage {
label: string = '';
isActive: boolean = true;
completedPercentage: number = 0;
completedPercentageTotal: number = 0;
droppedCount: number = 0;
droppedPercentage: number = 0;
@ -31,10 +32,11 @@ export default class FunnelStage {
this.value = json.value;
this.type = json.type;
this.label = filterLabelMap[json.type] || json.type;
this.completedPercentage = total ? Math.round((this.sessionsCount / total) * 100) : 0;
this.completedPercentage = total ? Math.round((this.sessionsCount / previousSessionCount) * 100) : 0;
this.completedPercentageTotal = 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;
this.droppedPercentage = this.droppedCount ? Math.round((this.droppedCount / previousSessionCount) * 100) : 0;
return this;
}