fix(ui): funnel - filter sessions by step (#2855)
This commit is contained in:
Shekar Siri
GitHub
parent
35eb7d4152
commit
45ef98b163
1 changed files with 156 additions and 132 deletions
|
|
@ -1,163 +1,187 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import Widget from 'App/mstore/types/widget';
|
||||
import Funnelbar, { UxTFunnelBar } from "./FunnelBar";
|
||||
import Funnelbar, { UxTFunnelBar } from './FunnelBar';
|
||||
import cn from 'classnames';
|
||||
import stl from './FunnelWidget.module.css';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { NoContent, Icon } from 'UI';
|
||||
import { Tag, Tooltip } from 'antd';
|
||||
import { useModal } from 'App/components/Modal';
|
||||
import { useStore } from '@/mstore';
|
||||
import Filter from '@/mstore/types/filter';
|
||||
|
||||
interface Props {
|
||||
metric?: Widget;
|
||||
isWidget?: boolean;
|
||||
data: any;
|
||||
metric?: Widget;
|
||||
isWidget?: boolean;
|
||||
data: any;
|
||||
}
|
||||
|
||||
function FunnelWidget(props: Props) {
|
||||
const [focusedFilter, setFocusedFilter] = React.useState<number | null>(null);
|
||||
const { isWidget = false, data, metric } = props;
|
||||
const funnel = data.funnel || { stages: [] };
|
||||
const totalSteps = funnel.stages.length;
|
||||
const stages = isWidget ? [...funnel.stages.slice(0, 1), funnel.stages[funnel.stages.length - 1]] : funnel.stages;
|
||||
const hasMoreSteps = funnel.stages.length > 2;
|
||||
const lastStage = funnel.stages[funnel.stages.length - 1];
|
||||
const remainingSteps = totalSteps - 2;
|
||||
const { hideModal } = useModal();
|
||||
const metricLabel = metric?.metricFormat == 'userCount' ? 'Users' : 'Sessions';
|
||||
const { dashboardStore, searchStore } = useStore();
|
||||
const [focusedFilter, setFocusedFilter] = React.useState<number | null>(null);
|
||||
const { isWidget = false, data, metric } = props;
|
||||
const funnel = data.funnel || { stages: [] };
|
||||
const totalSteps = funnel.stages.length;
|
||||
const stages = isWidget ? [...funnel.stages.slice(0, 1), funnel.stages[funnel.stages.length - 1]] : funnel.stages;
|
||||
const hasMoreSteps = funnel.stages.length > 2;
|
||||
const lastStage = funnel.stages[funnel.stages.length - 1];
|
||||
const remainingSteps = totalSteps - 2;
|
||||
const { hideModal } = useModal();
|
||||
const metricLabel = metric?.metricFormat == 'userCount' ? 'Users' : 'Sessions';
|
||||
const drillDownFilter = dashboardStore.drillDownFilter;
|
||||
const drillDownPeriod = dashboardStore.drillDownPeriod;
|
||||
const metricFilters = metric?.series[0]?.filter.filters || [];
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (isWidget) return;
|
||||
hideModal();
|
||||
const applyDrillDown = (index: number) => {
|
||||
const filter = new Filter().fromData({ filters: metricFilters.slice(0, index + 1) });
|
||||
const periodTimestamps = drillDownPeriod.toTimestamps();
|
||||
drillDownFilter.merge({
|
||||
filters: filter.toJson().filters,
|
||||
startTimestamp: periodTimestamps.startTimestamp,
|
||||
endTimestamp: periodTimestamps.endTimestamp
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (isWidget) return;
|
||||
hideModal();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const focusStage = (index: number) => {
|
||||
funnel.stages.forEach((s, i) => {
|
||||
// turning on all filters if one was focused already
|
||||
if (focusedFilter === index) {
|
||||
s.updateKey('isActive', true);
|
||||
setFocusedFilter(null);
|
||||
} else {
|
||||
setFocusedFilter(index);
|
||||
if (i === index) {
|
||||
s.updateKey('isActive', true);
|
||||
} else {
|
||||
s.updateKey('isActive', false);
|
||||
}
|
||||
}, []);
|
||||
}
|
||||
});
|
||||
|
||||
const focusStage = (index: number) => {
|
||||
funnel.stages.forEach((s, i) => {
|
||||
// turning on all filters if one was focused already
|
||||
if (focusedFilter === index) {
|
||||
s.updateKey('isActive', true)
|
||||
setFocusedFilter(null)
|
||||
} else {
|
||||
setFocusedFilter(index)
|
||||
if (i === index) {
|
||||
s.updateKey('isActive', true)
|
||||
} else {
|
||||
s.updateKey('isActive', false)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
applyDrillDown(focusedFilter === index ? -1 : index);
|
||||
};
|
||||
|
||||
return (
|
||||
<NoContent
|
||||
style={{ minHeight: 220 }}
|
||||
title={
|
||||
<div className="flex items-center text-lg">
|
||||
<Icon name="info-circle" className="mr-2" size="18" />
|
||||
No data available for the selected period.
|
||||
</div>
|
||||
}
|
||||
show={!stages || stages.length === 0}
|
||||
>
|
||||
<div className="w-full">
|
||||
{ !isWidget && (
|
||||
stages.map((filter: any, index: any) => (
|
||||
<Stage
|
||||
key={index}
|
||||
index={index + 1}
|
||||
isWidget={isWidget}
|
||||
stage={filter}
|
||||
focusStage={focusStage}
|
||||
focusedFilter={focusedFilter}
|
||||
metricLabel={metricLabel}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
return (
|
||||
<NoContent
|
||||
style={{ minHeight: 220 }}
|
||||
title={
|
||||
<div className="flex items-center text-lg">
|
||||
<Icon name="info-circle" className="mr-2" size="18" />
|
||||
No data available for the selected period.
|
||||
</div>
|
||||
}
|
||||
show={!stages || stages.length === 0}
|
||||
>
|
||||
<div className="w-full">
|
||||
{!isWidget && (
|
||||
stages.map((filter: any, index: any) => (
|
||||
<Stage
|
||||
key={index}
|
||||
index={index + 1}
|
||||
isWidget={isWidget}
|
||||
stage={filter}
|
||||
focusStage={focusStage}
|
||||
focusedFilter={focusedFilter}
|
||||
metricLabel={metricLabel}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
|
||||
{ isWidget && (
|
||||
<>
|
||||
<Stage index={1} isWidget={isWidget} stage={stages[0]} />
|
||||
{isWidget && (
|
||||
<>
|
||||
<Stage index={1} isWidget={isWidget} stage={stages[0]} />
|
||||
|
||||
{ hasMoreSteps && (
|
||||
<>
|
||||
<EmptyStage total={remainingSteps} />
|
||||
</>
|
||||
)}
|
||||
{hasMoreSteps && (
|
||||
<>
|
||||
<EmptyStage total={remainingSteps} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{funnel.stages.length > 1 && (
|
||||
<Stage index={totalSteps} isWidget={isWidget} stage={lastStage} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center pb-4">
|
||||
<div className="flex items-center">
|
||||
<span className="text-base font-medium mr-2">Lost conversion</span>
|
||||
<Tooltip title={`${funnel.lostConversions} Sessions ${funnel.lostConversionsPercentage}%`}>
|
||||
<Tag bordered={false} color="red" className='text-lg font-medium rounded-lg'>
|
||||
{funnel.lostConversions}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="mx-3" />
|
||||
<div className="flex items-center">
|
||||
<span className="text-base font-medium mr-2">Total conversion</span>
|
||||
<Tooltip title={`${funnel.totalConversions} Sessions ${funnel.totalConversionsPercentage}%`}>
|
||||
<Tag bordered={false} color="green" className='text-lg font-medium rounded-lg'>
|
||||
{funnel.totalConversions}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
{funnel.totalDropDueToIssues > 0 && <div className="flex items-center mb-2"><Icon name="magic" /> <span className="ml-2">{funnel.totalDropDueToIssues} sessions dropped due to issues.</span></div>}
|
||||
</NoContent>
|
||||
);
|
||||
{funnel.stages.length > 1 && (
|
||||
<Stage index={totalSteps} isWidget={isWidget} stage={lastStage} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center pb-4">
|
||||
<div className="flex items-center">
|
||||
<span className="text-base font-medium mr-2">Lost conversion</span>
|
||||
<Tooltip title={`${funnel.lostConversions} Sessions ${funnel.lostConversionsPercentage}%`}>
|
||||
<Tag bordered={false} color="red" className="text-lg font-medium rounded-lg">
|
||||
{funnel.lostConversions}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="mx-3" />
|
||||
<div className="flex items-center">
|
||||
<span className="text-base font-medium mr-2">Total conversion</span>
|
||||
<Tooltip title={`${funnel.totalConversions} Sessions ${funnel.totalConversionsPercentage}%`}>
|
||||
<Tag bordered={false} color="green" className="text-lg font-medium rounded-lg">
|
||||
{funnel.totalConversions}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
{funnel.totalDropDueToIssues > 0 && <div className="flex items-center mb-2"><Icon name="magic" /> <span
|
||||
className="ml-2">{funnel.totalDropDueToIssues} sessions dropped due to issues.</span></div>}
|
||||
</NoContent>
|
||||
);
|
||||
}
|
||||
|
||||
export const EmptyStage = observer(({ total }: any) => {
|
||||
return (
|
||||
<div className={cn("flex items-center mb-4 pb-3", stl.step)}>
|
||||
<IndexNumber index={0} />
|
||||
<div className="w-fit px-2 border border-teal py-1 text-center justify-center bg-teal-lightest flex items-center rounded-full color-teal" style={{ width: '100px'}}>
|
||||
{`+${total} ${total > 1 ? 'steps' : 'step'}`}
|
||||
</div>
|
||||
<div className="border-b w-full border-dashed"></div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
return (
|
||||
<div className={cn('flex items-center mb-4 pb-3', stl.step)}>
|
||||
<IndexNumber index={0} />
|
||||
<div
|
||||
className="w-fit px-2 border border-teal py-1 text-center justify-center bg-teal-lightest flex items-center rounded-full color-teal"
|
||||
style={{ width: '100px' }}>
|
||||
{`+${total} ${total > 1 ? 'steps' : 'step'}`}
|
||||
</div>
|
||||
<div className="border-b w-full border-dashed"></div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const Stage = observer(({ metricLabel, stage, index, isWidget, uxt, focusStage, focusedFilter }: any) => {
|
||||
return stage ? (
|
||||
<div
|
||||
className={cn('flex items-start', stl.step, { [stl['step-disabled']]: !stage.isActive })}
|
||||
>
|
||||
<IndexNumber index={index} />
|
||||
{!uxt ? <Funnelbar metricLabel={metricLabel} index={index} filter={stage} focusStage={focusStage} focusedFilter={focusedFilter} /> : <UxTFunnelBar filter={stage} />}
|
||||
{/*{!isWidget && !uxt && <BarActions bar={stage} />}*/}
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
})
|
||||
return stage ? (
|
||||
<div
|
||||
className={cn('flex items-start', stl.step, { [stl['step-disabled']]: !stage.isActive })}
|
||||
>
|
||||
<IndexNumber index={index} />
|
||||
{!uxt ? <Funnelbar metricLabel={metricLabel} index={index} filter={stage} focusStage={focusStage}
|
||||
focusedFilter={focusedFilter} /> : <UxTFunnelBar filter={stage} />}
|
||||
{/*{!isWidget && !uxt && <BarActions bar={stage} />}*/}
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
});
|
||||
|
||||
export const IndexNumber = observer(({ index }: any) => {
|
||||
return (
|
||||
<div className="z-10 w-6 h-6 border shrink-0 mr-4 text-sm rounded-full bg-gray-lightest flex items-center justify-center leading-3">
|
||||
{index === 0 ? <Icon size="14" color="gray-dark" name="list" /> : index}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
return (
|
||||
<div
|
||||
className="z-10 w-6 h-6 border shrink-0 mr-4 text-sm rounded-full bg-gray-lightest flex items-center justify-center leading-3">
|
||||
{index === 0 ? <Icon size="14" color="gray-dark" name="list" /> : index}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
const BarActions = observer(({ bar }: any) => {
|
||||
return (
|
||||
<div className="self-end flex items-center justify-center ml-4" style={{ marginBottom: '49px'}}>
|
||||
<button onClick={() => bar.updateKey('isActive', !bar.isActive)}>
|
||||
<Icon name="eye-slash-fill" color={bar.isActive ? "gray-light" : "gray-darkest"} size="22" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
return (
|
||||
<div className="self-end flex items-center justify-center ml-4" style={{ marginBottom: '49px' }}>
|
||||
<button onClick={() => bar.updateKey('isActive', !bar.isActive)}>
|
||||
<Icon name="eye-slash-fill" color={bar.isActive ? 'gray-light' : 'gray-darkest'} size="22" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default observer(FunnelWidget);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue