Heatmap broke when upgrading 0.2 -> 0.3 (still broken on 0.5)

[IanQS]

Hi there! It seems like one of the updates in the main.js caused my heatmap to stop displaying.

Here it is working with main.js from 0.2:

and here is when I update main.js to what is on 0.3

I'd love to get your insight into what might be causing this. The issue persists on light mode theme as well so presumably it's not the styling

[PaperOrb]

Hi, I can confirm I'm having the same issue. Same issue on 0.5 as well. It looks like my metadata is no longer being displayed in the heatmap:

[Richardsl]

Hi, sorry to hear that. Can you show me your code for the calendars? I can maybe try to replicate the issue, as it seems to work with me.

also, if you try to print out the metadata by adding a dv.paragraph like the example below, does it display any data?

dv.span("**🍺 Alcohol Consumption 🍺**")

const calendarData = {
    entries: [],
}
for(let page of dv.pages('"daily notes"').where(p=>p.alcohol).sort(p=>p.file.name)){
    dv.paragraph(page.file.name + " Alcohol units: " + page.alcohol) 
        calendarData.entries.push({
            date: page.file.name,
            intensity: page.alcohol,
    })  
}

renderHeatmapCalendar(this.container, calendarData)

expected result:

[ninjannette]

Hi, I'm having the same issue now. Just downloaded this codeblock and opened as a new vault with Dataview, style snippets, Daily Notes and calendar enabled just in case. But its appearing as blank calendars like this despite the presence of the sample vault periodic notes-

[Richardsl]

what operating system are you using? what timezone are you in?

[IanQS]

I'm using arch linux and I'm on GMT-7 (Los Angeles time)

[Richardsl]

is dataviewjs itself generally working? independently from heatmap?

[IanQS]

Yeap! I'm able to do things like log file names and such to the console

[lovwyr]

I can confirm the behavior on an System with German Language settings. But from what i can say its only happening if intensity is set on the Entrys.

[Richardsl]

what version of obsidian are you guys running? I can't seem to replicate the error. I've tried reinstalling on an ubuntu distro on a VM aswell, but everything seems to be working fine

[lovwyr]

0.15.4 on my side,

a little bit digging around later :), after the calendarData.entries.filter has run the calEntries Array is completly empty for whatever Reasons...

[Richardsl]

what is the name format of your daily note? YYYY-MM-DD ?

[Richardsl]

I made a few changes - hopefully it will fix the issue, but im not sure since i can't replicate the bug. Please update to 0.5.1 and keep me posted :)

[IanQS]

I can now see the entries! I can't hover and have the Obsidian-metatables show up, but I can see the entries again! P.s my mouse IS hovering, but my screenshot software ignores me mouse (??)

My code looks like

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

for(let page of dv.pages('"journals"').where(p=>p.exercise).sort(p=>p.file.name)){
    let color = "red"
    if (page.exercise < 10){
        color = "red"
    } 
    calendarData.entries.push({
        date: page.file.name,
        color: color,
        content: await dv.span(`[](${page.file.name})`)
    })   
}

renderHeatmapCalendar(this.container, calendarData)

My daily note format is MMM D, YYYY. Does any of you know how to change hte default parsing format by any chance? JS isn't my forte and I'm confused as to how to parse it. It's not clear to me how it works at all and why it breaks on this seemingly simple change. The same for obsidian-metatable

[Richardsl]

Great hopefully this fixed it for everyone :) @lovwyr @ninjannette @PaperOrb ??

The plugin really doesn't support any other format than YYYY-MM-DD, but if it works for you thats great.
Preview on hover needs to be enabled in obsidian settings, and you might need to hold down ctrl whilst hovering if its not enabled.

you can see how to format the date here: https://github.com/Richardsl/heatmap-calendar-obsidian/discussions/2

[lovwyr]

I can confirm that it is fixed with the new version. I had found another small problem during testing: passing the year as a string to the constructor also causes the rendering to fail but an quick dv.parse() can fix this 😄

ps) newer dataview versions expose the luxon api, so a .toISODate() should normally be sufficient for the date of the entrys

[IanQS]

@lovwyr is your "hover" working? Can you tell me what settings you're using? Mine isn't working even when I hold the CTRL button :( is your date format the same as what @Richardsl mentioned?

[lovwyr]

@IanQS yes its "working", i normaly dont use it in my usecase.

the page.Published source formt was already ISO 8601 Published: "2022-03-04"

working content: await dv.span("[["+page.file.name+"]]"),

not reliable working (disrupts rendering in some cases) content: await dv.span(🔗),

---

dv.span("**intensity On**")

const calendarData = {
    entries: [],
}

for(let page of dv.pages('"storys"').where(p=>p.Title)){
    console.log({page});
    var heatdate = page.Published.toISODate();
    calendarData.entries.push({
        date: heatdate,
        intensity: page.moneySpent, 
        content: await dv.span("[["+page.file.name+"]]"),         
    })  
    console.log({calendarData});
}

renderHeatmapCalendar(this.container, calendarData)

[Jinnayah]

I'm still having this problem on some, but not all, of my heatmaps. It seems to be breaking if the intensity values don't vary except for on and off. Heatmap version 0.5.1, Obsidian 0.15.6

Here's an example where I was able to take a functioning map, and break it by changing the intensity to a set number.

This code failed when all of my 'spinning' entries were 0 or 1, but worked when I changed one entry to '2':

[IanQS]

@Jinnayah can you post the code in text as opposed to images? Makes it easier to copy paste

[Jinnayah]

@IanQS The code for the two 'Extended Chores examples' is:

dv.span("**Extended Chores**")

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

for(let page of dv.pages('"Daily/2022"').where(p=>p.extended_chores).sort(p=>p.file.name)){
    calendarData.entries.push({
        date: page.file.name,
        intensity: page.extended_chores
    })

}

renderHeatmapCalendar(this.container, calendarData)

dv.span("**Extended Chores Test**")

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

for(let page of dv.pages('"Daily/2022"').where(p=>p.extended_chores).sort(p=>p.file.name)){
    calendarData.entries.push({
        date: page.file.name,
        intensity: 3
    })

}

renderHeatmapCalendar(this.container, calendarData)

And for the spinning example:

dv.span("**🧶 Spinning**")

const calendarData = {
    year: 2022,
    entries: []
}

for(let page of dv.pages('"Daily/2022"').where(p=>p.spinning).sort(p=>p.file.name)){
    calendarData.entries.push({
        date: page.file.name,
        intensity: page.spinning
    })   
}

renderHeatmapCalendar(this.container, calendarData)

[Richardsl]

released a new version, should be ok now.

[Jinnayah]

That took care of it. :)