import { durationFormatted } from 'App/date'; import React from 'react'; import FunnelStepText from './FunnelStepText'; import { Icon } from 'UI'; interface Props { filter: any; } function FunnelBar(props: Props) { const { filter } = props; return (
{filter.completedPercentageTotal}%
{/* @ts-ignore */}
{filter.sessionsCount} Sessions ({filter.completedPercentage}%) Completed
{/* @ts-ignore */}
{filter.droppedCount} Sessions ({filter.droppedPercentage}%) Dropped
); } export function UxTFunnelBar(props: Props) { const { filter } = props; return (
{filter.title}
{(filter.completed/(filter.completed+filter.skipped))*100}%
{/* @ts-ignore */}
{filter.completed} completed this step
{durationFormatted(filter.avgCompletionTime)} Avg. completion time
{/* @ts-ignore */}
{filter.skipped} skipped
); } export default FunnelBar; const calculatePercentage = (completed: number, dropped: number) => { const total = completed + dropped; if (dropped === 0) return 100; if (total === 0) return 0; return Math.round((completed / dropped) * 100); };