change(ui): funnel label change for sessions vs users
This commit is contained in:
Shekar Siri
parent
c222a72a8b
commit
16778e9bb3
4 changed files with 29 additions and 68 deletions
|
|
@ -64,7 +64,7 @@ export const CARD_LIST: CardType[] = [
|
|||
category: CARD_CATEGORIES[0].key,
|
||||
example: ExampleFunnel,
|
||||
width: 4,
|
||||
height: 356,
|
||||
height: 300,
|
||||
data: {
|
||||
stages: [
|
||||
{
|
||||
|
|
@ -73,22 +73,20 @@ export const CARD_LIST: CardType[] = [
|
|||
],
|
||||
'type': 'location',
|
||||
'operator': 'contains',
|
||||
'sessionsCount': 1586,
|
||||
'count': 1586,
|
||||
'dropPct': null,
|
||||
'usersCount': 470,
|
||||
'dropDueToIssues': 0
|
||||
},
|
||||
{
|
||||
'value': [],
|
||||
'type': 'click',
|
||||
'operator': 'onAny',
|
||||
'sessionsCount': 1292,
|
||||
'count': 1292,
|
||||
'dropPct': 18,
|
||||
'usersCount': 450,
|
||||
'dropDueToIssues': 294
|
||||
}
|
||||
],
|
||||
totalDropDueToIssues: 294
|
||||
// totalDropDueToIssues: 294
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,67 +1,27 @@
|
|||
import {ArrowRight} from 'lucide-react';
|
||||
import React from 'react';
|
||||
|
||||
import ExCard from './ExCard';
|
||||
import {FUNNEL} from "App/constants/card";
|
||||
import FunnelWidget from "Components/Funnels/FunnelWidget/FunnelWidget";
|
||||
import Funnel from "App/mstore/types/funnel";
|
||||
import FunnelWidget from 'Components/Funnels/FunnelWidget/FunnelWidget';
|
||||
import Funnel from 'App/mstore/types/funnel';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
type: string;
|
||||
onCard: (card: string) => void;
|
||||
data?: any,
|
||||
title: string;
|
||||
type: string;
|
||||
onCard: (card: string) => void;
|
||||
data?: any,
|
||||
}
|
||||
|
||||
function ExampleFunnel(props: Props) {
|
||||
// const steps = [
|
||||
// {
|
||||
// progress: 500,
|
||||
// },
|
||||
// {
|
||||
// progress: 250,
|
||||
// },
|
||||
// {
|
||||
// progress: 100,
|
||||
// },
|
||||
// ];
|
||||
const _data = {
|
||||
funnel: new Funnel().fromJSON(props.data)
|
||||
}
|
||||
return (
|
||||
<ExCard
|
||||
{...props}
|
||||
>
|
||||
<FunnelWidget data={_data} isWidget={true}/>
|
||||
{/*<>*/}
|
||||
{/* {steps.map((step, index) => (*/}
|
||||
{/* <div key={index}>*/}
|
||||
{/* <div>Step {index + 1}</div>*/}
|
||||
{/* <div className={'rounded flex items-center w-full overflow-hidden'}>*/}
|
||||
{/* <div*/}
|
||||
{/* style={{*/}
|
||||
{/* backgroundColor: step.progress <= 100 ? '#394EFF' : '#E2E4F6',*/}
|
||||
{/* width: `${(step.progress / 500) * 100}%`,*/}
|
||||
{/* height: 30,*/}
|
||||
{/* }}*/}
|
||||
{/* />*/}
|
||||
{/* <div*/}
|
||||
{/* style={{*/}
|
||||
{/* width: `${((500 - step.progress) / 500) * 100}%`,*/}
|
||||
{/* height: 30,*/}
|
||||
{/* background: '#FFF1F0',*/}
|
||||
{/* }}*/}
|
||||
{/* />*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className={'flex items-center gap-2'}>*/}
|
||||
{/* <ArrowRight size={14} color={'#8C8C8C'} strokeWidth={1}/>*/}
|
||||
{/* <div className={'text-disabled-text'}>{step.progress}</div>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* ))}*/}
|
||||
{/*</>*/}
|
||||
</ExCard>
|
||||
);
|
||||
const _data = {
|
||||
funnel: new Funnel().fromJSON(props.data)
|
||||
};
|
||||
return (
|
||||
<ExCard
|
||||
{...props}
|
||||
>
|
||||
<FunnelWidget data={_data} isWidget={true} />
|
||||
</ExCard>
|
||||
);
|
||||
}
|
||||
|
||||
export default ExampleFunnel;
|
||||
|
|
|
|||
|
|
@ -10,10 +10,11 @@ interface Props {
|
|||
index?: number;
|
||||
focusStage?: (index: number, isFocused: boolean) => void;
|
||||
focusedFilter?: number | null;
|
||||
metricLabel?: string;
|
||||
}
|
||||
|
||||
function FunnelBar(props: Props) {
|
||||
const { filter, index, focusStage, focusedFilter } = props;
|
||||
const { filter, index, focusStage, focusedFilter, metricLabel = 'Sessions' } = props;
|
||||
|
||||
const isFocused = focusedFilter && index ? focusedFilter === index - 1 : false;
|
||||
return (
|
||||
|
|
@ -62,7 +63,7 @@ function FunnelBar(props: Props) {
|
|||
{/* @ts-ignore */}
|
||||
<div className="flex items-center">
|
||||
<Icon name="arrow-right-short" size="20" color="green" />
|
||||
<span className="mx-1">{filter.count} Sessions</span>
|
||||
<span className="mx-1">{filter.count} {metricLabel}</span>
|
||||
<span className="color-gray-medium text-sm">
|
||||
({filter.completedPercentage}%) Completed
|
||||
</span>
|
||||
|
|
@ -71,7 +72,7 @@ function FunnelBar(props: Props) {
|
|||
<Space className="items-center">
|
||||
<Icon name="caret-down-fill" color={filter.droppedCount > 0 ? 'red' : 'gray-light'} size={16} />
|
||||
<span
|
||||
className={'mx-1 ' + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>{filter.droppedCount} Sessions</span>
|
||||
className={'mx-1 ' + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>{filter.droppedCount} {metricLabel}</span>
|
||||
<span
|
||||
className={'text-sm ' + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>({filter.droppedPercentage}%) Dropped</span>
|
||||
</Space>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ interface Props {
|
|||
}
|
||||
function FunnelWidget(props: Props) {
|
||||
const [focusedFilter, setFocusedFilter] = React.useState<number | null>(null);
|
||||
const { isWidget = false, data } = props;
|
||||
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;
|
||||
|
|
@ -23,6 +23,7 @@ function FunnelWidget(props: Props) {
|
|||
const lastStage = funnel.stages[funnel.stages.length - 1];
|
||||
const remainingSteps = totalSteps - 2;
|
||||
const { hideModal } = useModal();
|
||||
const metricLabel = metric?.metricFormat == 'userCount' ? 'Users' : 'Sessions';
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
|
|
@ -69,6 +70,7 @@ function FunnelWidget(props: Props) {
|
|||
stage={filter}
|
||||
focusStage={focusStage}
|
||||
focusedFilter={focusedFilter}
|
||||
metricLabel={metricLabel}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
|
|
@ -125,13 +127,13 @@ export const EmptyStage = observer(({ total }: any) => {
|
|||
)
|
||||
})
|
||||
|
||||
export const Stage = observer(({ stage, index, isWidget, uxt, focusStage, focusedFilter }: any) => {
|
||||
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 index={index} filter={stage} focusStage={focusStage} focusedFilter={focusedFilter} /> : <UxTFunnelBar filter={stage} />}
|
||||
{!uxt ? <Funnelbar metricLabel={metricLabel} index={index} filter={stage} focusStage={focusStage} focusedFilter={focusedFilter} /> : <UxTFunnelBar filter={stage} />}
|
||||
{/*{!isWidget && !uxt && <BarActions bar={stage} />}*/}
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue