Dimension Timeline은 작업을 고정된 행이 아닌 관심 차원(Dimension) 기준으로 시간축에 배치하는 타임라인 컴포넌트입니다. 작업이 겹칠 경우에만 시각적으로 개행되며, 행 자체는 의미를 가지지 않습니다.
npm install @iyulab/dimension-timeline<d-dimension-timeline id="timeline"></d-dimension-timeline>
<script type="module">
import { ArrayDataSource } from '@iyulab/dimension-timeline'; // 가져오면 <d-dimension-timeline> 이 등록된다
const timeline = document.getElementById('timeline');
timeline.dataSource = new ArrayDataSource([
{ id: 't1', start: new Date('2026-10-01T09:00'), end: new Date('2026-10-01T12:00'),
dimensions: { project: 'A', worker: 'Kim' }, label: '조립' },
]);
timeline.dimensions = [
{ key: 'project', label: '프로젝트' },
{ key: 'worker', label: '작업자' },
];
timeline.activeDimension = 'project';
timeline.scale = 'hour';
</script>lit 3 이 의존성으로 함께 설치된다. 동작하는 전체 예는 demo/index.html 에 있다.
컴포넌트가 스스로 그리는 문구(머리 · 검색 · 빈 목록 · 확대/축소 · 스케일 · 시간축 눈금)의 기본값은 영어
(DEFAULT_TIMELINE_LABELS)다. 한국어는 함께 실려 있어 locale="ko" 로 고른다 — locale 을 비우면 가장 가까운
조상(문서 포함)의 lang 을 따른다(<html lang="ko"> 면 한국어). 다른 로캘은 registerTimelineLabels() 로 더한다.
<d-dimension-timeline locale="ko"></d-dimension-timeline>import { registerTimelineLabels } from '@iyulab/dimension-timeline';
registerTimelineLabels('ja', { select: '選択', zoomIn: '拡大', zoomOut: '縮小' });한 화면만 바꿀 때는 labels 로 키 단위로 덮는다 — 넘긴 키만 로캘 문구 위에 얹힌다.
timeline.labels = {
dimension: 'Group by',
scales: { day: 'Day', week: 'Week' },
axisLabel: (date, unit, primary) =>
primary ? date.toLocaleDateString('en', { month: 'short', year: 'numeric' }) : String(date.getDate()),
};앱이 자기 고르기로 activeDimension 을 정하면 좌상단의 내장 고르기를 hide-dimension-dropdown 으로 숨긴다.
- 행(row)은 데이터 의미가 아님
- Dimension(차원) 이 유일한 그룹 기준
- 충돌 시에만 자동 개행되는 row-less timeline
- 간트차트와 다름 (작업 중심 ❌, 시간·관심 중심 ⭕
- 프로젝트 / 인원 / 설비 / 태그 등 관심 기준을 바꿔가며 작업 흐름을 보고 싶을 때
- 작업 밀집도, 중첩, 공백을 직관적으로 보고 싶을 때
- 고정된 스윔레인 구조가 오히려 방해가 될 때
타임라인을 바라보는 기준을 선택합니다.
예:
- Project
- Assignee
- Equipment
- Custom Dimension
Dimension 변경 시 전체 레이아웃이 재계산됩니다.
선택된 Dimension의 각 값이 하나의 Context입니다.
예:
- Dimension = Project → Project A / Project B / Project C
- Dimension = Person → Alice / Bob / Carol
각 Context는 독립적인 타임라인 공간을 가집니다.
모든 Context가 공유하는 시간 축입니다.
- day / week / month / custom scale
- zoom / pan / now marker 지원
Context 내부에서 Task들이 렌더링되는 영역입니다.
- 행은 고정되지 않음
- 충돌이 없으면 한 줄
- 충돌 시 자동 개행
시간 구간을 갖는 최소 단위입니다.
필수 속성:
startenddimensionValue
선택 속성:
- label
- color / status
- metadata
Context 내부에서 Task를 배치하는 핵심 엔진입니다.
규칙:
- 동일 Context 내에서만 충돌 검사
- 겹치지 않으면 같은 줄
- 겹치면 다음 줄 생성
- 최소 줄 수 유지
기반 알고리즘:
- Interval partitioning (greedy)
d-dimension-timeline 에 걸면 안쪽까지 내려간다. 값은 모두 폴백이 있어 아무것도 걸지 않아도 그려진다.
크기 — 뷰포트와 포인터 좌표는 그려진 영역에서 재므로, 바꾸면 줌 · 드래그도 함께 맞는다.
| 속성 | 기본값 | 무엇 |
|---|---|---|
--time-axis-height |
48px |
시간축 행의 높이 |
--dimension-selector-width |
200px |
왼쪽 선택기 열의 폭 |
--dimension-selector-min-width |
150px |
선택기 요소(d-dimension-selector)의 최소 폭 |
--context-header-height |
32px |
d-context-slice 머리글의 높이 |
--context-labels-width |
0 |
작업 영역 왼쪽의 맥락 라벨 띠 폭 |
--timeline-border-radius |
8px |
바깥 모서리 |
글자 — --timeline-font-family(기본 system-ui, -apple-system, sans-serif) · --time-axis-font-size(11px) · --context-label-size(13px).
색 — 영역별 접두로 묶여 있다. 바탕 · 테두리부터 바꾸면 대부분이 따라온다.
| 접두 | 영역 | 대표 |
|---|---|---|
--timeline-* |
바깥 틀 · 캔버스 | --timeline-bg · --timeline-border · --timeline-canvas-bg |
--time-axis-* |
시간축 | --time-axis-bg · --time-axis-text · --time-axis-now · --time-axis-today-bg |
--dimension-selector-* · --dimension-value-* |
왼쪽 선택기와 그 값 목록 | --dimension-selector-header-bg · --dimension-value-selected-text |
--context-* |
맥락 조각 · 라벨 띠 | --context-header-bg · --context-border · --context-label-color |
--dropdown-* |
선택기 드롭다운 | --dropdown-menu-bg · --dropdown-item-selected-bg |
--zoom-button-* · --scale-indicator-* |
줌 단추 · 척도 표시 | --zoom-button-bg · --scale-indicator-bg |
--scrollbar-* · --selection-indicator-color · --corner-header-bg |
스크롤 막대 · 선택 표시 · 왼쪽 위 칸 |
@iyulab/components 토큰이 있으면 모션 지속시간(--u-duration-*)과 떠 있는 층(--u-layer-floating)을 거기서 읽는다.
type Task = {
id: string
start: Date
end: Date
dimensions: Record<string, string | string[]> // dimension name -> value(s)
label?: string
color?: string
status?: 'pending' | 'in-progress' | 'completed' | 'cancelled'
progress?: number // 0-100
metadata?: Record<string, any>
}| 항목 | Gantt Chart | Dimension Timeline |
|---|---|---|
| 행 의미 | 작업 | 없음 (레이아웃 결과) |
| 기준 | 작업 구조 | 관심 차원 |
| 중첩 처리 | 고정 행 | 자동 개행 |
| 목적 | 계획 관리 | 흐름·밀집도 인식 |
Dimension Timeline은 관심 차원으로 이벤트를 그룹화하고, 행 없는 타임라인 위에 충돌 인지 레이아웃으로 표현하는 컴포넌트입니다.
- 행에 의미를 부여하지 말 것
- Dimension은 데이터의 “속성”이지 “구조”가 아님
- 작업 수가 많을 경우 가상 스크롤 또는 캔버스 렌더링 권장
- 다중 Dimension (Primary / Secondary)
- Context별 밀집도 인디케이터
- Drag & Drop으로 Dimension 변경
- Aggregate / Summary Layer