diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index 8e0c68795..78b5a347c 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -59,7 +59,7 @@ function FunnelBarData({
data: any;
isComp?: boolean;
isFocused?: boolean;
- focusStage?: (index: number, isFocused: boolean) => void;
+ focusStage?: (index: number, isComparison: boolean) => void;
index?: number;
isHorizontal?: boolean;
}) {
@@ -119,7 +119,7 @@ function FunnelBarData({
focusStage?.(index! - 1, data.isActive)}
+ onClick={() => focusStage?.(index! - 1, isComp)}
className={'hover:opacity-70'}
/>
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index 5e0a9abe2..3380445fc 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -32,11 +32,12 @@ function FunnelWidget(props: Props) {
const metricLabel = metric?.metricFormat == 'userCount' ? 'Users' : 'Sessions';
const drillDownFilter = dashboardStore.drillDownFilter;
const drillDownPeriod = dashboardStore.drillDownPeriod;
+ const comparisonPeriod = metric ? dashboardStore.comparisonPeriods[metric.metricId] : undefined
const metricFilters = metric?.series[0]?.filter.filters || [];
- const applyDrillDown = (index: number) => {
+ const applyDrillDown = (index: number, isComp?: boolean) => {
const filter = new Filter().fromData({ filters: metricFilters.slice(0, index + 1) });
- const periodTimestamps = drillDownPeriod.toTimestamps();
+ const periodTimestamps = isComp && index > -1 ? comparisonPeriod.toTimestamps() : drillDownPeriod.toTimestamps();
drillDownFilter.merge({
filters: filter.toJson().filters,
startTimestamp: periodTimestamps.startTimestamp,
@@ -51,7 +52,7 @@ function FunnelWidget(props: Props) {
};
}, []);
- const focusStage = (index: number) => {
+ const focusStage = (index: number, isComp?: boolean) => {
funnel.stages.forEach((s, i) => {
// turning on all filters if one was focused already
if (focusedFilter === index) {
@@ -67,7 +68,7 @@ function FunnelWidget(props: Props) {
}
});
- applyDrillDown(focusedFilter === index ? -1 : index);
+ applyDrillDown(focusedFilter === index ? -1 : index, isComp);
};
const shownStages = React.useMemo(() => {
diff --git a/frontend/app/mstore/types/funnelStage.ts b/frontend/app/mstore/types/funnelStage.ts
index 9b158363d..c5f7e08e8 100644
--- a/frontend/app/mstore/types/funnelStage.ts
+++ b/frontend/app/mstore/types/funnelStage.ts
@@ -33,7 +33,7 @@ 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.count / previousSessionCount) * 100) : 0;
+ this.completedPercentage = previousSessionCount ? 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.count;