# ChartBlock

문제와 해설 안의 그래프(선, 막대, 점)를 그린다. 함수 그래프는 교과서처럼 원점을 지나는 화살표 축으로, 자료 그래프는 격자와 눈금과 범례로 그린다.

- 분류: 학습 콘텐츠
- 가져오기: `import { ChartBlock } from '@/ui/blocks/ChartBlock'`
- 코드 위치: `apps/mobile/src/ui/blocks/ChartBlock.tsx:27` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/chart-block

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 문제 안의 그래프를 `Blocks`가 자동으로 부른다. 직접 쓰는 일은 드물다.
- 그래프의 폭은 항상 부모 폭이다.

### 쓰지 않는다
- 앱의 학습 통계에는 쓰지 않는다. 통계는 `HourBars`, `AreaLine` 같은 차트를 쓴다.
- 그래프 모양을 위해 코드에서 점을 조작하지 않는다. 서버가 만든 점을 그대로 그린다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 함수 그래프 (cartesian) | 막대가 아니고, 범주축이 없고, 두 축의 범위가 0을 포함하며 단위가 없을 때. 원점을 지나는 화살표 축, 격자 없음, x · y · O 글자. |
| 자료 그래프 | 그 밖의 모든 경우. 격자, 눈금, 단위, 범주, 막대, 범례. |
| kind | `line`(선), `bar`(막대), `scatter`(점). |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 = min(폭 × 0.64, 240) | `compact`는 폭 × 0.66. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 시리즈 색 | 1번째 `primary`, 2번째 `danger`, 3번째 `mint`, 4번째 `amber`. |
| 보조선·표시 | `lines`(가로·세로 보조선)와 `marks`(강조점과 라벨)를 그린다. |

## 사용 방법

### 기본

```tsx
import { ChartBlock } from '@/ui/blocks/ChartBlock';

<ChartBlock block={block} compact={inChoice} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `block` | `Chart` | — | 필수 | 그래프 블록(`{ t: "chart", kind, x, y, series, lines?, marks? }`). 축 `x`, `y`는 `{ label?, unit?, cats?, min, max }`. |
| `compact` | `boolean` | — | 선택 | `true`이면 보기 안에 들어가게 작게 그린다(글자 10, 높이 폭 × 0.66). |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 색 | `primary`, `danger`, `mint`, `amber` 순서 |
| 글자 | 눈금과 라벨 11px(`compact` 10), 색 `textTertiary` |
| 안쪽 여백 | 함수 그래프 14/16/14/14, 자료 그래프 36/12/18/24 (왼/오/위/아래) |
| 눈금 | 약 4개, 1·2·2.5·5·10 배수로 고른다 |

## 접근성

- 그래프 전체에 "그래프, 가로 {라벨}, 세로 {라벨}"이라는 이름이 붙는다. 점의 값은 읽히지 않으므로 문제 글에 필요한 값을 써 둔다.
- 시리즈는 색과 범례의 이름으로 함께 구분한다.

## 잘한 예와 잘못한 예

- 잘한 예: 단위와 라벨이 있는 자료 그래프에는 범례를 함께 쓴다.
- 잘못한 예: 그래프의 값을 알아야 풀 수 있는 문제라면 값을 글로도 쓴다. 화면 읽기 프로그램은 점의 값을 읽지 못한다.

## 함께 보는 컴포넌트

- [Blocks](https://developers.moring.co/tds/components/blocks.md): 문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다. `RichText`는 그중 문단 하나다.
- [DiagramBlock](https://developers.moring.co/tds/components/diagram-block.md): 선, 도형, 글자, 회로 부품(저항, 전지, 전구, 스위치), 스프링 같은 기본 모양으로 만든 도식을 그린다. 컨테이너 폭에 맞게 줄어든다.
- [HourBars](https://developers.moring.co/tds/components/hour-bars.md): 값 축이 있는 막대 차트다. 학습 시간(시간·분)이나 푼 문제 수를 날짜별로 보여 주고, 고른 막대 위에 말풍선이 뜬다.