corinnekaryiu / obsidian-habit-mood-tracker Goto Github PK
View Code? Open in Web Editor NEWObsidian Habit & Mood Tracker
Obsidian Habit & Mood Tracker
Hi,
Thanks for this repo! It's a nice example which encouraged me to set up my own implementation.
In my setup, I have my daily notes stored in the "daily" folder in Obsidian, and the habit tracking part looks like this:
### Tracker
- [ ] habit 1
- [ ] habit 2
etc.
One thing that I wanted to modify compared to your example was to automatically pick up any new items added to the tracker without a code change. Here's how I did it:
const calendarDataTemplate = {
year: moment().year(),
colors: {
"x": ["#228B22", "#228B22", "#228B22", "#228B22", "#228B22"],
"-": ["#FF0000", "#FF0000", "#FF0000", "#FF0000", "#FF0000"],
">": ["#696969", "#696969", "#696969", "#696969", "#696969"]
},
intensityScaleStart: 1,
intensityScaleEnd: 5,
showCurrentDayBorder: true
}
// This above is mostly the same as in your example, but the enties part is omitted.
// I've added showCurrentDayBorder, as I think that's quite useful here.
// I'm going to use this calendarDataTemplate as a template below
// I broke things apart a bit, just to make things a bit more readable.
// So I'm loading my daily notes from the "daily" folder...
const pages = dv.pages('"daily"').file
// ...and filter it down for tasks in the tracker section, but not checking
// whether the tasks are completed - at this stage, I need even the non-complete ones
const trackerTasks = pages.tasks.where(p => String(p.section).includes("Tracker"))
// I'm going to store the calendar entries per habit in this:
const calendarEntriesPerHabit = {}
for (const task of trackerTasks.values) {
// If the habit in the current task is not yet in the entries,
// I'm adding it with an empty array
if (!(task.text in calendarEntriesPerHabit)) {
calendarEntriesPerHabit[task.text] = []
}
// If the task is not incomplete, I'm adding it to the earlier entries
if (task.status !== ' ') {
calendarEntriesPerHabit[task.text].push({
date: task.path.split("/").pop().replace(".md", ""),
color: task.status,
intensity: 5
})
}
}
// At this stage I should have a complete dict with all the occurrences per habit, ...
for (const habit in calendarEntriesPerHabit) {
// ...so all that's left is to put a header with a habit name...
dv.el('h3', habit)
// ...and to render the heatmap for the given habit, constructing
// the calendar data from the template + the entries
renderHeatmapCalendar(this.container, {
...calendarDataTemplate,
entries: calendarEntriesPerHabit[habit]
})
}
This nicely renders the habit heatmaps one by one without having to duplicate code.
Not an issue, but I couldn't find another way to get in touch.
I love this habit tracker; it's exactly what I have been looking for. Thank you so much for creating it.
How can I send over a donation, just as a thank you? Do you have a Buy me a Coffee profile or anything similar?
I also wonder if it would be possible to track time rather than just check/uncheck in the habit tracker. I see that it's possible in the Heatmap plugin, but I have no idea how to implement the code in your much prettier and more functional version.
Thank you again :)
Could you post an example vault? For those of us who are new to Obsidian.
Thanks for sharing your templates. Most work for me after following your examples, however the mood chart does not. Does it need to be updated or does it still work for you?
Evaluation Error: TypeError: window.renderChart is not a function
at eval (eval at <anonymous> (plugin:dataview), <anonymous>:66:8)
at DataviewInlineApi.eval (plugin:dataview:19669:16)
at evalInContext (plugin:dataview:19670:7)
at asyncEvalInContext (plugin:dataview:19680:32)
at DataviewJSRenderer.render (plugin:dataview:19701:19)
at DataviewJSRenderer.onload (plugin:dataview:19285:14)
at DataviewJSRenderer.e.load (app://obsidian.md/app.js:1:730611)
at t.e.addChild (app://obsidian.md/app.js:1:731035)
at t.addChild (app://obsidian.md/app.js:1:1646061)
at Object.addChild (app://obsidian.md/app.js:1:1645086)
Hi
I see that the days are missing from the heatmap (tue, thu, sat).
Is this something you removed yourself or is this a bug in heatmap?
best regards, Richard (heatmap plugin creator)
Hi,
I have been using your code happily for several weeks, but it sadly has stopped working. The screenshot will show you what I mean. Most of the squares in June were filled in for each of the sections. I know that the heatmaps plugin just updated and it stopped working then. Is it still working for you?
Thanks,
Jack
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.