Obsidian Chart Sleep Tracker

view.js

let pages = dv
	.pages('#DailyNote')
	.filter(p => p.date.day != undefined)
	.filter(p => p.sleepStart != undefined)
	.sort(p => p.date);

if (input.range) pages = pages.slice(input.range * -1);

let timeDate = pages.date;
const ratingData = pages.rating;
const sleepStart = pages.sleepStart;
const sleepEnd = pages.sleepEnd;
const sleepRatingData = pages.sleepRating;

const sleepStartStop = sleepStart.values.map((value, index) => {
	return [value, sleepEnd.values[index]];
});

const sleepStartStopNumber = sleepStart.values.map((value, index) => {
	let start =
		(parseInt(value.split(':')[0]) * 60 + parseInt(value.split(':')[1])) / 60;
	if (start > 20) {
		start = start - 24;
	}

	const end =
		(parseInt(sleepEnd.values[index].split(':')[0]) * 60 +
			parseInt(sleepEnd.values[index].split(':')[1])) /
		60;

	return [start, end];
});

const sleepTime = sleepStartStop.map(value => {
	let startDate = moment();
	const endDate = moment('2022-06-16T' + value[1]);

	const startHour = parseInt(value[0].split(':')[0]);
	if (startHour > 16) {
		startDate = moment('2022-06-15T' + value[0]);
	} else {
		startDate = moment('2022-06-16T' + value[0]);
	}

	return endDate.diff(startDate, 'minutes') / 60;
});

timeDate = timeDate.values.map(e => `${e.day}/${e.month}/${e.year}`);

const chartData = {
	beginAtZero: true,

	data: {
		labels: timeDate,
		datasets: [
			{
				yAxisID: 'A',
				type: 'line',
				label: 'Rating',
				data: ratingData.values,
				borderColor: ['rgb(255, 99, 132)'],
				borderWidth: 1,
			},
			{
				yAxisID: 'A',
				type: 'line',
				label: 'Sleep Duration',
				data: sleepTime,
				borderColor: ['rgb(54, 162, 235)'],
				borderWidth: 1,
			},
			{
				yAxisID: 'A',
				type: 'line',
				label: 'Sleep Rating',
				data: sleepRatingData.values,
				borderColor: ['rgb(255, 206, 86)'],
				borderWidth: 1,
			},
			{
				yAxisID: 'B',
				type: 'bar',
				label: 'Sleep',
				data: sleepStartStopNumber,
				backgroundColor: ['rgb(153, 102, 255, 0.2)'],
				borderColor: ['rgb(153, 102, 255, 1)'],
				borderWidth: 1,
			},
		],
	},
	options: {
		tooltips: {
			callbacks: {
				label: function (t, d) {
					return 'FFFF';
				},
			},
		},
		scales: {
			A: {
				type: 'linear',
				position: 'left',
				beginAtZero: true,
				min: 0,
			},
			B: {
				type: 'linear',
				position: 'right',
				max: 13,
				min: -3,

				ticks: {
					fontSize: 40,
					count: 17,
					maxTicksLimit: 20,
					callback: function (value, index, ticks) {
						if (value < 0) {
							value = 24 + value;
						}
						let minutes = value * 60;
						let hours = Math.floor(minutes / 60);
						minutes = minutes % 60;

						if (minutes < 10) {
							minutes = '0' + minutes;
						}
						if (hours < 10) {
							hours = '0' + hours;
						}

						return hours + ':' + minutes;
					},
				},
			},
			x: {
				ticks: {
					maxRotation: 90,
					minRotation: 90,
				},
			},
		},
	},
};

input.func(chartData, dv.container);

Preview

Insertion

```dataviewjs
const settings = {
	func: window.renderChart,
	range: 7
}
await dv.view("Utils/Views/SleepTracker", settings);
```

Your workflow is the most complete I have found. How can i set this up?

The script requires the Obsidian charts plugin to display the charts.
You have to enter your sleep data into every daily note.
sleepStart: 23:00 and sleepEnd: 07:00
and place the script inside your vault.
Inside any note, you can then insert the dataviewjs codeblock. Make sure to update the Path to the SleepTracker Script.

And how can I set the rating, sleep rating and sleep duration?

The duration is calculated the rating is rating and sleepRating

I have dataview and obsidian charts installed.
I downloaded the view.js file and put it in my vault.
I use the query you posted in my case it looks like this

const settings = {
	func: window.renderChart,
	range: 7
}
await dv.view("Atlas/Utilities/Templates", settings);

I use #DailyNote in my daily note.
And I'm using these parameters

• sleepStart: 23:00
• rating: 5
• sleepRating:2
• sleepEnd: 07:00
  My daily notes use this template named YYYYY-MM-dd (2023-08-15)
  I have these errors:

Dataview: Failed to execute view 'Atlas/Utilities/Templates/view.js'.
TypeError: Cannot read properties of undefined (reading 'day')

What am I doing wrong?

Oh sorry every note of my daily notes has a date field that just has the day in YYYY-MM-dd format.
The script will also check if it is a daily note by searching for a #DailyNote tag.

I already managed to render and it worked as planned. Thank you.
I want to do a little change in the script. I hope you can help me out.
I want to enter the start date manually, to decide the date range of the plot.
In this line --> let startDate = moment(); I want to be able to pass the date in my note so the script can take it as a parameter and render based on the start date I enter.

