CollectionCoverage
읽음·아직 읽지 않음·실패 구간을 보여주는 기간 막대.
- 출시 화면에서 사용
개요
미리보기
Details
- Scanned · Sep 21–Oct 20
예시
상태
30일 전부 읽음
Scanned Sep 21 – Oct 20 Details
- Scanned · Sep 21–Oct 20
실패 구간 + 빈 구간
Scanned Sep 24 – Oct 20 · Oct 3 – Oct 5 couldn’t be scanned Details
- Not scanned yet · Sep 21–Sep 23
- Scanned · Sep 24–Oct 2
- Couldn’t scan · Oct 3–Oct 5
- Scanned · Oct 6–Oct 20
90일(앞은 아직 읽지 않음)
Scanned Sep 21 – Oct 20 Details
- Not scanned yet · Jul 23–Sep 20
- Scanned · Sep 21–Oct 20
아직 읽지 않음
Connect a source to see this. 불러오는 중
Scanned dates 오류
Couldn’t load this right now.
쓰임 예
365일
Scanned Sep 24 – Oct 20 · Oct 3 – Oct 5 couldn’t be scanned Details
- Not scanned yet · Oct 21, 2025–Sep 23
- Scanned · Sep 24–Oct 2
- Couldn’t scan · Oct 3–Oct 5
- Scanned · Oct 6–Oct 20
이렇게 · 이렇게 하지 않기
- 이렇게 세 상태만 쓰고 모양으로 나눈다(charts-spec §3.4, CoverageCalendar와 같음): 읽음 = 채움(보조 잉크), 아직 읽지 않음 = 45° 빗금, 읽지 못함 = 점선 경고 테두리 + 아이콘.
- 이렇게 막대 아래에 기간을 문장으로 쓴다(“9월 21일–10월 20일 읽음”). 빈 구간과 실패 구간도 문장으로 말한다.
- 이렇게 하지 않기 강도나 개수로 칠하지 않는다. 퍼센트를 쓰지 않는다. 날짜 격자(기여 그래프)로 만들지 않는다. 읽지 않은 기간을 “기록 없음”처럼 보이게 하지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
segments | readonly { start: string; end: string; state: 'scanned' | 'not-collected' | 'failed' }[] | — | 구간(YYYY-MM-DD, 양끝 포함). 어떤 구간도 덮지 않은 날은 “아직 읽지 않음”으로 그린다(0이 아님). 겹치면 실패가 이긴다(logic/coverage.ts). |
end | string (YYYY-MM-DD) | 2026-10-20 | 기간의 마지막 날. |
range? | 30 | 90 | 365 | 30 | 기간 길이(일). |
state? | DataState | "ready" | ready | 데이터 상태(README §4). not-collected면 막대 없이 “출처를 연결하면 여기에 보여요.” |
| 그 밖의 속성 | — | — | <figure> 속성(id, aria-*)이 전달된다. |
접근성
키보드: “자세히”(<details>) Enter·Space로 구간 목록을 연다.
- 막대 SVG는 aria-hidden. 의미는 figcaption 문장과 “자세히” 목록이 전한다(VisuallyHidden이 아니라 보이는 목록).
- 그리기 클래스와 패턴은 chart-kit 공용(Yusuf)이라 forced-colors에서 채움·빗금·점선이 CanvasText로 남는다.