diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index b84fff021..813c394e3 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -1,83 +1,99 @@
import React from 'react';
import FunnelStepText from './FunnelStepText';
import { Icon, Popup } from 'UI';
+import { Tooltip } from 'react-tippy';
interface Props {
- filter: any;
+ filter: any;
}
function FunnelBar(props: Props) {
- const { filter } = props;
- // const completedPercentage = calculatePercentage(filter.sessionsCount, filter.dropDueToIssues);
+ const { filter } = props;
+ // const completedPercentage = calculatePercentage(filter.sessionsCount, filter.dropDueToIssues);
- return (
-
-
-
-
-
{filter.completedPercentage}%
-
- {filter.dropDueToIssues > 0 && (
-
-
- {filter.dropDueToIssuesPercentage}%
-
-
-
- )}
-
-
-
-
- {filter.sessionsCount}
- Completed
-
-
-
- {filter.droppedCount}
- Dropped
-
-
+ return (
+
+
+
+
+
+ {/* {filter.completedPercentage}% */}
+
- );
+ {filter.dropDueToIssues > 0 && (
+
+
+ {/* @ts-ignore */}
+
+
+
+
+
+ )}
+
+
+
+
+ {filter.sessionsCount}
+
+ ({filter.completedPercentage}%) Completed
+
+ {/* Completed */}
+
+
+
+ {filter.droppedCount}
+ ({filter.droppedPercentage}%) Dropped
+
+
+
+ );
}
export default FunnelBar;
const calculatePercentage = (completed: number, dropped: number) => {
- const total = completed + dropped;
- if (dropped === 0) return 100;
- if (total === 0) return 0;
+ const total = completed + dropped;
+ if (dropped === 0) return 100;
+ if (total === 0) return 0;
- return Math.round((completed / dropped) * 100);
-
-}
\ No newline at end of file
+ return Math.round((completed / dropped) * 100);
+};
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
index 5d76f8979..6dde016a3 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
@@ -14,7 +14,7 @@ function SessionSettingButton(props: any) {
return (
{/* @ts-ignore */}
-
+
diff --git a/frontend/app/mstore/types/funnelStage.ts b/frontend/app/mstore/types/funnelStage.ts
index c1a98035f..0860fd71c 100644
--- a/frontend/app/mstore/types/funnelStage.ts
+++ b/frontend/app/mstore/types/funnelStage.ts
@@ -13,6 +13,7 @@ export default class FunnelStage {
isActive: boolean = true;
completedPercentage: number = 0;
droppedCount: number = 0;
+ droppedPercentage: number = 0;
constructor() {
makeAutoObservable(this, {
@@ -33,6 +34,7 @@ export default class FunnelStage {
this.completedPercentage = 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;
return this;
}
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index 7e072fcd4..c14a95d14 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -316,3 +316,13 @@ p {
.recharts-legend-item-text {
white-space: nowrap !important;
}
+
+.stripes {
+ background: repeating-linear-gradient(
+ 135deg,
+ transparent,
+ transparent 2px,
+ #ccc 2px,
+ #ccc 4px
+ );
+}
\ No newline at end of file