32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import FunnelGraphSmall from '../FunnelGraphSmall'
|
|
|
|
function FunnelItem({ funnel, onClick = () => null }) {
|
|
return (
|
|
<div className="w-full flex items-center p-4 bg-white rounded border cursor-pointer" onClick={onClick}>
|
|
<div className="mr-4">
|
|
<FunnelGraphSmall data={funnel.stages} />
|
|
</div>
|
|
|
|
<div className="mr-auto">
|
|
<div className="text-xl mb-2">{funnel.name}</div>
|
|
<div className="flex items-center text-sm">
|
|
<div className="mr-3"><span className="font-medium">{funnel.stepsCount}</span> Steps</div>
|
|
<div><span className="font-medium">{funnel.sessionsCount}</span> Sessions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center text-sm px-6">
|
|
<div className="text-xl mb-2 color-red">{funnel.criticalIssuesCount}</div>
|
|
<div>Critical Issues</div>
|
|
</div>
|
|
|
|
<div className="text-center text-sm px-6">
|
|
<div className="text-xl mb-2">{funnel.missedConversions}%</div>
|
|
<div>Missed Conversions</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FunnelItem
|