change(ui): funnel bar text color
This commit is contained in:
Shekar Siri
parent
0d8dcc1eca
commit
90c6b3b536
1 changed files with 121 additions and 119 deletions
|
|
@ -1,146 +1,148 @@
|
|||
import { durationFormatted } from 'App/date';
|
||||
import {durationFormatted} from 'App/date';
|
||||
import React from 'react';
|
||||
import FunnelStepText from './FunnelStepText';
|
||||
import { Icon } from 'UI';
|
||||
import {Icon} from 'UI';
|
||||
import {Space} from "antd";
|
||||
|
||||
interface Props {
|
||||
filter: any;
|
||||
index?: number;
|
||||
focusStage?: (index: number, isFocused: boolean) => void
|
||||
focusedFilter?: number | null
|
||||
filter: any;
|
||||
index?: number;
|
||||
focusStage?: (index: number, isFocused: boolean) => void
|
||||
focusedFilter?: number | null
|
||||
}
|
||||
|
||||
function FunnelBar(props: Props) {
|
||||
const { filter, index, focusStage, focusedFilter } = props;
|
||||
const {filter, index, focusStage, focusedFilter} = props;
|
||||
|
||||
const isFocused = focusedFilter && index ? focusedFilter === index - 1 : false;
|
||||
return (
|
||||
<div className="w-full mb-4">
|
||||
<FunnelStepText filter={filter} />
|
||||
<div
|
||||
style={{
|
||||
height: '25px',
|
||||
width: '100%',
|
||||
backgroundColor: '#f5f5f5',
|
||||
position: 'relative',
|
||||
borderRadius: '3px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={{
|
||||
width: `${filter.completedPercentageTotal}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: '#394EFF',
|
||||
}}
|
||||
>
|
||||
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
|
||||
{filter.completedPercentageTotal}%
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: `${100.1 - filter.completedPercentageTotal}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: isFocused ? 'rgba(204, 0, 0, 0.3)' : '#f5f5f5',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => focusStage?.(index! - 1, filter.isActive)}
|
||||
className={'hover:border border-red-lightest'}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
{/* @ts-ignore */}
|
||||
<div className="flex items-center">
|
||||
<Icon name="arrow-right-short" size="20" color="green" />
|
||||
<span className="mx-1 font-medium">{filter.sessionsCount} Sessions</span>
|
||||
<span className="color-gray-medium text-sm">
|
||||
const isFocused = focusedFilter && index ? focusedFilter === index - 1 : false;
|
||||
return (
|
||||
<div className="w-full mb-4">
|
||||
<FunnelStepText filter={filter}/>
|
||||
<div
|
||||
style={{
|
||||
height: '25px',
|
||||
width: '100%',
|
||||
backgroundColor: '#f5f5f5',
|
||||
position: 'relative',
|
||||
borderRadius: '3px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={{
|
||||
width: `${filter.completedPercentageTotal}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: '#394EFF',
|
||||
}}
|
||||
>
|
||||
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
|
||||
{filter.completedPercentageTotal}%
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: `${100.1 - filter.completedPercentageTotal}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: isFocused ? 'rgba(204, 0, 0, 0.3)' : '#f5f5f5',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => focusStage?.(index! - 1, filter.isActive)}
|
||||
className={'hover:border border-red-lightest'}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
{/* @ts-ignore */}
|
||||
<div className="flex items-center">
|
||||
<Icon name="arrow-right-short" size="20" color="green"/>
|
||||
<span className="mx-1 font-medium">{filter.sessionsCount} Sessions</span>
|
||||
<span className="color-gray-medium text-sm">
|
||||
({filter.completedPercentage}%) Completed
|
||||
</span>
|
||||
</div>
|
||||
<Space className="items-center">
|
||||
<Icon name="caret-down-fill" color={filter.droppedCount > 0 ? "red" : "gray-light"} size={16}/>
|
||||
<span
|
||||
className={"font-medium mx-1 " + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>{filter.droppedCount} Sessions</span>
|
||||
<span
|
||||
className={"text-sm " + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>({filter.droppedPercentage}%) Dropped</span>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
{/* @ts-ignore */}
|
||||
<div className="flex items-center">
|
||||
<Icon name="caret-down-fill" color="red" size={16} />
|
||||
<span className="font-medium mx-1 color-red">{filter.droppedCount} Sessions</span>
|
||||
<span className="text-sm color-red">({filter.droppedPercentage}%) Dropped</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
export function UxTFunnelBar(props: Props) {
|
||||
const { filter } = props;
|
||||
const {filter} = props;
|
||||
|
||||
return (
|
||||
<div className="w-full mb-4">
|
||||
<div className={'font-medium'}>{filter.title}</div>
|
||||
<div
|
||||
style={{
|
||||
height: '25px',
|
||||
width: '100%',
|
||||
backgroundColor: '#f5f5f5',
|
||||
position: 'relative',
|
||||
borderRadius: '3px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={{
|
||||
width: `${(filter.completed/(filter.completed+filter.skipped))*100}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: '#00b5ad',
|
||||
}}
|
||||
>
|
||||
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
|
||||
{((filter.completed/(filter.completed+filter.skipped))*100).toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
{/* @ts-ignore */}
|
||||
<div className={'flex items-center gap-4'}>
|
||||
<div className="flex items-center">
|
||||
<Icon name="arrow-right-short" size="20" color="green" />
|
||||
<span className="mx-1 font-medium">{filter.completed}</span><span>completed this step</span>
|
||||
</div>
|
||||
<div className={'flex items-center'}>
|
||||
<Icon name="clock" size="16" />
|
||||
<span className="mx-1 font-medium">
|
||||
return (
|
||||
<div className="w-full mb-4">
|
||||
<div className={'font-medium'}>{filter.title}</div>
|
||||
<div
|
||||
style={{
|
||||
height: '25px',
|
||||
width: '100%',
|
||||
backgroundColor: '#f5f5f5',
|
||||
position: 'relative',
|
||||
borderRadius: '3px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={{
|
||||
width: `${(filter.completed / (filter.completed + filter.skipped)) * 100}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: '#00b5ad',
|
||||
}}
|
||||
>
|
||||
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
|
||||
{((filter.completed / (filter.completed + filter.skipped)) * 100).toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
{/* @ts-ignore */}
|
||||
<div className={'flex items-center gap-4'}>
|
||||
<div className="flex items-center">
|
||||
<Icon name="arrow-right-short" size="20" color="green"/>
|
||||
<span className="mx-1 font-medium">{filter.completed}</span><span>completed this step</span>
|
||||
</div>
|
||||
<div className={'flex items-center'}>
|
||||
<Icon name="clock" size="16"/>
|
||||
<span className="mx-1 font-medium">
|
||||
{durationFormatted(filter.avgCompletionTime)}
|
||||
</span>
|
||||
<span>
|
||||
<span>
|
||||
Avg. completion time
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* @ts-ignore */}
|
||||
<div className="flex items-center">
|
||||
<Icon name="caret-down-fill" color="red" size={16}/>
|
||||
<span className="font-medium mx-1">{filter.skipped}</span><span> skipped</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* @ts-ignore */}
|
||||
<div className="flex items-center">
|
||||
<Icon name="caret-down-fill" color="red" size={16} />
|
||||
<span className="font-medium mx-1">{filter.skipped}</span><span> skipped</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
export default FunnelBar;
|
||||
|
||||
const calculatePercentage = (completed: number, dropped: number) => {
|
||||
const total = completed + dropped;
|
||||
if (dropped === 0) return 100;
|
||||
if (total === 0) return 0;
|
||||
const total = completed + dropped;
|
||||
if (dropped === 0) return 100;
|
||||
if (total === 0) return 0;
|
||||
|
||||
return Math.round((completed / dropped) * 100);
|
||||
return Math.round((completed / dropped) * 100);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue