Progress bar in dataview table for each note

I have a structure of a ‘Main Project’ note, which links to multiple ‘Sub Project’ notes. To get a nice overview of the progress on each sub-project I included a dataview table in the ‘Main Project’ note.

The Subproject note includes task lists and a progress bar that automatically updates using this code:

="<progress style='width: 100%; height: 20px;' value='" + (length(filter(this.file.tasks.completed, (t) => t = true)) / length(this.file.tasks)) * 100 + "' max='100'></progress>"

How can I include this same progress bar for this note in the dataview table in the Main Project note?
I have tried two methods so far without success:

  1. use a dataview key in the sub project note: Progress:: (above code)
  2. Calculate the percentage of finished tasks in the note directly in the dataview table in the Main Project note, but I haven’t been able to turn this into a progress bar…
```dataview
TABLE WITHOUT ID number as "Nr.", file.link as "Subproject", deliverable as "Deliverables", deadline as "Deadline",
(length(filter(file.tasks.completed, (t) => t = true))/length(file.tasks.total)*100) as "Progress"
FROM "4. Projects/Test001/Subprojects"
WHERE contains(file.folder, "Test001")
SORT number
2 Likes

Storing as a inline field/property in the original file seems to be the intuitive solution, but with dataview it’ll usually store the query instead of the result. So the way forward is your second alternative, that of recalculating the progress in the overall table.

So you’ll need to do the same of adding the <progress ... > thingy into the table output, and this can look a little messy, so I’ve usually added some FLATTEN steps to my query to store the intermediate values to be used in the progress bar. The following adaption is untested, but you should the gist of idea and hopefully correct if I made some typo:

```dataview
TABLE WITHOUT ID number as "Nr.",
   file.link as "Subproject", 
  deliverable as "Deliverables", 
  deadline as "Deadline",
  "<progress value='" + Progress  + "' max='100'></progress>" AS "Progress"
FROM "4. Projects/Test001/Subprojects"
WHERE contains(file.folder, "Test001")
FLATTEN (length(filter(file.tasks.completed, (t) => t = true))/length(file.tasks.total)*100) as "Progress"
SORT number
```

You can do everything up in the column definitions, but I kind of like to keep that as simple as possible. You could even calculate the entire element using a FLATTEN element, but then I tend to like to have the visual thingies in the column definitions…

Using FLATTEN I sometimes also calculate the two numbers separately, like in numberCompleted and totalTasks. This would allow for the numbers to also be used in other stuff like showing the total as 23/288 or similar. But the above should display the progress bar as you requested.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.