TimelineChart
시간 축 기반으로 일정/이력 데이터를 선형적으로 시각화하는 컴포넌트
개요
TimelineChart 컴포넌트는 vis-timeline 기반으로 일정 데이터를 바(Bar) 형태로 시간 축 위에 표시합니다. 일/주/월/분기 뷰 모드, 드래그 이동, 상태별 색상 구분, 항목 리스트 고정 등을 지원합니다.
주요 특징
- ✅ 보기 모드 전환: 일 / 주 / 월 / 분기 뷰
- ✅ 시간 축 표시: 가로 방향 시간/날짜 축
- ✅ 항목 리스트 고정: 고정 영역 + 가로 스크롤
- ✅ 현재 시점 표시: 오늘/현재 시간 기준선
- ✅ 일정 바 표시: Bar 형태 일정 시각화
- ✅ 상태 스타일: 색상으로 상태 구분
- ✅ 드래그 이동: 일정 바 드래그로 날짜 변경
기본 상태 / 시간 축 표시 / 항목 리스트 고정
Preview
Status:
Pending
In Progress
Completed
Delayed
보기 모드 전환
일 / 주 / 월 단위 보기 모드를 전환할 수 있는 토글 UI를 제공합니다.
Preview
Status:
Pending
In Progress
Completed
Delayed
현재 시점 표시
오늘 날짜 또는 현재 시점을 기준선으로 시각적으로 표시합니다.
Preview
Status:
Pending
In Progress
Completed
Delayed
상태 스타일 표시
일정 상태(진행중, 완료, 지연 등)를 색상으로 구분하여 표시합니다.
Preview
Status:
Pending
In Progress
Completed
Delayed
드래그 이동
일정 바를 드래그하여 날짜/시간을 변경할 수 있습니다.
Preview
Status:
Pending
In Progress
Completed
Delayed
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | TimelineChartItem[] | - | 일정 데이터 |
groups | TimelineChartGroup[] | - | 그룹 데이터 (행 레이블) |
restrictions | TimelineRestriction[] | [] | 제한 기간 |
viewMode | "day" | "week" | "month" | "quarter" | "month" | 현재 뷰 모드 |
editable | boolean | false | 드래그 앤 드롭 활성화 |
showCurrentTime | boolean | true | 현재 시점 표시 |
showCurrentTimeLine | boolean | true | 현재 시간 라인 표시 |
showViewModeToggle | boolean | true | 뷰 모드 토글 표시 |
availableViewModes | TimelineViewMode[] | ["day","week","month"] | 사용 가능 뷰 모드 |
zoomable | boolean | true | 줌 활성화 |
moveable | boolean | true | 스크롤 이동 활성화 |
height | string | number | 400 | 높이 |
loading | boolean | false | 로딩 오버레이 |
emptyMessage | string | "No items" | 빈 상태 메시지 |
className | string | - | 추가 CSS 클래스 |
Events
| Event | Type | Description |
|---|---|---|
onViewModeChange | (mode: TimelineViewMode) => void | 뷰 모드 변경 시 |
onItemClick | (item: TimelineChartItem, event: MouseEvent) => void | 아이템 클릭 시 |
onItemDoubleClick | (item: TimelineChartItem, event: MouseEvent) => void | 아이템 더블클릭 시 |
onItemChange | (event: TimelineItemChangeEvent) => void | 드래그 완료 시 |
onItemMove | (event: TimelineItemChangeEvent) => void | 그룹 간 이동 시 |
TimelineChartItem
| Prop | Type | Description |
|---|---|---|
id | string | number | 고유 ID |
content | string | 일정 내용 |
start | Date | string | 시작 시간 |
end | Date | string | 종료 시간 |
group | string | number | 그룹 ID |
status | TimelineItemStatus | 상태 (색상 결정) |
TimelineChartGroup
| Prop | Type | Description |
|---|---|---|
id | string | number | 고유 ID |
content | string | 그룹 레이블 |
order | number | 정렬 순서 |
기본 사용법
import {
TimelineChart,
type TimelineChartItem,
type TimelineChartGroup,
} from "@vortex/ui-foundation"
<TimelineChart
items={items}
groups={groups}
viewMode="month"
height={400}
showViewModeToggle
showCurrentTime
/>접근성
권장 사항
- ✅ 일정 바에 의미 있는 content 텍스트 제공
- ✅ 색상만으로 상태를 구분하지 않고 텍스트 병행
- ❌ 드래그 이동만으로 기능을 제공하지 않음 (키보드 대안 고려)
Last updated on