diff --git a/frontend/app/components/Errors/Error/ErrorInfo.js b/frontend/app/components/Errors/Error/ErrorInfo.js
index 445bd8f87..91d8a018f 100644
--- a/frontend/app/components/Errors/Error/ErrorInfo.js
+++ b/frontend/app/components/Errors/Error/ErrorInfo.js
@@ -77,7 +77,7 @@ export default class ErrorInfo extends React.PureComponent {
// animatedIcon="no-results"
show={ !loading && errorIdInStore == null }
>
-
*/}
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index 8371fea8b..020250603 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -18,6 +18,7 @@ function FunnelWidget(props: Props) {
const stages = isWidget ? [...funnel.stages.slice(0, 1), funnel.stages[funnel.stages.length - 1]] : funnel.stages;
const hasMoreSteps = funnel.stages.length > 2;
const lastStage = funnel.stages[funnel.stages.length - 1];
+ const remainingSteps = totalSteps - 2;
return useObserver(() => (
@@ -34,7 +35,7 @@ function FunnelWidget(props: Props) {
{ hasMoreSteps && (
<>
-
+
>
)}
@@ -77,14 +78,16 @@ function EmptyStage({ total }: any) {
return useObserver( () => (
-
+{total} steps
+
+ {`+${total} ${total > 1 ? 'steps' : 'step'}`}
+
))
}
function Stage({ stage, index, isWidget }: any) {
- return useObserver(() => stage && (
+ return useObserver(() => stage ? (
@@ -92,7 +95,7 @@ function Stage({ stage, index, isWidget }: any) {
)}
- ))
+ ) : <>>)
}
function IndexNumber({ index }: any) {
diff --git a/frontend/app/mstore/types/funnel.ts b/frontend/app/mstore/types/funnel.ts
index e88062b5b..3678f43d1 100644
--- a/frontend/app/mstore/types/funnel.ts
+++ b/frontend/app/mstore/types/funnel.ts
@@ -1,5 +1,4 @@
import FunnelStage from './funnelStage'
-// import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx"
export interface IFunnel {
affectedUsers: number;
@@ -36,10 +35,13 @@ export default class Funnel implements IFunnel {
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)) : []
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)
+ this.lostConversionsPercentage = Math.round(this.lostConversions / firstStage.sessionsCount * 100) || 0
+
this.totalConversions = lastStage.sessionsCount
- this.totalConversionsPercentage = Math.round(this.totalConversions / firstStage.sessionsCount * 100)
+ this.totalConversionsPercentage = Math.round(this.totalConversions / firstStage.sessionsCount * 100) || 0
+
this.conversionImpact = this.lostConversions ? Math.round((this.lostConversions / firstStage.sessionsCount) * 100) : 0;
this.affectedUsers = firstStage.usersCount ? firstStage.usersCount - lastStage.usersCount : 0;
}