obsidian-completion-map.js

let stepSize = 40;
let bigStepSize = 200;
if (app.isMobile) {
	stepSize = 15;
	bigStepSize = 100;
}

let completeSquare = '🟩';
let notCompleteSquare = '⬛';

let results = [];
let pages = dv.pages('"JobHunting/LeetCode/Problems"');
for (let page of pages) {
	let link = page.file.link;
	link.display = completeSquare;
	let rank = parseInt(page.file.name.slice(0, 4));
	if (rank) {
		results.push({
			rank: rank,
			name: page.file.name,
			link: page.file.link
		});
	}
}
results.sort((a, b) => a.rank - b.rank);

let current = 0;
let mapList = [];
for (let result of results) {
	for (let i = 0; i < result.rank - current - 1; i++) {
		mapList.push(notCompleteSquare);
	}
	mapList.push(result.link);
	current = result.rank;
}

let displayString = '';
for (let i = 0; i < mapList.length; i = i + stepSize) {
	let startBigStep = Math.ceil((i) / bigStepSize);
	let endBigStep = Math.ceil((i + stepSize) / bigStepSize);

	if (endBigStep > startBigStep) {
		displayString += ((endBigStep - 1) * bigStepSize).toString().padStart(4, ' ');
	} else {
		displayString += ' '.repeat(4);
	}

	displayString += ' ' + mapList.slice(i, i + stepSize).join('') + '<br>';
}

dv.el('pre', displayString);

Obsidian Completion Graph

I wrote this script to display my completion of LeetCode problems. Requires Obsidian and Dataview plugin, with dataviewjs enabled.

Instruction

1. Create a code block and set the language to dataviewjs, then copy all the code and paste into it.
2. Change pages to the path you want (or the filter you want).
3. Make sure you name the notes like 0123 lorem.md.
4. Tailor the settings (or the code itself) to meet your specific needs.

Showcase