Format data in dataviewjs

Hello,

What I’m trying to do

I’m trying to create a dataviewjs, to list all my tasks with the remaining days to the deadline I have for each tasks. I would like to format this remaining days with color.

If I have more than 14 days => Green. Less than 14 days and more than 7 days => Yellow. And less than 7 days => Red.

Things I have tried

To be honest, it’s the first time I use dataviewjs, so I don’t know how to do it and I never use Javascript.

Here my code to list all my tasks:

dv.header(2, "Projects")

for (let group of dv.pages('"00-Tasks/Projects"').groupBy(p => p.project)) {
	dv.header(3, group.key);
	
	dv.table(["Task", "Status", "Deadline", "Remaining"],
		group.rows
			.sort(b => b.deadline, 'asc')
			.map(b => [b.file.link,
						b.status,
						b.deadline,
						Math.ceil((b.deadline - Date.now()) / (1000 * 60 * 60 * 24))]))
}

I also don’t like the line Math.ceil to calculate the remaining days.

Is it possible to have a custom table with math and color?

I try to work on a var create from dv.pages, but I’m so lost.

dv.header(2, "Projects")

const results = dv.pages('"00-Tasks/Projects"').groupBy(p => p.project)

let array = []

for (let group of results) {
	let rows = []
	for (let row of group.rows) {
		rows.push([row])
	}
	rows.push(["TestCol", "Test"])
	array.push([group.key, rows])
}

dv.paragraph(array[0])

I can’t add a simple text value…

Sorry for the double post, I don’t find how to edit my first post.

I was able to do that:

dv.header(2, "Projects")

const results = dv.pages('"00-Tasks/Projects"').groupBy(p => p.project)

let array = []

for (let group of results) {
	let allrows = []
	for (let row of group.rows) {
		if (row.deadline) {
			let deadLineJS = new Date(row.deadline)
			let now = moment()
			let deadLine = moment([deadLineJS.getFullYear(), deadLineJS.getMonth(), deadLineJS.getDate(), "18", "00", "00"])
			let diffInDays = deadLine.diff(now, 'days')
			let formatDiff = ""
			
			if (diffInDays >= 14) {
				formatDiff = "<span style=\"color: green\">" + deadLine.fromNow() + "</span>"
			}
			if (diffInDays < 14 && diffInDays >= 7) {
				formatDiff = "<span style=\"color: yellow\">" + deadLine.fromNow() + "</span>"
			}
			if (diffInDays < 7) {
				formatDiff = "<span style=\"color: red\">" + deadLine.fromNow() + "</span>"
			}
			row["Remaining"] = formatDiff
		 } else
			row["Remaining"] = null
	}
}

for (let group of results) {
	dv.header(3, group.key);
	
	dv.table(["Task", "Status", "Deadline", "Remaining", "Category", "Last Mod."],
		group.rows
			.sort(b => b.deadline, 'asc')
			.map(b => [b.file.link,
						b.status,
						b.deadline,
						b.Remaining,
						b.category,
						b.file.mtime]))
}

It works as expected.

Do you have any review on this code? I don’t find it very clean, I will work on it. But if you any advice, please let me know :slight_smile: