# Sparkline

정답률 같은 작은 추이를 보여 주는 선 그림이다. 값이 없는 날은 선이 끊기고, 마지막 점이 크게 표시된다.

- 분류: 차트
- 가져오기: `import { Sparkline } from '@/ui/charts'`
- 코드 위치: `apps/mobile/src/ui/charts.tsx:151` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/sparkline

## 미리보기

실제 컴포넌트를 그린 화면은 https://developers.moring.co/tds/components/sparkline 에서 볼 수 있다. 서비스 색 선택기로 Mordy, Morit 색을 바꿔 볼 수 있다.

## 언제 쓰는가

### 쓴다
- 카드 안에서 최근 며칠의 변화를 가볍게 보여 줄 때 쓴다.
- 값은 0~1이다. 값이 없는 날은 `null`을 넣는다.

### 쓰지 않는다
- 정확한 값을 읽어야 하는 곳에는 쓰지 않는다. 축이 없다. `HourBars`나 `AreaLine`을 쓴다.
- 값이 2개 미만이면 쓰지 않는다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 44, 폭은 `width`로 지정 | 위아래 안쪽 여백 5. 폭은 필수다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 값이 없는 날 | `null`이면 선이 끊기고 점도 없다. |
| 마지막 점 | 지름 8의 채운 점. 나머지는 지름 4.8의 속 빈 점. |

## 사용 방법

### 기본

```tsx
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일 정답률" 같은 이름과 마지막 값을 글자로 붙인다.

## 잘한 예와 잘못한 예

- 잘한 예: 옆에 최근 값을 숫자로 함께 쓴다.
- 잘못한 예: 축이 없으므로 정확한 값을 읽어야 하는 곳에는 쓰지 않는다.

## 함께 보는 컴포넌트

- [AreaLine](https://developers.moring.co/tds/components/area-line.md): 누적 값을 선과 옅은 면으로 보여 주는 차트다. 모든 점에 점이 찍히고 마지막 점에 말풍선이 뜬다. 리포트의 누적 문제 수, 누적 학습 시간에 쓴다.
- [HourBars](https://developers.moring.co/tds/components/hour-bars.md): 값 축이 있는 막대 차트다. 학습 시간(시간·분)이나 푼 문제 수를 날짜별로 보여 주고, 고른 막대 위에 말풍선이 뜬다.