Sparkline
정답률 같은 작은 추이를 보여 주는 선 그림이다. 값이 없는 날은 선이 끊기고, 마지막 점이 크게 표시된다.
- 분류
- 차트
- 가져오기
import { Sparkline } from '@/ui/charts'- 코드 위치
apps/mobile/src/ui/charts.tsx:151
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- 카드 안에서 최근 며칠의 변화를 가볍게 보여 줄 때 쓴다.
- 값은 0~1이다. 값이 없는 날은
null을 넣는다.
쓰지 않는다
- 정확한 값을 읽어야 하는 곳에는 쓰지 않는다. 축이 없다.
HourBars나AreaLine을 쓴다. - 값이 2개 미만이면 쓰지 않는다.
종류#
종류가 없다.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 높이 44, 폭은 `width`로 지정 | 위아래 안쪽 여백 5. 폭은 필수다. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 값이 없는 날 | null이면 선이 끊기고 점도 없다. |
| 마지막 점 | 지름 8의 채운 점. 나머지는 지름 4.8의 속 빈 점. |
사용 방법#
기본
기본
import { Sparkline } from '@/ui/charts';
<Sparkline width={220} values={last7.map((d) => (d.answered ? d.correct / d.answered : null))} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
values | (number | null)[] | — | 필수 | 0~1 값 목록. 값이 없는 날은 null. |
width | number | — | 필수 | 폭(px). 필수. |
height | number | 44 | 선택 | 높이(px). 기본 44. |
tint | string | color.primary | 선택 | 선과 점의 색. 기본 color.primary. |
치수와 토큰#
- 선
- 두께 2.4, 둥근 끝과 꺾임
- 기준선
- 값 0.5 위치에 점선(
line, 3 4) - 점
- 지름 4.8(속은
surface), 마지막은 지름 8 채움
접근성#
- 앱 코드의 차트에는 이름이 없다. 부모에 "최근 7일 정답률" 같은 이름과 마지막 값을 글자로 붙인다.
잘한 예와 잘못한 예#
85%