Sparkline

값 옆의 작은 추세선.

개요

미리보기

예시 언어동작 줄이기

주간 보고 속 고객 수: 118 on Jul 28, 149 on Oct 13, 12 values

label

size

state

준비됨
주간 보고 속 고객 수: 118 on Jul 28, 149 on Oct 13, 12 values
읽지 않은 구간
주간 보고 속 고객 수: 118 on Jul 28, 149 on Oct 13, 10 values · 2 not scanned yet
아직 읽지 않음
Not scanned yet
불러오는 중
Loading
L 크기
주간 보고 속 고객 수: 118 on Jul 28, 149 on Oct 13, 12 values

이름	타입	기본값	설명
`label`	`string`	`주간 보고 속 고객 수`	이 수치가 무엇인지. 보조기기용 요약 문장의 첫머리가 된다. 원문에 적힌 수치여야 한다.
`points`	`readonly { at: string; value: number \| null; inferred?: boolean }[]`	—	한 계열 5–30개. null은 아직 읽지 않음이며 선이 끊긴다(0이 아님). 5개 미만이면 선을 그리지 않고 끝값만 쓴다.
`size?`	`'m' \| 'l'`	`m`	m: 64×24, 숫자 옆, 끝값 라벨. l: 전체 폭, 시작·끝값 라벨. S 위젯에는 쓰지 않고 XL에서는 축 있는 LineChart를 쓴다.
`state?`	`'ready' \| DataState`	`ready`	not-collected·error면 선 없이 “아직 읽지 않음”. 표·탐색 모드는 없다(너무 작다).
`formatValue?`	`(value: number) => string`	—	라벨·요약의 값 형식. 기본은 UI 로캘의 Intl.NumberFormat.

예시

준비됨
주간 보고 속 고객 수: 118 on Jul 28, 149 on Oct 13, 12 values
읽지 않은 구간
주간 보고 속 고객 수: 118 on Jul 28, 149 on Oct 13, 10 values · 2 not scanned yet
아직 읽지 않음
Not scanned yet
불러오는 중
Loading
L 크기
주간 보고 속 고객 수: 118 on Jul 28, 149 on Oct 13, 12 values

이렇게 · 이렇게 하지 않기

이렇게 질문: “옆에 있는 원문 수치가 최근 어느 방향으로 움직였나?” 숫자 하나의 맥락이다.

이렇게 끝점 표식과 끝값 라벨은 필수다. 축이 없으므로 라벨이 값을 말한다.

이렇게 하지 않기 읽은 양이나 처리 속도처럼 “나의 활동량”에는 쓰지 않는다.

이렇게 하지 않기 좋고 나쁨을 색(초록·빨강)이나 화살표로 표시하지 않는다.

이렇게 하지 않기 읽지 않은 구간을 0으로 그리거나 선으로 잇지 않는다. 빗금 + “아직 읽지 않음”으로 그린다.

이렇게 하지 않기 막대가 자라거나 선이 그려지는 등장 애니메이션을 쓰지 않는다. 처음 표시는 불투명도만.

토큰과 속성

이름	타입	기본값	설명
`label`	`string`	`주간 보고 속 고객 수`	이 수치가 무엇인지. 보조기기용 요약 문장의 첫머리가 된다. 원문에 적힌 수치여야 한다.
`points`	`readonly { at: string; value: number \| null; inferred?: boolean }[]`	—	한 계열 5–30개. null은 아직 읽지 않음이며 선이 끊긴다(0이 아님). 5개 미만이면 선을 그리지 않고 끝값만 쓴다.
`size?`	`'m' \| 'l'`	`m`	m: 64×24, 숫자 옆, 끝값 라벨. l: 전체 폭, 시작·끝값 라벨. S 위젯에는 쓰지 않고 XL에서는 축 있는 LineChart를 쓴다.
`state?`	`'ready' \| DataState`	`ready`	not-collected·error면 선 없이 “아직 읽지 않음”. 표·탐색 모드는 없다(너무 작다).
`formatValue?`	`(value: number) => string`	—	라벨·요약의 값 형식. 기본은 UI 로캘의 Intl.NumberFormat.