BarChart
출처별로 읽은 자료 수를 막대로.
- 라이브러리 전용
개요
미리보기
출처별로 읽은 자료
Sep 21 – Oct 20
Show data
| Source | Count |
|---|---|
| Calendar | 86 |
| 1,204 | |
| Documents | 37 |
| Other | Not scanned yet |
예시
상태
준비됨
출처별로 읽은 자료
Sep 21 – Oct 20
Scanned: Calendar 86, Mail 1,204, and Documents 37.Not scanned yet: Other. Show data
출처별로 읽은 자료 Source Count Calendar 86 Mail 1,204 Documents 37 Other Not scanned yet 일부만 읽음
출처별로 읽은 자료
Sep 21 – Oct 20
Scanned: Calendar 86 and Mail 1,204.Couldn’t scan: Documents. Show data
출처별로 읽은 자료 Source Count Calendar 86 Mail 1,204 Documents Couldn’t scan 아직 읽지 않음
출처별로 읽은 자료
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: Calendar 86, Mail 1,204, and Documents 37.Not scanned yet: Other. Show data
출처별로 읽은 자료 Source Count Calendar 86 Mail 1,204 Documents 37 Other Not scanned yet 표 열림
출처별로 읽은 자료
Sep 21 – Oct 20
Scanned: Calendar 86, Mail 1,204, and Documents 37.Not scanned yet: Other. Show data
출처별로 읽은 자료 Source Count Calendar 86 Mail 1,204 Documents 37 Other Not scanned yet
쓰임 예
탐색 모드
출처별로 읽은 자료
Sep 21 – Oct 20
Scanned: Calendar 86, Mail 1,204, and Documents 37.Not scanned yet: Other. Show data
출처별로 읽은 자료 Source Count Calendar 86 Mail 1,204 Documents 37 Other Not scanned yet
이렇게 · 이렇게 하지 않기
- 이렇게 질문: “이 기간에 출처별로 몇 개를 읽었나?” 수집 상태 확인용이다.
- 이렇게 가로 막대, 0선, 막대 끝 값 라벨, 고정 순서.
- 이렇게 하지 않기 사람·팀원·프로젝트 순위 막대를 만들지 않는다. 묶음(“완료 vs 진행 중”)·누적 변형은 없다.
- 이렇게 하지 않기 아직 읽지 않은 출처를 0 막대로 그리지 않는다.
- 이렇게 하지 않기 생산성 점수, 활동량 순위, 사람 간 비교, streak, 목표 달성률을 그리지 않는다.
- 이렇게 하지 않기 읽지 않은 구간을 0으로 그리거나 선으로 잇지 않는다. 빗금 + “아직 읽지 않음”으로 그린다.
- 이렇게 하지 않기 막대가 자라거나 선이 그려지는 등장 애니메이션을 쓰지 않는다. 처음 표시는 불투명도만.
- 이렇게 하지 않기 색만으로 계열을 나누지 않는다. 직접 라벨이 먼저, 표식 모양·무늬가 다음, 색은 보강이다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | 출처별로 읽은 자료 | 이 차트가 답하는 질문(명사구). figure 이름이자 표 caption. “업무량”, “생산성”, “활동”, “성과”는 쓰지 않는다. |
bars | readonly { kind: SourceKind; label?: string; count: number | null; missing? }[] | — | 출처마다 막대 하나. 순서는 고정(캘린더 → 메일 → 문서 → 그 외)이고 값 크기로 다시 정렬하지 않는다. count null은 막대 대신 빗금 칸 + “아직 읽지 않음”. |
range? | { from: string; to: string } | — | 제목 아래 범위 줄(“9월 21일–10월 20일”). 무엇을 읽은 범위인지 먼저 말한다. |
formatValue? | (value: number) => string | — | 개수 형식. 단위는 여기서 붙인다(“42개”). 소수점은 없다. |
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 표식 모양·무늬와 직접 라벨로 남는다.