Add a new feature showing the weekly heatmap

[yodaliu0414]

Hi everybody,

I tried to modify main.js and style.css code and then implement the weekly heatmap, adding a function called "renderWeekHeatmapCalendar" next to the renderHeatmapCalendar. The modified file is attached.

It enables users to display weekly heatmap data, like this.

And here is how we call this function in Obsidian.

const propertyToShow = ["","","","" ] //Only four properties is acceptable. If you want more, please change the css file-.heatmap-week-calendar-properties,.heatmap-week-calendar-boxes - grid-template-rows- repeat 4
const calendarData = {
    year:2023,
    colors: "default",
    showCurrentDayBorder: true, // (optional) defaults to true
    defaultEntryIntensity: 4,   // (optional) defaults to 4
    intensityScaleStart: 10,    // (optional) defaults to lowest value passed to entries.intensity
    intensityScaleEnd: 100,     // (optional) defaults to highest value passed to entries.intensity
    entries: [],                // (required) populated in the DataviewJS loop below    
}

const today = new Date()
const currentDayOfWeek = today.getDay()
const currentTime = today.getTime()
const oneDayMilliseconds = 24 * 60 * 60 * 1000
const mondayOffset = ( currentDayOfWeek + 6) % 7
const nearestMondayTimestamp = currentTime - (mondayOffset * oneDayMilliseconds);
const sundayOffset = (7 - currentDayOfWeek) % 7
const nearestSundayTimestamp = currentTime + (sundayOffset * oneDayMilliseconds)
const nearestMonday = new Date(nearestMondayTimestamp);
const nearestSunday = new Date(nearestSundayTimestamp);

let filenames = [];
let currentDate = new Date(nearestMonday)

while (currentDate <= nearestSunday) 
{  
    const formattedDate = currentDate.toISOString().slice(0, 10);
    filenames.push(formattedDate);
    currentDate = new Date(currentDate.getTime() + oneDayMilliseconds)
}

const pages = []
for (const filename of filenames)
{
    const page = dv.page(`2023/${filename}.md`) ?? dv.page("2023/default.md")
    pages.push(page)
}

for (let page of pages) 
    {   
    for (let heatproperty of propertyToShow){ 
        calendarData.entries.push({ 
        date: page.file.name, 
        intensity: page[heatproperty]??0, 
        content: await dv.span(`[](${page.file.name})`)})
        }                
    }
dv.span("**Weekly Habit Tracker**")
renderWeekHeatmapCalendar(this.container, calendarData,propertyToShow)

As I'm a beginner in Javascript and CSS, there might be some errors. And also there is a limitation that user can only track 4 habits, same as the setting in css file. And if you have any suggestion, please let me know.

SelfHeatmap.zip

[dresgonzalez13]

Thanks for this! it would be great for a weekly notes review.

[Coolnaid]

I'm having trouble getting the code to work. Is it possible for you to upload an example vault or something of the sort to experiment with?