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

HourBars

값 축이 있는 막대 차트다. 학습 시간(시간·분)이나 푼 문제 수를 날짜별로 보여 주고, 고른 막대 위에 말풍선이 뜬다.

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

미리보기#

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

0h1h2h3h4h
3시간 30분
월화수목금토일
학습 시간 (막대를 눌러 보기)
04080
58문제
월화수목금토일
푼 문제 수 + 목표선 + block

언제 쓰는가#

쓴다

  • 일별·주별 학습 시간 또는 푼 문제 수를 비교할 때 쓴다.
  • format="count"는 문제 수, "time"(기본)은 초 단위 학습 시간이다.
  • 목표선(goal)을 점선으로 그을 수 있다.

쓰지 않는다

  • 시간 순서가 없는 항목 비교에는 쓰지 않는다.
  • 막대가 14개를 넘으면 쓰지 않는다. labelEvery로 라벨을 줄이거나 AreaLine을 쓴다.
  • 말풍선 없이 값을 숨기지 않는다. 막대를 눌러 값을 볼 수 있게 한다.

종류#

HourBars 종류
이름설명
기본둥근 막대(모서리 = 폭의 절반). 고른 막대는 gradient, 나머지는 primary 20~34% 투명.
block리포트 모양. 각진 막대(모서리 7), 네이비 말풍선, 고른 요일 라벨이 primary.
축 형식time: 0h·1h·2h… 또는 분. count: 0·중간값·최댓값(정수).

크기#

HourBars 크기
이름값설명
기본막대 높이 140, 막대 폭 22위쪽 34는 말풍선 자리다.

상태#

HourBars 상태
상태모습과 동작
막대 선택막대를 누르면 그 막대가 진해지고 위에 말풍선("2시간 34분", "48문제")이 뜬다. 다시 누르면 해제.
값 0높이 4의 track 점선 막대.

사용 방법#

학습 시간

학습 시간
import { HourBars } from '@/ui/charts';

<HourBars
  data={days.map((d) => ({ label: d.weekday, value: d.seconds }))}
  selected={sel}
  onSelect={setSel}
  bubble={sel != null ? durationShort(days[sel].seconds) : null}
/>

푼 문제 수와 목표선

푼 문제 수와 목표선
<HourBars format="count" goal={50} block data={days.map((d) => ({ label: d.weekday, value: d.answered }))} selected={sel} onSelect={setSel} bubble={`${days[sel]?.answered}문제`} />

속성(props)#

HourBars 속성
이름타입기본값필수설명
data{ label: string; value: number; part?: number; part2?: number; a11y?: string }[]—필수막대 목록. 각 항목: label, value(초 또는 개수), part/part2(위·아래에 겹쳐 그릴 부분 값), a11y(접근성 이름).
heightnumber140선택막대 영역 높이(px). 기본 140.
selectednumber | null—선택선택된 막대의 번호(없으면 null).
onSelect(i: number) => void—선택막대를 눌렀을 때 번호와 함께 호출된다.
bubblestring | null—선택선택된 막대 위에 띄울 글자.
labelEverynumber1선택N번째 막대마다 라벨을 쓴다. 기본 1.
barWidthnumber22선택막대 폭(px). 기본 22.
format'time' | 'count''time'선택"time"(기본) 또는 "count".
goalnumber | null—선택목표 값. 점선으로 긋는다.
bubbleColorstringcolor.primary선택말풍선 색. 기본 color.primary.
blockboolean—선택true이면 리포트 모양.
partColorstring—선택part 부분의 색.
part2Colorstring—선택part2 부분의 색.

치수와 토큰#

축
시간: 1시간 이상이면 0h 1h 2h…(최대 3단계), 미만이면 15분 단위. 문제 수: 0·중간·최대의 정수
막대
폭 22, 최소 높이 폭 × 0.6, 선택 안 된 막대 primary 20%→34%, 선택 gradient
격자선
line 투명도 0.7, 목표선 mint 점선 1.6(5 4)
말풍선
높이 26, 모서리 13(block은 9), primary(block은 네이비), 글자 caption Bold white

접근성#

  • 각 막대는 button이고 이름은 a11y 또는 라벨이다. 웹 미리보기는 "{요일}, {값}"으로 읽는다.
  • 값은 말풍선 글자와 축 숫자로 확인할 수 있다. 색만으로 전달하지 않는다.

글자 색 대비

글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.

HourBars 글자 색 대비
쓰임글자색바탕대비기준
말풍선 글자 (11.5px 굵게)onPrimaryprimary3.93:1 미달3.31:1 미달4.60:1 통과7.25:1 통과4.5:1 (작은 글자)
축 숫자 (11.5px)textTertiarysurface2.53:1 미달3.50:1 미달2.97:1 미달4.45:1 미달4.5:1 (작은 글자)

잘한 예와 잘못한 예#

0h1h2h3h
1시간 0분
월화수목금
잘한 예요일 라벨과 값 말풍선을 함께 둔다.
막대 30개를 한 줄에
잘못한 예막대가 너무 많으면 라벨이 겹친다.
  • AreaLine: 누적 값을 선과 옅은 면으로 보여 주는 차트다. 모든 점에 점이 찍히고 마지막 점에 말풍선이 뜬다. 리포트의 누적 문제 수, 누적 학습 시간에 쓴다.
  • Sparkline: 정답률 같은 작은 추이를 보여 주는 선 그림이다. 값이 없는 날은 선이 끊기고, 마지막 점이 크게 표시된다.
  • CalendarHeat: 한 달 달력에서 날마다 공부한 시간을 색의 진하기(5단계)로 보여 주는 차트다.