FunnelChart
단계별 규모 비교. 내부 분석 전용.
- 라이브러리 전용
개요
미리보기
가입 경로 단계별 도착
Internal analytics only · Sep 21 – Oct 20
Show data
| Step | Reached | Of previous step |
|---|---|---|
| Landing | 4,820 | — |
| Sign-up | 1,310 | 27% |
| First connection | 802 | 61% |
| First aha | 433 | 54% |
예시
상태
준비됨
가입 경로 단계별 도착
Internal analytics only · Sep 21 – Oct 20
Reached each step: Landing 4,820, Sign-up 1,310, First connection 802, and First aha 433. Show data
가입 경로 단계별 도착 Step Reached Of previous step Landing 4,820 — Sign-up 1,310 27% First connection 802 61% First aha 433 54% 일부만 읽음
가입 경로 단계별 도착
Internal analytics only · Sep 21 – Oct 20
Reached each step: Landing 4,820, Sign-up 1,310, First connection 802, and First aha 433.Some dates couldn’t be scanned. What we got is kept. Show data
가입 경로 단계별 도착 Step Reached Of previous step Landing 4,820 — Sign-up 1,310 27% First connection 802 61% First aha 433 54% 아직 읽지 않음
가입 경로 단계별 도착
Connect a source to see this.
불러오는 중
가입 경로 단계별 도착
비어 있음
가입 경로 단계별 도착
Internal analytics only · Sep 21 – Oct 20
Nothing matching in the records scanned for these dates.
오류
가입 경로 단계별 도착
Couldn’t load this right now.
오래됨
가입 경로 단계별 도착
Internal analytics only · Sep 21 – Oct 20 · Last scanned · Oct 20
Reached each step: Landing 4,820, Sign-up 1,310, First connection 802, and First aha 433. Show data
가입 경로 단계별 도착 Step Reached Of previous step Landing 4,820 — Sign-up 1,310 27% First connection 802 61% First aha 433 54% 표 열림
가입 경로 단계별 도착
Internal analytics only · Sep 21 – Oct 20
Reached each step: Landing 4,820, Sign-up 1,310, First connection 802, and First aha 433. Show data
가입 경로 단계별 도착 Step Reached Of previous step Landing 4,820 — Sign-up 1,310 27% First connection 802 61% First aha 433 54%
쓰임 예
탐색 모드
가입 경로 단계별 도착
Internal analytics only · Sep 21 – Oct 20
Reached each step: Landing 4,820, Sign-up 1,310, First connection 802, and First aha 433. Show data
가입 경로 단계별 도착 Step Reached Of previous step Landing 4,820 — Sign-up 1,310 27% First connection 802 61% First aha 433 54%
이렇게 · 이렇게 하지 않기
- 이렇게 질문(내부): “가입 경로의 각 단계에 몇 명이 도착했나?” 팀의 출시 지표용이다.
- 이렇게 가로 막대로 길이를 정확히 비교한다. 사다리꼴 깔때기 모양은 쓰지 않는다.
- 이렇게 하지 않기 사용자 화면에는 쓰지 않는다. 사용자 기록을 “완료까지의 단계”로 그리지 않는다.
- 이렇게 하지 않기 읽지 않은 구간을 0으로 그리거나 선으로 잇지 않는다. 빗금 + “아직 읽지 않음”으로 그린다.
- 이렇게 하지 않기 막대가 자라거나 선이 그려지는 등장 애니메이션을 쓰지 않는다. 처음 표시는 불투명도만.
- 이렇게 하지 않기 색만으로 계열을 나누지 않는다. 직접 라벨이 먼저, 표식 모양·무늬가 다음, 색은 보강이다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | 가입 경로 단계별 도착 | 이 차트가 답하는 질문(명사구). figure 이름이자 표 caption. “업무량”, “생산성”, “활동”, “성과”는 쓰지 않는다. |
stages | readonly { label: string; value: number }[] | — | 경로 순서의 단계. 그림에는 단계 값만, 이전 단계 대비 비율은 표에만. |
range? | { from: string; to: string } | — | 수치가 다루는 기간. 범위 줄에 “내부 분석 전용”과 함께. |
state? | 'ready' | DataState | ready | 데이터 상태(contracts §4). not-collected·error·loading·empty·no-results는 그림 대신 상태 문장을, partial·stale은 그림 위에 상태 줄을 보인다. |
lastReadAt? | string (ISO) | | 마지막으로 읽은 시각. state가 stale이면 범위 줄 끝에 “마지막 읽음 · …”으로 쓴다. 흐리게 처리하지 않는다. |
showTable? | boolean | false | “데이터 보기” 표를 처음부터 연다. 표는 차트와 같은 값·같은 순서이고 읽지 않은 구간은 “아직 읽지 않음” 행이다. |
explore? | boolean | false | 탐색 모드. 그림 영역이 Tab 정지 1개가 되고 ←→ 점 이동, ↑↓ 계열 이동, Home/End, Esc. 꺼져 있으면 표가 키보드 경로다. |
onConnect? | () => void | — | not-collected 상태의 “출처 연결” 버튼. 없으면 문장만 보인다. |
onRetry? | () => void | — | error 상태의 “다시 시도”. |
| 그 밖의 속성 | — | — | 네이티브 속성은 받지 않는다. 배치는 부모가, 모양은 토큰이 정한다. |
접근성
키보드: 기본: 그림은 Tab 정지점이 아니고 “데이터 보기” 표가 키보드 경로다. explore: Tab 1번으로 들어가 ←→ 점, ↑↓ 계열, Home/End 처음·끝, Esc 나가기.
- <figure> + <figcaption>. 제목(질문)이 figure 이름, figcaption은 템플릿으로 만든 사실 문장 하나다.
- SVG는 aria-hidden. 모든 값은 “데이터 보기” 표에 있다. 폭이 288px보다 좁으면 그림 대신 표를 바로 보인다.
- 탐색 모드의 점은 44×44 히트 영역을 가지며 이름은 “날짜, 출처, 값, 신뢰 상태” 순서다. 점 이동을 라이브 리전으로 알리지 않는다.
- forced-colors에서 계열은 CanvasText 표식 모양·무늬와 직접 라벨로 남는다.