Sankey
흐름의 양을 띠로 연결. 내부 분석 전용.
- 라이브러리 전용
개요
미리보기
수집 → 기록 → 경험 후보 연결
Internal analytics only
Show data
| From | To | Value |
|---|---|---|
| Calendar | Records | 280 |
| Calendar | Not kept | 32 |
| Records | 610 | |
| Not kept | 594 | |
| Docs | Records | 140 |
| Docs | Not kept | 8 |
| Records | Candidates | 420 |
| Records | No candidate | 610 |
예시
상태
준비됨
수집 → 기록 → 경험 후보 연결
Internal analytics only
8 flows. Values are in the table. Show data
수집 → 기록 → 경험 후보 연결 From To Value Calendar Records 280 Calendar Not kept 32 Mail Records 610 Mail Not kept 594 Docs Records 140 Docs Not kept 8 Records Candidates 420 Records No candidate 610 일부만 읽음
수집 → 기록 → 경험 후보 연결
Internal analytics only
8 flows. Values are in the table.Some dates couldn’t be scanned. What we got is kept. Show data
수집 → 기록 → 경험 후보 연결 From To Value Calendar Records 280 Calendar Not kept 32 Mail Records 610 Mail Not kept 594 Docs Records 140 Docs Not kept 8 Records Candidates 420 Records No candidate 610 아직 읽지 않음
수집 → 기록 → 경험 후보 연결
Connect a source to see this.
불러오는 중
수집 → 기록 → 경험 후보 연결
비어 있음
수집 → 기록 → 경험 후보 연결
Internal analytics only
Nothing matching in the records scanned for these dates.
오류
수집 → 기록 → 경험 후보 연결
Couldn’t load this right now.
오래됨
수집 → 기록 → 경험 후보 연결
Internal analytics only · Last scanned · Oct 20
8 flows. Values are in the table. Show data
수집 → 기록 → 경험 후보 연결 From To Value Calendar Records 280 Calendar Not kept 32 Mail Records 610 Mail Not kept 594 Docs Records 140 Docs Not kept 8 Records Candidates 420 Records No candidate 610 표 열림
수집 → 기록 → 경험 후보 연결
Internal analytics only
8 flows. Values are in the table. Show data
수집 → 기록 → 경험 후보 연결 From To Value Calendar Records 280 Calendar Not kept 32 Mail Records 610 Mail Not kept 594 Docs Records 140 Docs Not kept 8 Records Candidates 420 Records No candidate 610
쓰임 예
탐색 모드
수집 → 기록 → 경험 후보 연결
Internal analytics only
8 flows. Values are in the table. Show data
수집 → 기록 → 경험 후보 연결 From To Value Calendar Records 280 Calendar Not kept 32 Mail Records 610 Mail Not kept 594 Docs Records 140 Docs Not kept 8 Records Candidates 420 Records No candidate 610
이렇게 · 이렇게 하지 않기
- 이렇게 질문(내부): “수집 → 기록 → 경험 후보 연결 중 어디서 자료가 빠지나?” 회상 품질 점검용이다.
- 이렇게 하지 않기 사용자 화면에는 쓰지 않는다. 사용자 기록이 “성과”나 “액션”으로 흘러가는 그림을 만들지 않는다.
- 이렇게 하지 않기 읽지 않은 구간을 0으로 그리거나 선으로 잇지 않는다. 빗금 + “아직 읽지 않음”으로 그린다.
- 이렇게 하지 않기 막대가 자라거나 선이 그려지는 등장 애니메이션을 쓰지 않는다. 처음 표시는 불투명도만.
- 이렇게 하지 않기 색만으로 계열을 나누지 않는다. 직접 라벨이 먼저, 표식 모양·무늬가 다음, 색은 보강이다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | 수집 → 기록 → 경험 후보 연결 | 이 차트가 답하는 질문(명사구). figure 이름이자 표 caption. “업무량”, “생산성”, “활동”, “성과”는 쓰지 않는다. |
nodes | readonly { id: string; label: string; kind?: SourceKind }[] | — | 노드는 넣은 순서대로 쌓고 크기순으로 정렬하지 않는다. kind가 노드와 나가는 띠의 색이다. |
links | readonly { source: string; target: string; value: number }[] | — | 비순환 흐름. 표가 같은 값을 갖는다(필수). |
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 표식 모양·무늬와 직접 라벨로 남는다.