CoverageCalendar
날짜별 읽음·아직 읽지 않음·실패 3상태 격자(이전 Heatmap).
- 라이브러리 전용
개요
미리보기
읽은 날짜
Sep 21 – Oct 20
- Scanned
- Has records
Show data
| Dates | Status |
|---|---|
| Sep 21 – Oct 20 | Scanned |
예시
상태
준비됨
읽은 날짜
Sep 21 – Oct 20
- Scanned
- Has records
Scanned Sep 21 – Oct 20 Show data
읽은 날짜 Dates Status Sep 21 – Oct 20 Scanned 일부만 읽음
읽은 날짜
Sep 21 – Oct 20
- Scanned
- Not scanned yet
- Couldn’t scan
- Has records
Of Sep 21 – Oct 20, scanned: Sep 24 – Oct 2 and Oct 6 – Oct 20. Not scanned yet: Sep 21 – Sep 23. Couldn’t scan: Oct 3 – Oct 5.Some dates couldn’t be scanned. What we got is kept. Show data
읽은 날짜 Dates Status Sep 21 – Sep 23 Not scanned yet Sep 24 – Oct 2 Scanned Oct 3 – Oct 5 Couldn’t scan Oct 6 – Oct 20 Scanned 아직 읽지 않음
읽은 날짜
Connect a source to see this.
불러오는 중
읽은 날짜
비어 있음
읽은 날짜
Sep 21 – Oct 20
Nothing matching in the records scanned for these dates.
오류
읽은 날짜
Couldn’t load this right now.
오래됨
읽은 날짜
Sep 21 – Oct 20 · Last scanned · Oct 20
- Scanned
- Has records
Scanned Sep 21 – Oct 20 Show data
읽은 날짜 Dates Status Sep 21 – Oct 20 Scanned 90일
읽은 날짜
Jul 23 – Oct 20
- Scanned
- Has records
Scanned Jul 23 – Oct 20 Show data
읽은 날짜 Dates Status Jul 23 – Oct 20 Scanned 표 열림
읽은 날짜
Sep 21 – Oct 20
- Scanned
- Has records
Scanned Sep 21 – Oct 20 Show data
읽은 날짜 Dates Status Sep 21 – Oct 20 Scanned
쓰임 예
날짜 선택
읽은 날짜
Sep 21 – Oct 20
- Scanned
- Has records
Scanned Sep 21 – Oct 20 Show data
읽은 날짜 Dates Status Sep 21 – Oct 20 Scanned 오늘 표시
읽은 날짜
Sep 21 – Oct 20
- Scanned
- Has records
Scanned Sep 21 – Oct 20 Show data
읽은 날짜 Dates Status Sep 21 – Oct 20 Scanned
이렇게 · 이렇게 하지 않기
- 이렇게 질문: “달력의 어느 날짜를 읽었고, 어느 날짜를 못 읽었나?”
- 이렇게 칸은 읽음, 아직 읽지 않음, 읽지 못함 세 상태만 쓰고 색 외에 무늬로도 구분한다.
- 이렇게 하지 않기 활동 강도 히트맵과 streak은 만들지 않는다. 기록이 많은 날을 진하게 칠하지 않는다. “적음 → 많음” 범례를 두지 않는다.
- 이렇게 하지 않기 생산성 점수, 활동량 순위, 사람 간 비교, streak, 목표 달성률을 그리지 않는다.
- 이렇게 하지 않기 읽지 않은 구간을 0으로 그리거나 선으로 잇지 않는다. 빗금 + “아직 읽지 않음”으로 그린다.
- 이렇게 하지 않기 막대가 자라거나 선이 그려지는 등장 애니메이션을 쓰지 않는다. 처음 표시는 불투명도만.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | 읽은 날짜 | 이 차트가 답하는 질문(명사구). figure 이름이자 표 caption. “업무량”, “생산성”, “활동”, “성과”는 쓰지 않는다. |
segments | readonly { start: string; end: string; state: "scanned" | "failed" | "not-collected" }[] | — | CollectionCoverage와 같은 구간 데이터(logic/coverage.ts). 어떤 구간도 덮지 않은 날은 “아직 읽지 않음”이며 0이나 “기록 없음”이 아니다. |
end | string (YYYY-MM-DD) | 2026-10-20 | 창의 마지막 날. |
range? | 30 | 90 | 30 | 창 길이(일). 1년은 격자가 기여 그래프처럼 읽혀서 두지 않는다. |
recordDays? | readonly string[] | — | 기록이 있는 읽은 날. 칸 안 4px 점 하나뿐이고 개수나 진하기로 바꾸지 않는다. |
today? | string (YYYY-MM-DD) | | “오늘” 표식(정지). aria-current="date". |
selectable? | boolean | false | 날짜 칸을 버튼으로(DatePicker 격자 키보드: ←→↑↓, Home/End, PageUp/Down). 이름은 “10월 1일, 읽음, 기록 있음”. |
onSelectDay? | (date: string) => void | — | 선택한 날짜로 호출. 그날 기록 목록을 열 때 쓴다. |
state? | 'ready' | DataState | ready | 데이터 상태(contracts §4). not-collected·error·loading·empty·no-results는 그림 대신 상태 문장을, partial·stale은 그림 위에 상태 줄을 보인다. |
lastReadAt? | string (ISO) | | 마지막으로 읽은 시각. state가 stale이면 범위 줄 끝에 “마지막 읽음 · …”으로 쓴다. 흐리게 처리하지 않는다. |
showTable? | boolean | false | “데이터 보기” 표를 처음부터 연다. 표는 차트와 같은 값·같은 순서이고 읽지 않은 구간은 “아직 읽지 않음” 행이다. |
onConnect? | () => void | — | not-collected 상태의 “출처 연결” 버튼. 없으면 문장만 보인다. |
onRetry? | () => void | — | error 상태의 “다시 시도”. |
| 그 밖의 속성 | — | — | 네이티브 속성은 받지 않는다. 배치는 부모가, 모양은 토큰이 정한다. |
접근성
키보드: selectable: 격자 하나가 Tab 정지점(roving). ←→ 하루, ↑↓ 한 주, Home/End 주 처음·끝, PageUp/Down 한 달, Enter·Space 선택. 아니면 초점을 받지 않는 표다.
- 격자 자체가 <table>(요일 열 머리 <th abbr>)이고 칸마다 상태가 글자로 있다.
- 주 시작 요일은 로캘 규칙(Intl.Locale weekInfo)을 따른다.
- forced-colors에서 읽음 = CanvasText 채움, 아직 읽지 않음 = CanvasText 빗금, 읽지 못함 = 점선 테두리 + 아이콘.