FunnelChart

한눈에#

FunnelChart는 전환·파이프라인 단계의 감소를 위에서 아래로 좁아지는 사다리꼴 밴드로 보여줍니다. 각 단계의 폭은 도달 수에 비례하고, 값은 밴드 안에 크게, 단계마다 직전 대비 전환율을 함께 표기합니다 — 최대 이탈 구간을 강조하고 마지막 단계는 성공 그린으로 마무리해, 어느 단계에서 이탈이 큰지 한눈에 드러납니다.

어떻게 동작하나#

사다리꼴 레이아웃은 순수 코어 computeFunnel이 계산합니다(ADR-018, Flutter wiz_charts 포팅 단위).

• 폭 = 값 / 최대값 — 가장 큰 단계가 풀 폭, 나머지는 비례 축소(중앙 정렬).
• 연속 실루엣 — 각 단계 사다리꼴의 하단 폭이 다음 단계 값을 따라가 깔때기처럼 매끄럽게 이어집니다(마지막 단계는 평평).
• 모던 뎁스 — 단일 블루 톤 그라데이션(위 밝음 → 아래 짙음)과 부드러운 그림자로 "떠 있는 트레이" 입체감. 값은 넓은 밴드 안에 흰 글자로 크게, 좁은 단계는 좌측 레일로 폴백. 색은 장식이고 이탈 크기는 폭·전환율이 전달합니다.
• 의미 신호 둘 — 최대 이탈 구간을 amber로 강조하고, 마지막 단계는 성공 그린으로 마무리(단, 마지막이 최대 이탈이면 그린을 보류해 충돌 회피). 라이트·다크 모두 또렷합니다.

사용#

const stages = [
  { label: '방문', value: 12400 },
  { label: '상품 조회', value: 7200 },
  { label: '장바구니', value: 3100 },
  { label: '구매 완료', value: 920 },
];

<FunnelChart stages={stages} label="구매 전환 퍼널" />;

width(기본 360)·stageHeight(기본 56)로 크기를 조정합니다. 단계는 위에서 아래로 내림차순이 일반적이지만 강제하지 않습니다.

접근성#

면적 비교는 어려우므로(SC 1.4.1), 단계×값×전환율 표가 정본입니다 — sr-only <table>로 노출하고 SVG는 aria-hidden입니다. 표에는 값, 첫 단계 대비 전환율, 직전 단계 대비 전환율을 담습니다.

토큰#