Rewrite FunnelChart as proper SVG funnel with curved sides
Replaces crude clip-path divs with SVG bezier paths matching the 21st.dev reference: smooth curved sides, background glow, divider lines, centered percentage pills, and labels on both sides. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Usman Baig
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useState, useMemo } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { cn, formatNumber } from '@ciphera-net/ui'
|
||||
|
||||
@@ -17,105 +17,160 @@ interface FunnelChartProps {
|
||||
export default function FunnelChart({ steps, className }: FunnelChartProps) {
|
||||
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
|
||||
|
||||
if (!steps.length) return null
|
||||
|
||||
const maxVisitors = steps[0].visitors
|
||||
const maxVisitors = steps[0]?.visitors ?? 0
|
||||
const n = steps.length
|
||||
|
||||
if (!n || maxVisitors === 0) return null
|
||||
|
||||
// SVG layout
|
||||
const W = 800
|
||||
const H = 400
|
||||
const cx = W / 2
|
||||
const maxHW = W * 0.28
|
||||
const minHW = 28
|
||||
const segH = H / n
|
||||
const k = 0.5 // bezier tension
|
||||
|
||||
// n+1 boundary points: top of each step + bottom of last
|
||||
const bounds = useMemo(() => {
|
||||
return Array.from({ length: n + 1 }, (_, i) => {
|
||||
const y = i * segH
|
||||
const visitors = i < n ? steps[i].visitors : steps[n - 1].visitors * 0.5
|
||||
const hw = Math.max(minHW, (visitors / maxVisitors) * maxHW)
|
||||
return { y, hw }
|
||||
})
|
||||
}, [steps, n, maxVisitors, segH])
|
||||
|
||||
// Curved path for one segment
|
||||
const segPath = (i: number) => {
|
||||
const t = bounds[i], b = bounds[i + 1]
|
||||
const dy = b.y - t.y
|
||||
return [
|
||||
`M${cx - t.hw},${t.y}`,
|
||||
`L${cx + t.hw},${t.y}`,
|
||||
`C${cx + t.hw},${t.y + dy * k} ${cx + b.hw},${b.y - dy * k} ${cx + b.hw},${b.y}`,
|
||||
`L${cx - b.hw},${b.y}`,
|
||||
`C${cx - b.hw},${b.y - dy * k} ${cx - t.hw},${t.y + dy * k} ${cx - t.hw},${t.y}`,
|
||||
'Z',
|
||||
].join(' ')
|
||||
}
|
||||
|
||||
// Full outline for background glow
|
||||
const glowPath = useMemo(() => {
|
||||
let d = `M${cx - bounds[0].hw},${bounds[0].y} L${cx + bounds[0].hw},${bounds[0].y}`
|
||||
for (let i = 0; i < n; i++) {
|
||||
const t = bounds[i], b = bounds[i + 1], dy = b.y - t.y
|
||||
d += ` C${cx + t.hw},${t.y + dy * k} ${cx + b.hw},${b.y - dy * k} ${cx + b.hw},${b.y}`
|
||||
}
|
||||
d += ` L${cx - bounds[n].hw},${bounds[n].y}`
|
||||
for (let i = n - 1; i >= 0; i--) {
|
||||
const t = bounds[i], b = bounds[i + 1], dy = b.y - t.y
|
||||
d += ` C${cx - b.hw},${b.y - dy * k} ${cx - t.hw},${t.y + dy * k} ${cx - t.hw},${t.y}`
|
||||
}
|
||||
return d + ' Z'
|
||||
}, [bounds, n])
|
||||
|
||||
return (
|
||||
<div className={cn('flex gap-6', className)}>
|
||||
{/* Left labels */}
|
||||
<div className="hidden md:flex flex-col w-40 shrink-0">
|
||||
{steps.map((step, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={cn(
|
||||
'flex-1 flex items-center justify-end transition-opacity duration-200',
|
||||
hoveredIndex !== null && hoveredIndex !== i && 'opacity-30',
|
||||
)}
|
||||
>
|
||||
<div className="text-right">
|
||||
<span className="text-[11px] font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
|
||||
Step {i + 1}
|
||||
</span>
|
||||
<p className="text-sm font-medium text-neutral-900 dark:text-white truncate max-w-[152px]">
|
||||
{step.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={cn('w-full', className)}>
|
||||
<svg
|
||||
viewBox={`0 0 ${W} ${H}`}
|
||||
className="w-full h-full font-sans"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
{/* Background glow */}
|
||||
<path d={glowPath} fill="rgba(253, 94, 15, 0.07)" />
|
||||
|
||||
{/* Funnel segments */}
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
{steps.map((step, i) => {
|
||||
const topPct = maxVisitors > 0
|
||||
? Math.max(30, (step.visitors / maxVisitors) * 100)
|
||||
: 100
|
||||
const bottomPct = steps[i + 1]
|
||||
? Math.max(30, (steps[i + 1].visitors / maxVisitors) * 100)
|
||||
: topPct * 0.7
|
||||
const topInset = (100 - topPct) / 2
|
||||
const bottomInset = (100 - bottomPct) / 2
|
||||
const opacity = Math.max(0.3, 1 - i * (0.55 / n))
|
||||
{/* Segments */}
|
||||
{steps.map((_, i) => {
|
||||
const opacity = Math.max(0.45, 1 - i * (0.45 / n))
|
||||
const isHovered = hoveredIndex === i
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
<motion.path
|
||||
key={i}
|
||||
className="flex-1 relative cursor-default"
|
||||
style={{
|
||||
backgroundColor: `rgba(253, 94, 15, ${isHovered ? Math.min(1, opacity + 0.15) : opacity})`,
|
||||
transition: 'background-color 0.2s',
|
||||
}}
|
||||
initial={{
|
||||
clipPath: 'polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%)',
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{
|
||||
clipPath: `polygon(${topInset}% 0%, ${100 - topInset}% 0%, ${100 - bottomInset}% 100%, ${bottomInset}% 100%)`,
|
||||
opacity: 1,
|
||||
}}
|
||||
transition={{ delay: i * 0.1, duration: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
d={segPath(i)}
|
||||
fill={`rgba(253, 94, 15, ${isHovered ? Math.min(1, opacity + 0.12) : opacity})`}
|
||||
style={{ transition: 'fill 0.2s' }}
|
||||
cursor="pointer"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: i * 0.08, duration: 0.5, ease: 'easeOut' }}
|
||||
onMouseEnter={() => setHoveredIndex(i)}
|
||||
onMouseLeave={() => setHoveredIndex(null)}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Right stats */}
|
||||
<div className="flex flex-col w-28 sm:w-32 shrink-0">
|
||||
{steps.map((step, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={cn(
|
||||
'flex-1 flex items-center transition-opacity duration-200',
|
||||
hoveredIndex !== null && hoveredIndex !== i && 'opacity-30',
|
||||
)}
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-brand-orange">
|
||||
{formatNumber(step.visitors)}
|
||||
</p>
|
||||
{i > 0 ? (
|
||||
<div className="flex items-center gap-1.5 text-[11px]">
|
||||
<span className="text-red-500 dark:text-red-400 font-medium">
|
||||
↓{Math.round(step.dropoff)}%
|
||||
</span>
|
||||
<span className="text-green-600 dark:text-green-400 font-medium">
|
||||
{Math.round(step.conversion)}%
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-[11px] text-neutral-400 dark:text-neutral-500">
|
||||
baseline
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Divider lines */}
|
||||
{bounds.slice(1, -1).map((b, i) => (
|
||||
<line
|
||||
key={`div-${i}`}
|
||||
x1={cx - b.hw}
|
||||
y1={b.y}
|
||||
x2={cx + b.hw}
|
||||
y2={b.y}
|
||||
stroke="rgba(255,255,255,0.3)"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Labels */}
|
||||
{steps.map((step, i) => {
|
||||
const midY = bounds[i].y + segH / 2
|
||||
const dimmed = hoveredIndex !== null && hoveredIndex !== i
|
||||
return (
|
||||
<g
|
||||
key={`lbl-${i}`}
|
||||
style={{ opacity: dimmed ? 0.3 : 1, transition: 'opacity 0.2s' }}
|
||||
>
|
||||
{/* Visitor count — left */}
|
||||
<text
|
||||
x={cx - bounds[i].hw - 20}
|
||||
y={midY}
|
||||
textAnchor="end"
|
||||
dominantBaseline="central"
|
||||
fill="#FD5E0F"
|
||||
fontSize="16"
|
||||
fontWeight="700"
|
||||
>
|
||||
{formatNumber(step.visitors)}
|
||||
</text>
|
||||
|
||||
{/* Percentage pill — center */}
|
||||
<rect
|
||||
x={cx - 23}
|
||||
y={midY - 12}
|
||||
width={46}
|
||||
height={24}
|
||||
rx={12}
|
||||
fill="rgba(255,255,255,0.2)"
|
||||
/>
|
||||
<text
|
||||
x={cx}
|
||||
y={midY}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
fill="white"
|
||||
fontSize="12"
|
||||
fontWeight="600"
|
||||
>
|
||||
{Math.round(step.conversion)}%
|
||||
</text>
|
||||
|
||||
{/* Step name — right */}
|
||||
<text
|
||||
x={cx + bounds[i].hw + 20}
|
||||
y={midY}
|
||||
textAnchor="start"
|
||||
dominantBaseline="central"
|
||||
className="fill-neutral-500 dark:fill-neutral-400"
|
||||
fontSize="14"
|
||||
>
|
||||
{step.name}
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user