jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: fix funnel comparison focus

Browse source
This commit is contained in:
nick-delirium 2025-01-21 17:10:27 +01:00
parent d6e4162a3b
commit b6bd7b99dc
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
3 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
View file

@ -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({
</div>
<div
style={emptyBarStyle}
onClick={() => focusStage?.(index! - 1, data.isActive)}
onClick={() => focusStage?.(index! - 1, isComp)}
className={'hover:opacity-70'}
/>
</div>

9
frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
View file

@ -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(() => {

2
frontend/app/mstore/types/funnelStage.ts
View file

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