GitHub의 잔디와 유사한 히트맵을 그려주는 Heatmap Calendar 플러그인

개요

Heatmap Calendar는 추적하고자하는 데이터를 모아 히트맵 캘린더(GitHub 의 잔디같은 것)를 작성하는 플러그인입니다. 이 플러그인은 운동, 재정, 취미, 습관, 사회적 활동, 프로젝트 진행 등 다양한 목표를 향한 진행 상황을 추적하는 데 유용합니다. DataviewJS와 함께 사용해야 됩니다.

Plugin Info

플러그인 명	Heatmap Calendar
플러그인 설명	GitHub의 잔디와 유사한 히트맵 캘린더
플러그인 분류	일정 관리, Habit Tracker
Github 링크	Github 링크
옵시디언 링크	플러그인 링크
별점	⭐

기능

사용 방법

1. 추적하고자 하는 데이터를 데일리 노트에 Dataview Inline Fields형식으로 추가합니다.

## Habits
- exercise:: 0
- moneySpent:: 0

2. 히트맵 캘린더를 표시하고 싶은 곳에 DataviewJS 블록을 생성합니다.

```dataviewjs
dv.span("**🏋️ Exercise 🏋️**")

const calendarData = {
    colors: {
        red: ["#ff9e82","#ff7b55","#ff4d1a","#e73400","#bd2a00",]
    },
    entries: []
}

for(let page of dv.pages('"daily notes"').where(p=>p.exercise)){
    calendarData.entries.push({
        date: page.file.name,
        intensity: page.exercise,
        content: await dv.span(`[](${page.file.name})`), //for hover preview
    })

}

renderHeatmapCalendar(this.container, calendarData)
```

```dataviewjs
dv.span("**💸 Money Spent 💸**")

const calendarData = {
    entries: [],
}

for(let page of dv.pages('"daily notes"').where(p=>p.moneySpent)){

    calendarData.entries.push({
        date: page.file.name,
        intensity: page.moneySpent,
        content: await dv.span(`[](${page.file.name})`), //for hover preview
    })  
}

renderHeatmapCalendar(this.container, calendarData)
```

예제

```dataviewjs
dv.span("** 😊 Title  😥**") /* 제목 선택사항 */
const calendarData = {
    year: 2024,  // (선택사항) 기본값은 현재 연도입니다
    colors: {    // (선택사항) 기본값은 녹색입니다
        // 첫 번째 항목이 제공되면 기본값으로 간주됩니다
        blue:        ["#8cb9ff", "#69a3ff", "#428bff", "#1872ff", "#0058e2"],
        green:       ["#c6e48b", "#7bc96f", "#49af5d", "#2e8840", "#196127"],
        // 추가 색상 옵션
    },
    showCurrentDayBorder: true, // (선택사항) 기본값은 true입니다
    defaultEntryIntensity: 4,   // (선택사항) 기본값은 4입니다
    intensityScaleStart: 10,    // (선택사항) 기본값은 entries.intensity에 전달된 최소값입니다
    intensityScaleEnd: 100,     // (선택사항) 기본값은 entries.intensity에 전달된 최대값입니다
    entries: [],                // (필수) DataviewJS 루프 아래에서 채워집니다
}

for (let page of dv.pages('"daily notes"').where(p => p.exercise)) { // 데일리 노트 폴더 설정(기본값: daily notes)
    // 페이지 파일 이름을 기준으로 데이터 추가
    calendarData.entries.push({
        date: page.file.name,     // (필수) YYYY-MM-DD 형식
        intensity: page.exercise, // (필수) 추적하려는 데이터, 색상 강도는 자동으로 매핑됩니다
        content: "🏋️",           // (선택사항) 날짜 셀에 텍스트 추가
        color: "orange",          // (선택사항) *calendarData.colors*에서 참조. 색상이 제공되지 않으면 colors[0]이 사용됩니다
    })
}

renderHeatmapCalendar(this.container, calendarData)
```

더 많은 예제는 예제 볼트를 참고하세요.

설정 옵션

Colors

기본적으로 캘린더는 GitHub과 마찬가지로 녹색을 사용합니다. 하지만 calendarData.colors에 색상을 제공하는 경우, 첫 번째 인덱스가 새로운 기본 색상으로 간주됩니다.

글로벌 색상 추가

설정에서 글로벌 색상 스키마를 추가할 수 있습니다. 렌더링 호출 시 colors 옵션에 이름을 전달하여 어디에서나 참조할 수 있습니다.

Intensity

Intensity는 사용할 색상의 강도를 의미하며, Intensity에 전달된 최고값과 최저값 사이에 분포됩니다. 예를 들어, 범위가 0-100인 경우, 1-20 사이의 숫자는 가장 연한 색상에, 40-60은 중간 강도의 색상에, 80-100은 최대 강도의 색상에 매핑됩니다.

 

---