LineChart
원문에 있는 사실 수치의 시간 변화를 선으로.
- 라이브러리 전용
개요
미리보기
주간 보고에 적힌 고객 수
Jul 28 – Oct 13 · Documents
Show data
| Date | Documents |
|---|---|
| Jul 28 | 118 |
| Aug 4 | 121 |
| Aug 11 | 120 |
| Aug 18 | 126 |
| Aug 25 | 131 |
| Sep 1 | 129 |
| Sep 8 | 134 |
| Sep 15 | 138 |
| Sep 22 | 137 |
| Sep 29 | 142 |
| Oct 6 | 146 |
| Oct 13 | 149 (Inferred) |
예시
상태
준비됨
주간 보고에 적힌 고객 수
Jul 28 – Oct 13 · Documents
Documents: 118 on Jul 28, 149 (Inferred) on Oct 13 Show data
주간 보고에 적힌 고객 수 Date Documents Jul 28 118 Aug 4 121 Aug 11 120 Aug 18 126 Aug 25 131 Sep 1 129 Sep 8 134 Sep 15 138 Sep 22 137 Sep 29 142 Oct 6 146 Oct 13 149 (Inferred) 일부만 읽음
주간 보고에 적힌 고객 수
Jul 28 – Oct 13 · Mail and Documents
Mail: 40 on Jul 28, 60 on Oct 13 · Documents: 118 on Jul 28, 149 on Oct 13Not scanned yet: Aug 25 – Sep 1. Couldn’t scan: Sep 22. Show data
주간 보고에 적힌 고객 수 Date Mail Documents Jul 28 40 118 Aug 4 44 121 Aug 11 41 120 Aug 18 47 126 Aug 25 Not scanned yet Not scanned yet Sep 1 Not scanned yet Not scanned yet Sep 8 49 134 Sep 15 55 138 Sep 22 Couldn’t scan Couldn’t scan Sep 29 57 142 Oct 6 61 146 Oct 13 60 149 아직 읽지 않음
주간 보고에 적힌 고객 수
Connect a source to see this.
불러오는 중
주간 보고에 적힌 고객 수
비어 있음
주간 보고에 적힌 고객 수
Jul 28 – Oct 13 · Documents
Nothing matching in the records scanned for these dates.
오류
주간 보고에 적힌 고객 수
Couldn’t load this right now.
오래됨
주간 보고에 적힌 고객 수
Jul 28 – Oct 13 · Documents · Last scanned · Oct 20
Documents: 118 on Jul 28, 149 (Inferred) on Oct 13 Show data
주간 보고에 적힌 고객 수 Date Documents Jul 28 118 Aug 4 121 Aug 11 120 Aug 18 126 Aug 25 131 Sep 1 129 Sep 8 134 Sep 15 138 Sep 22 137 Sep 29 142 Oct 6 146 Oct 13 149 (Inferred) 면 채움(AreaChart)
주간 보고에 적힌 고객 수
Jul 28 – Oct 13 · Documents
Documents: 118 on Jul 28, 149 (Inferred) on Oct 13 Show data
주간 보고에 적힌 고객 수 Date Documents Jul 28 118 Aug 4 121 Aug 11 120 Aug 18 126 Aug 25 131 Sep 1 129 Sep 8 134 Sep 15 138 Sep 22 137 Sep 29 142 Oct 6 146 Oct 13 149 (Inferred) 표 열림
주간 보고에 적힌 고객 수
Jul 28 – Oct 13 · Documents
Documents: 118 on Jul 28, 149 (Inferred) on Oct 13 Show data
주간 보고에 적힌 고객 수 Date Documents Jul 28 118 Aug 4 121 Aug 11 120 Aug 18 126 Aug 25 131 Sep 1 129 Sep 8 134 Sep 15 138 Sep 22 137 Sep 29 142 Oct 6 146 Oct 13 149 (Inferred)
쓰임 예
탐색 모드
주간 보고에 적힌 고객 수
Jul 28 – Oct 13 · Documents
Documents: 118 on Jul 28, 149 (Inferred) on Oct 13 Show data
주간 보고에 적힌 고객 수 Date Documents Jul 28 118 Aug 4 121 Aug 11 120 Aug 18 126 Aug 25 131 Sep 1 129 Sep 8 134 Sep 15 138 Sep 22 137 Sep 29 142 Oct 6 146 Oct 13 149 (Inferred) 오늘 표시
주간 보고에 적힌 고객 수
Jul 28 – Oct 13 · Documents
Documents: 118 on Jul 28, 149 (Inferred) on Oct 13 Show data
주간 보고에 적힌 고객 수 Date Documents Jul 28 118 Aug 4 121 Aug 11 120 Aug 18 126 Aug 25 131 Sep 1 129 Sep 8 134 Sep 15 138 Sep 22 137 Sep 29 142 Oct 6 146 Oct 13 149 (Inferred)
이렇게 · 이렇게 하지 않기
- 이렇게 질문: “원문에 적힌 수치 하나가 기간 동안 어떻게 변했나?”
- 이렇게 문서 속 KPI처럼 원문에 적힌 수치에만 쓴다. 끝점 옆에 “이름 · 값”을 직접 단다.
- 이렇게 곡선은 직선 연결만. monotone은 없는 값을 지어내고 계단은 다음 값까지 유지됐다고 주장한다.
- 이렇게 하지 않기 사용자의 활동량이나 생산성 추세에는 쓰지 않는다.
- 이렇게 하지 않기 이중 y축을 쓰지 않는다. 두 수치는 같은 x축의 LineChart 두 개를 세로로 쌓는다.
- 이렇게 하지 않기 생산성 점수, 활동량 순위, 사람 간 비교, streak, 목표 달성률을 그리지 않는다.
- 이렇게 하지 않기 읽지 않은 구간을 0으로 그리거나 선으로 잇지 않는다. 빗금 + “아직 읽지 않음”으로 그린다.
- 이렇게 하지 않기 막대가 자라거나 선이 그려지는 등장 애니메이션을 쓰지 않는다. 처음 표시는 불투명도만.
- 이렇게 하지 않기 색만으로 계열을 나누지 않는다. 직접 라벨이 먼저, 표식 모양·무늬가 다음, 색은 보강이다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | 주간 보고에 적힌 고객 수 | 이 차트가 답하는 질문(명사구). figure 이름이자 표 caption. “업무량”, “생산성”, “활동”, “성과”는 쓰지 않는다. |
series | readonly { kind: SourceKind; label?: string; points: { at; value: number | null; inferred?; missing? }[] }[] | — | 계열 1–2개(최대 4). 색·표식 모양·순서는 출처(kind)가 정한다. value null은 읽지 않은 날짜이며 선이 끊기고 빗금 띠가 된다. 0은 “읽었고 0”일 때만. |
fill? | boolean | false | AreaChart 변형. 계열이 1개일 때만, 0부터, 단색 면. 누적(stacked)은 없다. |
today? | string (YYYY-MM-DD) | | “오늘” 세로 hairline. 허용되는 유일한 세로선이다. |
formatValue? | (value: number) => string | — | 눈금·라벨·표의 값 형식. 단위는 첫 눈금이 아니라 이 함수가 붙인다(“12명”). |
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 표식 모양·무늬와 직접 라벨로 남는다.