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);

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?