Example of progress visualization via background color.
Problem: I wanted to visualize project progress, but printing just test looks boring and HTML progress element is actually an input which looks redundant. The idea is to use background color under project name, so it doesn’t take extra space. I followed the prototype you can check on StackOverflow.
DataviewJS:
// project icon, status etc comes from note frontmatter
// you may different props
const projects = dv.pages('"Backlog" and #project').sort(project => project.icon, 'desc');
for (let project of projects) {
const total = project.file.tasks.length;
const completed = project.file.tasks.filter((task) => task.completed).length;
const rootEl = await dv.el('div', '', { cls: 'x-project-status' });
const progressEl = rootEl.createEl('div', { cls: 'x-progress', attr: { 'data-label': project.file.name } });
progressEl.createEl("a", { cls: 'x-percentage-fill', attr: { style: 'width:' + (completed / total * 100) + "%;" } });
progressEl.createEl("a", { text: '↗', cls: 'x-link', attr: {
href: project.file.link.path,
'data-href': project.file.link.path,
'aria-label': project.file.link.path,
'aria-label-position': 'top',
target: '_blank',
rel: 'noopener'
} });
progressEl.createEl("span", { text: completed + ' / ' + total, cls: 'x-stat' } );
rootEl.createEl("span", { text: project.icon + ' ' + project.status, cls: 'x-metadata' } );
}
CSS:
.x-project-status {
display: flex;
flex-direction: row;
align-items: center;
}
.x-project-status>.x-progress {
height: 2em;
width: 40em;
background-color: #f6f8fa;
position: relative;
}
.x-project-status>.x-progress:before {
content: attr(data-label);
position: absolute;
text-align: left;
top: 5px;
left: 5px;
right: 0;
}
.x-project-status>.x-progress>.x-percentage-fill {
background-color: #dafbe1;
display: inline-block;
height: 100%;
}
.x-project-status>.x-progress>.x-link {
position: absolute;
text-align: right;
top: 5px;
right: 5px;
text-decoration: none;
color: #0969da;
}
.x-project-status>.x-progress>.x-stat {
position: absolute;
text-align: right;
top: 5px;
right: 2em;
color: #57606a;
font-size: 0.8em;
}
.x-metadata {
padding-left: 10px;
font-size: 0.9em;
}
Result:
