옵시디언 심화: 간트 차트(Gantt Chart)

개요

Mermaid의 기능중 하나인 간트 차트(Gantt Chart)는 프로젝트 일정관리를 위한 바(bar)형태의 도구로서, 각 업무별로 일정의 시작과 끝을 그래픽으로 표시하여 전체 일정을 한눈에 볼 수 있습니다.

 

Gantt diagrams | Mermaid

간트 차트 예시

```mermaid
gantt
    title 간트 차트
    dateFormat YYYY-MM-DD
    section 섹션
        할일1        :a1, 2024-01-01, 30d
        할일2        :after a1, 20d
    section 섹션2
        나중에 할일  :2024-02-12, 12d
        나중에 할일2 :24d
```

Dataviewjs + Gantt chart

간트 차트의 문법과 입력방식의 까다로움 등으로 인해 사용하기엔 많이 불편합니다. 하지만 Dataview를 이용해 비교적 간단하게  간트 차트를 출력할 수 있습니다.

프로퍼티 설정

---
startdate: 2024-02-12
duedate: 2024-02-20
---

각 노트에 startdate, duedate를 입력합니다.

Dataview 스크립트

```dataviewjs
const now = new Date();
const startOfWeek = new Date(now.setDate(now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1)));
const endOfWeek = new Date(startOfWeek);
endOfWeek.setDate(endOfWeek.getDate() + 6);

const projects = dv.pages('"폴더명"')
  .where(p => p.duedate && (p.startdate <= endOfWeek && p.duedate >= startOfWeek))
  .sort(p => p.duedate, 'desc');

const mermaidConf = `mermaid
gantt
    dateFormat  D-M-YYYY
    axisFormat %m-%d
    todaymarker on`;

let tasks = "";
projects.forEach(page => {
  const title = page.file.name;
  const startDate = page.startdate ? `${page.startdate.day}-${page.startdate.month}-${page.startdate.year}` : 'unknown';
  const dueDate = page.duedate ? `${page.duedate.day}-${page.duedate.month}-${page.duedate.year}` : 'unknown';

  tasks += `    ${title} : ${startDate}, ${dueDate}\n`;
});

const backticks = "```";

dv.paragraph(
  `${backticks}${mermaidConf}
${tasks}
${backticks}`
);

```

dv.pages('"폴더명"')에서 폴더를 설정하거나 dv.pages('#태그명')처럼 태그명을 설정합니다.

 

관련 링크

옵시디언 심화: Mermaid

Dataview 기초: 소개

---