This startDate is not the first entry of the graph. You have to filter your input for a specific date range to achive this I think.
You can try something like this:
https://gist.github.com/YukiGasai/82829809daa0b488fd16bc7e9c82b6c2#file-view-js-L1-L5

view.js
let pages = dv
	.pages('#DailyNote')
	.filter(p => p.date.day != undefined)
	.filter(p => p.sleepStart != undefined)
        .filter(p => window.moment(p.date.day).isAfter(window.moment(input.start) && window.moment(p.date.day).isBefore(window.moment(input.end))
	.sort(p => p.date)

you have to add start and end to the args in the dataview block

Thank you. Can you show me how to pass the args in the dataview block?

const settings = {
	func: window.renderChart,
	range: 7,
	start: "2023-11-01", <--
	end: "2023-11-03", <--
}
await dv.view("Atlas/Utilities/Templates", settings);

Hi bro thanks for all your help. Now the code compiles well but the graph is not showing. The reason I think is because this filter: .filter(p => window.moment(p.date.day).isAfter(window.moment(input.start.day)) never return data to the pages variable. If I not put it the data come well. I debug my dates in console and I dont see an error. Ex 2023-10-25.isAfter(2023-10-20) as start date but I dont recieve data after the filter. I hope you can give me an idea of what is happening

	startDate = moment('2022-06-15T' + value[0]);
} else {
	startDate = moment('2022-06-16T' + value[0]);
	
	Do you use templater here?

Preview

Insertion

```dataviewjs
const settings = {
	func: window.renderChart,
	range: 7
}
await dv.view("Utils/Views/SleepTracker", settings);

What is the difference between rating and sleeprating?

Does your weekly note have the same date format as the daily note?

	startDate = moment('2022-06-15T' + value[0]);
} else {
	startDate = moment('2022-06-16T' + value[0]);
	
	Do you use templater here?

Preview

Insertion

```dataviewjs
const settings = {
	func: window.renderChart,
	range: 7
}
await dv.view("Utils/Views/SleepTracker", settings);

The code is not using templater at all it only requires dataview and the chart.js plugin to render the graph.

What is the difference between rating and sleeprating?

Rating is how good the day was sleep rating how well I slept

Does your weekly note have the same date format as the daily note?

I don't have a weekly note

Thanks for helping me =)

Got it! 🙂

const configsono = {
    func: window.renderChart,
    startDate: <% moment(tp.file.title,"[S]ww-gggg").day(0).format("DD-MM-YYYY") %> 
    endDate: <% moment(tp.file.title,"[S]ww-gggg").add(1,'weeks').day(0).format("DD-MM-YYYY") %>
}
await dv.view("Dispensa/Views/SonoUnificado", configSono)

Script

https://github.com/lucasbcgeo/sonorepository/blob/main/SonoUnificado

I have dataview and obsidian charts installed. I downloaded the view.js file and put it in my vault. I use the query you posted in my case it looks like this

const settings = {
	func: window.renderChart,
	range: 7
}
await dv.view("Atlas/Utilities/Templates", settings);

I use #DailyNote in my daily note. And I'm using these parameters

• sleepStart: 23:00
• rating: 5
• sleepRating:2
• sleepEnd: 07:00
  My daily notes use this template named YYYYY-MM-dd (2023-08-15)
  I have these errors:

Dataview: Failed to execute view 'Atlas/Utilities/Templates/view.js'. TypeError: Cannot read properties of undefined (reading 'day')

What am I doing wrong?

hi, there, I have the same question as you. So I want you give me a hand with this. and I have created a .md file, which like this

test001

date: 2023-05-06
sleepStart: 23:00
rating: 5
sleepRating:2
sleepEnd: 07:00

#DailyNote

best regards. thx.

This startDate is not the first entry of the graph. You have to filter your input for a specific date range to achive this I think. You can try something like this: https://gist.github.com/YukiGasai/82829809daa0b488fd16bc7e9c82b6c2#file-view-js-L1-L5

view.js
let pages = dv
	.pages('#DailyNote')
	.filter(p => p.date.day != undefined)
	.filter(p => p.sleepStart != undefined)
        .filter(p => window.moment(p.date.day).isAfter(window.moment(input.start) && window.moment(p.date.day).isBefore(window.moment(input.end))
	.sort(p => p.date)

you have to add start and end to the args in the dataview block

I applied the filter you recommended in view.js and the configuration in const settings as you indicated. The problem I have is that it generates an empty graph. It seems that the filter does not index the data within the set range. What is the cause? And how can I fix it?

Got it! 🙂

const configsono = {
    func: window.renderChart,
    startDate: <% moment(tp.file.title,"[S]ww-gggg").day(0).format("DD-MM-YYYY") %> 
    endDate: <% moment(tp.file.title,"[S]ww-gggg").add(1,'weeks').day(0).format("DD-MM-YYYY") %>
}
await dv.view("Dispensa/Views/SonoUnificado", configSono)

Script

https://github.com/lucasbcgeo/sonorepository/blob/main/SonoUnificado

I see that your implementation is different from the original script. But you use other variables, I can't get it to work. In your implementation does it filter on a specific range?
Could you give me some instructions to make it work please. Maybe you can change the variables to the original variables of the script to avoid confusions?
These are the original script variables

sleepStart: 21:00
sleepEnd: 05:00
sleepRating: "9"
rating: 8
date: 2025-03-17
tags:

• DailyNote

---

Thank you for your feedback.

Maybe someone who has already done it can pass me the implementation in a zip file of the vault?