# DonutChart

전체를 여러 부분으로 나눠 보여 주는 도넛 차트다. 부분 사이에 3의 틈이 있다. 시험 계획의 익힘/학습 중/시작 전 비율에 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 전체가 2~4개 부분으로 나뉘는 값(익힘, 학습 중, 시작 전)을 보여 줄 때 쓴다.
- 이름과 비율을 옆에 범례로 함께 쓴다. 가운데에는 총합이나 대표 숫자를 `children`으로 넣는다.

### 쓰지 않는다
- 부분이 5개를 넘으면 쓰지 않는다.
- 값 하나의 진행률에는 쓰지 않는다. `ProgressRing`을 쓴다.
- 범례 없이 색만으로 부분을 구분하지 않는다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 지름 132, 선 16 |  |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 값이 없을 때 | 모든 `value`의 합이 0이면 `track` 고리만 보인다. |
| 부분이 하나 | 틈 없이 이어진다. |

## 사용 방법

### 기본

```tsx
import { DonutChart } from '@/ui/charts';

<DonutChart parts={[
  { value: mastered, tint: color.mint },
  { value: learning, tint: color.primary },
  { value: todo, tint: color.lineStrong },
]}>
  <AppText variant="metric">{total}</AppText>
</DonutChart>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `parts` | `{ value: number; tint: string }[]` | — | 필수 | 부분 목록. 각 항목 `{ value, tint }`. 0 이하는 그리지 않는다. |
| `size` | `number` | `132` | 선택 | 지름(px). 기본 132. |
| `stroke` | `number` | `16` | 선택 | 선 두께(px). 기본 16. |
| `track` | `string` | `color.track` | 선택 | 바탕 고리 색. 기본 `color.track`. |
| `children` | `ReactNode` | — | 선택 | 가운데에 놓을 요소. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 시작 | 12시 방향, 시계 방향, 순서대로 이어 그린다 |
| 틈 | 부분이 둘 이상이면 각 부분 끝에 3의 틈 |
| 색 | 부분마다 `tint`. 의미 색(`mint`=익힘, `primary`=학습 중, `lineStrong`=시작 전)을 쓴다 |

## 접근성

- 앱 코드의 차트는 이름이 없다. 부모에 "익힘 12, 학습 중 7, 시작 전 5" 같은 이름을 붙이고 범례를 글자로 함께 쓴다. 이 문서의 미리보기는 그렇게 만들었다.

## 잘한 예와 잘못한 예

- 잘한 예: 범례에 이름과 개수를 쓴다.
- 잘못한 예: 부분이 너무 많으면 구분할 수 없다.

## 함께 보는 컴포넌트

- [ProgressRing](https://developers.moring.co/tds/components/progress-ring.md): 진행률을 둥근 고리로 보여 준다. `ProgressRing`은 작은 고정 고리, `AnimatedRing`은 나타날 때 0%에서 값까지 채워지는 큰 고리다.
- [HourBars](https://developers.moring.co/tds/components/hour-bars.md): 값 축이 있는 막대 차트다. 학습 시간(시간·분)이나 푼 문제 수를 날짜별로 보여 주고, 고른 막대 위에 말풍선이 뜬다.