InterpreterGantt
Gantt 인터프리터는 TSV 계층 구조 텍스트를 SVG Gantt 차트로 렌더링한다.
섹션 편집 시 #!gantt 블록은 InterpreterGantt Editor로 열린다.
1. 포맷
1.1. 변수
#!var defaultEst 3: leaf 작업의 Est 컬럼이 생략되면3d로 계산한다. 생략하거나 유효하지 않으면 기본값은1d.
1.2. 컬럼 구조
각 행은 탭(\t)으로 구분된 컬럼으로 구성된다.
- Task 컬럼: 항목명이 들어있는 컬럼. 0-based 인덱스가 depth가 된다. 앞의 빈 컬럼들이 들여쓰기 역할.
- 시작일 컬럼 (선택):
YYYY-MM-DD형식, 또는 선행 작업 참조. 생략 가능. - 소요일 컬럼 (선택): 영업일 단위 정수. 생략 가능.
- 진척률 컬럼 (선택):
숫자%형식 (예:75%). 0~100 범위. 생략 가능.
1.3. 파싱 알고리즘
- 왼쪽 스캔: 첫 번째 비어있지 않은 컬럼 위치(0-based)가 depth, 그 값이 항목명.
- 오른쪽 스캔 (항목명 오른쪽 컬럼들만, 오른쪽에서 순서대로):
- 마지막 값이
숫자%형식 → 진척률. - 그 다음 마지막 값이 정수 → 소요일. 그 앞 값 추가 확인:
- *
YYYY-MM-DD형식 → 시작일. - * 그 외 텍스트 → 선행 작업 참조.
- 마지막 값이 날짜 → 시작일(소요일 생략).
- 마지막 값이 그 외 텍스트 → 선행 작업 참조(시작일·소요일 생략).
1.4. 레이블과 참조
작업 간 의존성을 명시할 수 있다.
1.4.1. 레이블 정의
항목명 끝에 #id를 붙이면 해당 작업에 레이블을 부여한다.
레이블 없이도 항목명 자체가 암묵적 레이블로 사용된다.
설계#Design | 2026-01-05 | 5 |
#은 공백 없이 항목명에 바로 붙어야 한다. C# 개발처럼 # 앞에 공백이 있으면 레이블로 처리되지 않는다.
1.4.2. 선행 작업 참조
시작일 위치에 날짜 대신 레이블 이름을 쓰면, 그 작업의 종료일 다음 영업일에 시작한다.
# 접두어는 선택 사항이다.
백엔드 설계 10 ← "설계" 작업 종료 후 시작 (이름 직접 참조) 프론트엔드 #Design 8 ← 명시적 id로 참조
참조는 문서 위쪽에 정의된 레이블만 유효하게 해석된다.
1.5. 파싱 예시
설계#D 2026-01-05 5 → depth=0, name="설계", label="D", start=2026-01-05, est=5
백엔드 설계 10 → depth=0, name="백엔드", afterRef="설계", est=10
테스트 #D 3 → depth=1, name="테스트", afterRef="D", est=3
C# 개발 5 → depth=0, name="C# 개발", est=5 (# 앞 공백 → 레이블 아님)
작업A 2026-01-05 3 75% → depth=0, est=3, progress=75%
작업B 5 100% → depth=0, est=5, progress=100%
작업C 50% → depth=0, progress=50% (est는 defaultEst 사용)2. 계산 규칙
2.1. 소요일
- Leaf 노드: 소요일 컬럼 값. 생략 시 1영업일.
- 중간·Root 노드: 자식의 시작일 ~ 마지막 자식의 종료일을 영업일로 계산. 직접 명시해도 무시하고 자동 산출.
2.2. 진척률
- Leaf 노드: 진척률 컬럼 값. 생략 시 미표시.
- 중간·Root 노드: 직접 자식들의 소요일을 가중치로 한 가중 평균으로 자동 산출. 자식 중 하나라도 진척률이 있으면 계산하며, 진척률 미지정 자식은 0%로 처리.
2.3. 시작일
우선순위:
- 선행 작업 참조(
afterRef)가 있고 해당 작업의 종료일이 계산된 경우 → 그 다음 영업일 - 시작일 컬럼에 직접 명시한 날짜
- 직전 형제 노드의 종료일 다음 영업일
- 부모 노드의 시작일 (첫 번째 자식인 경우)
- 오늘 날짜 (최상위 첫 항목에 시작일 없을 때)
2.4. 종료일
- 종료일 = 시작일 + 소요일 - 1 (영업일 기준)
- 영업일: 주말(토·일) 제외. 공휴일 미반영.
3. 렌더링
3.1. 레이아웃 (4분면 Freeze)
CSS Grid 2×2 구조로 레이블 패널과 날짜 헤더를 동시에 freeze한다.
Corner | Header: 날짜 헤더 (가로 freeze) |
|---|---|
Labels (세로 freeze) | Body: 간트 바 (가로+세로 스크롤) |
- 가로 스크롤 시 왼쪽 레이블 패널 고정.
- 세로 스크롤 시 상단 날짜 헤더 고정.
- Body의 scroll 이벤트 →
transform: translateX/Y로 동기화.
3.2. 레이블 패널 컬럼 구조
레이블 패널은 4컬럼으로 구성된다.
컬럼 | 고정폭 | 내용 |
|---|---|---|
# | 36px | 원본 Gantt 행 번호 (1부터 시작, 좌측 고정) |
Task | 나머지 | 항목명 (depth에 따른 들여쓰기, 좌측 색상 바, 접기/펴기 삼각형) |
Period | — |
|
Est | 48px |
|
% | 48px |
|
코너 셀에 각 컬럼 헤더(# / Task / Period / Est)가 표시된다.
3.3. 차트 영역
- 가로축: 날짜. 월 헤더 + 주 단위 그리드.
- 주말: 회색 배경.
- 오늘 선: 빨간 점선 세로선 + 헤더 날짜 하이라이트.
- 바 왼쪽: 시작일 (
yyyy-mm-dd). - 바 내부: 소요일 (
Nd, 바가 충분히 넓을 때). - 바 오른쪽:
항목명 (Nd)형식의 항목명 + 소요일 (항상 표시). - 진척률 표시: 진척률이 지정된 경우 바를 두 구간으로 표현 (완료 구간: 진하게, 미완료 구간: 연하게). 툴바 요약에도 전체 진척률(
Progress N%) 표시. - 의존성 화살표: 선행 작업 바 오른쪽 끝 → 현재 작업 바 왼쪽 끝, ㄱ자 경로.
3.5. 접기/펴기
- 중간 노드 레이블 클릭 → 하위 트리 접기/펴기.
- 접힌 상태에서도 보이는 노드의 행 번호는 원본 Gantt 행 번호를 유지한다.
- 접혀서 보이지 않는 노드는 의존성 화살표도 생략.
3.6. 툴바
- − / 100% / +: 일 단위 폭 축소·기본(20px/일)·확대.
- 맞춤: Body 가로 폭에 전체 기간을 맞춤.
- Download .SVG: 현재 차트를 SVG 파일로 저장. 파일명 형식:
AhaWiki.{hostname}.{pageName}.{YYYYMMDD}.{HHmmss}.svg
4. 편집 (Section Edit)
섹션 편집 진입 시 Gantt 전용 인라인 에디터(InterpreterGantt Editor)로 열린다.
- Task + Start/Ref + Est 3컬럼 그리드로 구성된다.
- depth는 별도 숫자 컬럼이 아니라 Task 셀 들여쓰기와 row
data-depth로 표현한다. - Indent/Outdent 버튼 및 Tab/Shift+Tab 단축키로 depth 조절.
- 셀/행 번호 클릭과 드래그로 행 선택, 범위 선택, 선택 묶음 이동을 수행한다.
- Ctrl+Z, Ctrl+Y, Ctrl+Shift+Z로 셀 편집·행 추가/삭제·이동·들여쓰기 변경을 Undo/Redo할 수 있다.
- 편집 후 저장하면 Gantt TSV로 직렬화되어 위키 텍스트에 반영.
5. 구현 파일
app/logics/wikis/interpreters/InterpreterGantt.scala— Scala 인터프리터app/views/Wiki/InterpreterGantt.scala.html— Twirl 템플릿app/assets/gantt.less— 스타일 (소스)app/assets/gantt.css— 컴파일된 CSSpublic/js/AhaWiki.Gantt.js— 파싱·렌더링·접기펴기·스크롤 동기화app/views/Wiki/edit.scala.html— Gantt 전용 인라인 에디터 UIpublic/js/Wiki/edit.page.js— GanttEditor 감지·편집·직렬화·Undo/Redo
6. See Also
6.1. Backlinks
6.2. Similar Pages
Similar pages by cosine similarity. Words after page name are term frequency.