diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index a09e48777..4947b543e 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -26,7 +26,7 @@ function FunnelBar(props: Props) {
-
+
+ {filter.completedPercentageTotal}%
+
{/* {filter.dropDueToIssues > 0 && (
{/* @ts-ignore */}
-
-
-
- {filter.sessionsCount}
-
- ({filter.completedPercentage}%) Completed
-
-
-
+
+
+ {filter.sessionsCount} Sessions
+
+ ({filter.completedPercentage}%) Completed
+
+
{/* @ts-ignore */}
-
-
-
- {filter.droppedCount}
- ({filter.droppedPercentage}%) Dropped
-
-
+
+
+ {filter.droppedCount} Sessions
+ ({filter.droppedPercentage}%) Dropped
+
);
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index 80e498a2f..22ae335ac 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -70,14 +70,8 @@ function FunnelWidget(props: Props) {
({funnel.totalConversionsPercentage}%)
-
-
-
Affected users
-
- {funnel.affectedUsers}
-
-
+ {funnel.totalDropDueToIssues && {funnel.totalDropDueToIssues} sessions dropped due to issues.
}
));
}
diff --git a/frontend/app/components/hocs/withReport.tsx b/frontend/app/components/hocs/withReport.tsx
index bf7f039a5..aebd72998 100644
--- a/frontend/app/components/hocs/withReport.tsx
+++ b/frontend/app/components/hocs/withReport.tsx
@@ -20,7 +20,7 @@ export default function withReport(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) {
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts
index 7660d4463..9b2a98220 100644
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@@ -32,7 +32,7 @@ export default class DashboardStore {
drillDownPeriod: Record = 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)
});
});
diff --git a/frontend/app/mstore/types/funnel.ts b/frontend/app/mstore/types/funnel.ts
index 1b9cf9a71..3cf4f675b 100644
--- a/frontend/app/mstore/types/funnel.ts
+++ b/frontend/app/mstore/types/funnel.ts
@@ -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]
diff --git a/frontend/app/mstore/types/funnelStage.ts b/frontend/app/mstore/types/funnelStage.ts
index 0860fd71c..85cbb7a64 100644
--- a/frontend/app/mstore/types/funnelStage.ts
+++ b/frontend/app/mstore/types/funnelStage.ts
@@ -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;
}