AreaLine
누적 값을 선과 옅은 면으로 보여 주는 차트다. 모든 점에 점이 찍히고 마지막 점에 말풍선이 뜬다. 리포트의 누적 문제 수, 누적 학습 시간에 쓴다.
- 분류
- 차트
- 가져오기
import { AreaLine } from '@/ui/charts'- 코드 위치
apps/mobile/src/ui/charts.tsx:291
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
05001,000
910
5월6월7월8월9월10월
언제 쓰는가#
쓴다
- 월별 누적 문제 수나 학습 시간처럼 계속 늘어나는 값을 보여 줄 때 쓴다.
쓰지 않는다
- 증가·감소가 오가는 값에는 쓰지 않는다. 누적(계속 늘기만 하는 값)용이다.
- 점이 2개 미만이면 선이 없다. 쓰지 않는다.
종류#
| 이름 | 설명 |
|---|---|
| count (기본) | 축이 0·중간·최대의 정수. 말풍선은 숫자. |
| time | 축이 시간(h) 또는 분. 말풍선은 "n시간 n분". |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 그래프 높이 150 | 위쪽 36은 말풍선 자리. 축 라벨 폭 38. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 마지막 점 | 지름 9의 채운 점과 위에 말풍선. 나머지 점은 지름 6의 속 빈 점. |
사용 방법#
기본
기본
import { AreaLine } from '@/ui/charts';
<AreaLine values={months.map((m) => m.total)} labels={months.map((m) => `${m.month}월`)} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
values | number[] | — | 필수 | 점의 값 목록(누적). |
labels | string[] | — | 필수 | 점마다의 라벨(같은 길이). |
height | number | 150 | 선택 | 그래프 높이(px). 기본 150. |
format | 'count' | 'time' | 'count' | 선택 | "count"(기본) 또는 "time". |
bubbleColor | string | color.primary | 선택 | 말풍선 색. 기본 color.primary. |
치수와 토큰#
- 선
- 두께 2.4, 면은
primary30% → 2% 그라데이션 - 점
- 지름 6(속
surface, 테두리 1.8), 마지막은 지름 9 채움 - 라벨
- 최대 6개 정도로 줄여 겹치지 않게 놓는다(마지막은 항상 표시)
접근성#
- 앱 코드의 차트에는 이름이 없다. 부모에 이름과 마지막 값을 글자로 붙인다. 웹 미리보기는 그림 전체에 "누적 추이. 마지막 값 …" 이름을 붙였다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 말풍선 글자 (11.5px 굵게) | onPrimary | primary | 3.93:1 미달3.31:1 미달4.60:1 통과7.25:1 통과 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
04080
70
8월9월10월
일별 정답률(오르내림)을 면 차트로