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

change(ui): funnel counts

Browse source
This commit is contained in:
Shekar Siri 2024-11-07 17:16:44 +01:00
parent 5104ecd9dd
commit c222a72a8b
4 changed files with 23 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -62,7 +62,7 @@ function FunnelBar(props: Props) {
{/* @ts-ignore */}
<div className="flex items-center">
<Icon name="arrow-right-short" size="20" color="green" />
<span className="mx-1">{filter.sessionsCount} Sessions</span>
<span className="mx-1">{filter.count} Sessions</span>
<span className="color-gray-medium text-sm">
({filter.completedPercentage}%) Completed
</span>

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

@ -20,20 +20,20 @@ export default class Funnel {
this.raw = json
}
this.totalDropDueToIssues = json.totalDropDueToIssues;
if (json.stages.length >= 1) {
const firstStage = json.stages[0]
this.stages = json.stages ? json.stages.map((stage: any, index: number) => new FunnelStage().fromJSON(stage, firstStage.sessionsCount, index > 0 ? json.stages[index - 1].sessionsCount : stage.sessionsCount)) : []
this.stages = json.stages ? json.stages.map((stage: any, index: number) => new FunnelStage().fromJSON(stage, firstStage.count, index > 0 ? json.stages[index - 1].count : stage.count)) : []
const filteredStages = this.stages.filter((stage: any) => stage.isActive)
const lastStage = filteredStages[filteredStages.length - 1]
this.lostConversions = firstStage.sessionsCount - lastStage.sessionsCount
this.lostConversionsPercentage = Math.round(this.lostConversions / firstStage.sessionsCount * 100) || 0
this.totalConversions = lastStage.sessionsCount
this.totalConversionsPercentage = Math.round(this.totalConversions / firstStage.sessionsCount * 100) || 0
this.conversionImpact = this.lostConversions ? Math.round((this.lostConversions / firstStage.sessionsCount) * 100) : 0;
this.lostConversions = (firstStage.count - lastStage.count) || 0
this.lostConversionsPercentage = Math.round(this.lostConversions / firstStage.count * 100) || 0
this.totalConversions = lastStage.count || 0
this.totalConversionsPercentage = Math.round(this.totalConversions / firstStage.count * 100) || 0
this.conversionImpact = this.lostConversions ? Math.round((this.lostConversions / firstStage.count) * 100) : 0;
this.affectedUsers = firstStage.usersCount ? firstStage.usersCount - lastStage.usersCount : 0;
}

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

@ -5,7 +5,7 @@ export default class FunnelStage {
dropDueToIssuesPercentage: number = 0;
dropPct: number = 0;
operator: string = "";
sessionsCount: number = 0;
count: number = 0;
usersCount: number = 0;
type: string = '';
value: string[] = [];
@ -28,15 +28,15 @@ export default class FunnelStage {
this.dropDueToIssues = json.dropDueToIssues || 0;
this.dropPct = json.dropPct;
this.operator = json.operator;
this.sessionsCount = json.sessionsCount || 0;
this.count = json.count || 0;
this.usersCount = json.usersCount;
this.value = json.value;
this.type = json.type;
this.label = filterLabelMap[json.type] || json.type;
this.completedPercentage = total ? Math.round((this.sessionsCount / previousSessionCount) * 100) : 0;
this.completedPercentageTotal = total ? Math.round((this.sessionsCount / total) * 100) : 0;
this.completedPercentage = total ? Math.round((this.count / previousSessionCount) * 100) : 0;
this.completedPercentageTotal = total ? Math.round((this.count / total) * 100) : 0;
this.dropDueToIssuesPercentage = total ? Math.round((this.dropDueToIssues / total) * 100) : 0;
this.droppedCount = previousSessionCount - this.sessionsCount;
this.droppedCount = previousSessionCount - this.count;
this.droppedPercentage = this.droppedCount ? Math.round((this.droppedCount / previousSessionCount) * 100) : 0;
return this;
}
@ -44,4 +44,4 @@ export default class FunnelStage {
updateKey(key: any, value: any) {
this[key] = value
}
}
}

12
frontend/app/types/funnel.js
View file

@ -48,7 +48,7 @@ export default Record({
return true;
},
toData() {
const js = this.toJS();
const js = this.toJS();
return js;
}
},
@ -58,18 +58,18 @@ export default Record({
stage.label = `Step ${index + 1}`;
return stage;
});
let firstStage = _stages.length > 0 ? _stages[0] : {};
let lastStage = _stages ? _stages[_stages.length - 1] : {};
if (activeStages && activeStages.length === 2) {
firstStage = _stages[activeStages[0]];
lastStage = _stages[activeStages[1]];
}
const affectedUsers = firstStage.usersCount ? firstStage.usersCount - lastStage.usersCount : 0;
const lostConversions = rest.totalDropDueToIssues;
const conversionImpact = lostConversions ? Math.round((lostConversions / firstStage.sessionsCount) * 100) : 0;
const conversionImpact = lostConversions ? Math.round((lostConversions / firstStage.count) * 100) : 0;
return {
...rest,
@ -87,7 +87,7 @@ export default Record({
firstStage: firstStage && firstStage.label || '',
lastStage: lastStage && lastStage.label || '',
filter: Filter(filter),
sessionsCount: lastStage && lastStage.sessionsCount,
sessionsCount: lastStage && lastStage.count,
stepsCount: stages ? stages.length : 0,
conversions: 100 - conversionImpact
}