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;