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; }