DonutChart
출처별로 읽은 기록의 구성을 고리로.
- 라이브러리 전용
개요
미리보기
보관된 기록의 출처
Show data
| Source | Count | Share |
|---|---|---|
| Calendar | 312 | 19% |
| 1,204 | 72% | |
| Documents | 148 | 9% |
예시
상태
준비됨
보관된 기록의 출처
Stored records: Calendar 312, Mail 1,204, and Documents 148. Show data
보관된 기록의 출처 Source Count Share Calendar 312 19% Mail 1,204 72% Documents 148 9% 일부만 읽음
보관된 기록의 출처
Stored records: Mail 1,204 and Documents 148.Calendar · Couldn’t scan Show data
보관된 기록의 출처 Source Count Share Calendar Couldn’t scan Mail 1,204 89% Documents 148 11% 아직 읽지 않음
보관된 기록의 출처
Connect a source to see this.
불러오는 중
보관된 기록의 출처
비어 있음
보관된 기록의 출처
Nothing matching in the records scanned for these dates.
오류
보관된 기록의 출처
Couldn’t load this right now.
오래됨
보관된 기록의 출처
Last scanned · Oct 20
Stored records: Calendar 312, Mail 1,204, and Documents 148. Show data
보관된 기록의 출처 Source Count Share Calendar 312 19% Mail 1,204 72% Documents 148 9% 파이(PieChart)
보관된 기록의 출처
As of Oct 20
Stored records: Calendar 312, Mail 1,204, and Documents 148. Show data
보관된 기록의 출처 Source Count Share Calendar 312 19% Mail 1,204 72% Documents 148 9% 표 열림
보관된 기록의 출처
Stored records: Calendar 312, Mail 1,204, and Documents 148. Show data
보관된 기록의 출처 Source Count Share Calendar 312 19% Mail 1,204 72% Documents 148 9%
쓰임 예
탐색 모드
보관된 기록의 출처
Stored records: Calendar 312, Mail 1,204, and Documents 148. Show data
보관된 기록의 출처 Source Count Share Calendar 312 19% Mail 1,204 72% Documents 148 9%
이렇게 · 이렇게 하지 않기
- 이렇게 질문: “지금 보관된 기록은 어느 출처에서 왔나?” 연결 끊기·삭제 결정 전에 확인하는 화면용이다.
- 이렇게 조각마다 바깥에 “이름 · 값” 직접 라벨을 단다.
- 이렇게 하지 않기 가운데 숫자를 점수처럼 꾸미지 않는다. 합계 대신 기준일만 쓴다.
- 이렇게 하지 않기 시간 사용 비율을 “생산성”으로 보여주지 않는다. 조각은 5개를 넘지 않는다.
- 이렇게 하지 않기 생산성 점수, 활동량 순위, 사람 간 비교, streak, 목표 달성률을 그리지 않는다.
- 이렇게 하지 않기 읽지 않은 구간을 0으로 그리거나 선으로 잇지 않는다. 빗금 + “아직 읽지 않음”으로 그린다.
- 이렇게 하지 않기 막대가 자라거나 선이 그려지는 등장 애니메이션을 쓰지 않는다. 처음 표시는 불투명도만.
- 이렇게 하지 않기 색만으로 계열을 나누지 않는다. 직접 라벨이 먼저, 표식 모양·무늬가 다음, 색은 보강이다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | 보관된 기록의 출처 | 이 차트가 답하는 질문(명사구). figure 이름이자 표 caption. “업무량”, “생산성”, “활동”, “성과”는 쓰지 않는다. |
slices | readonly { kind: SourceKind; label?: string; count: number | null; missing? }[] | — | 조각 ≤4 + 그 외. 12시부터 시계 방향, 고정 출처 순서. count null인 출처는 조각이 아니라 아래 상태 줄(“캘린더 · 읽지 못함”)로 간다. 그릴 조각이 1개면 도넛 대신 문장. |
variant? | 'donut' | 'pie' | donut | pie는 PieChart 페이지의 형태다. 구멍이 없어 가운데 기준일을 쓸 수 없다. 반원(게이지)은 없다. |
asOf? | string (YYYY-MM-DD) | | 구성을 센 날짜. 가운데와 범위 줄에 “10월 20일 기준”. 가운데에 합계를 쓰지 않는다. |
formatValue? | (value: number) => string | — | 개수 형식(“1,204개”). 비율(%)은 표에서만 보인다. |
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 표식 모양·무늬와 직접 라벨로 남는다.