Richardsl / heatmap-calendar-obsidian

An Obsidian plugin for displaying data in a calendar similar to the github activity calendar
Apache License 2.0
623 stars 103 forks source link

Add up multiple entries per day (Sum) #21

Closed tedblizzard100 closed 2 years ago

tedblizzard100 commented 2 years ago

Thank you so much for this work. I love using your heatmaps. One question I had is there a way to ADD up multiple entries. For example, if you are doing something more than once a day (like eating or even writing). I keep a sepreate daily log file by time for each day. I added a Nutrution heatmap (see below) but I want to add all entrest on one day together. Thank you for your help.


dv.span("** Nutrition **")

const calendarData = { 
    entries: [], // Populated in the DataviewJS loop below
    year: 2022,  // (optional) Defaults to current year
    colors: {    // (optional) Defaults to green
      blue:        ["#8cb9ff","#69a3ff","#428bff","#1872ff","#0058e2"], // first entry is considered default if supplied
      green:       ["#c6e48b","#7bc96f","#49af5d","#2e8840","#196127"],
      red:         ["#ff9e82","#ff7b55","#ff4d1a","#e73400","#bd2a00"],
      orange:      ["#ffa244","#fd7f00","#dd6f00","#bf6000","#9b4e00"],
      pink:        ["#ff96cb","#ff70b8","#ff3a9d","#ee0077","#c30062"],
      orangeToRed: ["#ffdf04","#ffbe04","#ff9a03","#ff6d02","#ff2c01"],
      blackgreenred: ["#efffeb","#c5e59f","#86f202","#fd7777","#ff0000"]

    },
    showCurrentDayBorder: true // (optional) Defaults to true
}

//DataviewJS loop
for(let page of dv.pages('"Daily-Document"').where(p=>p.Nutrition).sort(p=>p.file.name)){ 

    calendarData.entries.push({
        date: page.file.name, // (required) Format YYYY-MM-DD
        intensity: page.Nutrition, // (required) Color intensity for entry, will map intensities automatically
        content: "", // (optional) Add text to the date cell
        color: "blackgreenred", // (optional) Reference from *calendarData.colors*. If no color is supplied; colors[0] is used
    })

}

/**
* param1  HTMLElement   DOM reference for calendar rendering
* param2  CalendarData  Calendar data object from above
*/
renderHeatmapCalendar(this.container, calendarData)
agnoldo commented 2 years ago

Dear @tedblizzard100 , good morning/afternoon/evening. I just faced the same situation here in my vault and I was able to solve the problem with some tricky Javascript. I'll share only the important part:

let groups = dv.pages().where(YOUR_FILTERS).groupBy(DATE_GROUPING_CLAUSE);
let max = Math.max.apply(Math, groups.map(function(o) { return o.rows.length; })); // calculates the maximum number of notes on a single day

for (let group of groups) {
    calendarData.entries.push({
        date: group.key, // (required) Format YYYY-MM-DD
        intensity: (120 * group.rows.length / max), // (required) the data you want to track, will map color intensities automatically
        // the line above normalizes the amount of notes throughout the heatmap
        content: group.rows.length, // (optional) Add text to the date cell - I USED HERE THE NUMBER OF NOTES
        color: "blue", // (optional) Reference from *calendarData.colors*. If no color is supplied; colors[0] is used
    })
}

I hope this helps!

tedblizzard100 commented 2 years ago

Thank you so much @agnoldo I appreciate your help and will dig into this code.