본문으로 건너뛰기
TDSMoring 디자인 시스템

DonutChart

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

이 페이지의 목차
분류
차트
가져오기
import { DonutChart } from '@/ui/charts'
코드 위치
apps/mobile/src/ui/charts.tsx:64

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

24
  • 익힘 12개
  • 학습 중 7개
  • 시작 전 5개
범례와 함께

언제 쓰는가#

쓴다

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

쓰지 않는다

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

종류#

종류가 없다.

크기#

DonutChart 크기
이름값설명
기본지름 132, 선 16

상태#

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

사용 방법#

기본

기본
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)#

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

치수와 토큰#

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

접근성#

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

잘한 예와 잘못한 예#

잘한 예범례에 이름과 개수를 쓴다.
잘못한 예부분이 너무 많으면 구분할 수 없다.
  • ProgressRing: 진행률을 둥근 고리로 보여 준다. ProgressRing은 작은 고정 고리, AnimatedRing은 나타날 때 0%에서 값까지 채워지는 큰 고리다.
  • HourBars: 값 축이 있는 막대 차트다. 학습 시간(시간·분)이나 푼 문제 수를 날짜별로 보여 주고, 고른 막대 위에 말풍선이 뜬다.