Greetings,
I was inspired by this post Progress bar for notes. I thought I could use same method to track my tasks that scatter around different page.
However, I found the information kind of all around the internet, so I gather (hopefully) all the information you need to set up progress bar to track your to-do list or task, even if they are in different page!
Also this is my first guide so feel free to comment if you have any suggestion.
Plugin Requirement:
DataView: Turn on “Enable JavaScript Query” and “Enable JavaScript Inline Query”
MetaEdit: Turn on “Progress Properties” and add properties “Total” and “Completed” like this:
Construct Metadata:
You need a metadata like this:
MetaEdit will update the “Total” and “Completed” value if you complete tasks or add new tasks.
Code:
If you have tasks from different pages:
Replace “#tag” with the tag which pages containing tasks you want to track.
Replace “folder” with the folder which pages containing tasks from.
`$= const Pages = dv.pages('"folder" and #tag');const value = Math.round(Pages.Completed.values.reduce((a,b)=>a+b,0) / Pages.Total.values.reduce((a,b)=>a+b,0) * 100);"<progress value='" + value + "' max='100'></progress> " + value + "%" `
dv.pages() can also do many other thing. You can also use dv.pages('#tag1 and #tag2')
to find all pages with tag1 and tag2 or dv.pages('#tag1') to find all pages with tag1.
See full references:
https://blacksmithgu.github.io/obsidian-dataview/api/code-reference/#dvpagessource
If you have tasks from a single page:
Replace YourPage to your page name.
Alternatively, if your task is at the same page, you can replace dv.page("YourPage") with dv.current() , so that you don’t need to change the code if you change page’s name.
`$= const Page = dv.current();const value = Math.round(Page.Completed / Page.Total * 100);"<progress value='" + value + "' max='100'></progress> " + value + "%" `
Change Progress Bar Color
You need a snippet.css file. To create one, head to Settings → Appearance → CSS snippets → open snippets folder(the folder icon) → Create a .css file there(name doesn’t matter) → back to Appearance tab → Enable the .css file you just created
Open your .css file (Notepad can open it). Paste the code below:
progress[value] {
appearance: none;
width: 100%;
height: 18px;
}
progress::-webkit-progress-bar {
background-color: #453474 ;
border-radius: 7px;
}
progress::-webkit-progress-value {
background-color: rgb(0, 236, 118);
border-radius: 7px;
}
You can edit the value as you like.
Also, The color value can be:
background-color: green/*Other color name works too*/
background-color: #74992e
background-color: rgb(0,0,0)
background-color: rgba(0,0,0,0)
background-color: hsl(0,0,0)
background-color: hsla(0,0,0,0)
See full reference:
background-color - CSS: Cascading Style Sheets | MDN (mozilla.org)
That’s all! Hope you learn something! Thank you for reading!
And feel free ask in comment or share your progress bar style (cuz I suck at designing and I need some idea XD).