Day Week Month Quarter Year progress bar in Dataview

sammy8146 · March 23, 2023, 4:46pm

In trying to learn a bit more about DQL and specifically about date math in DQL, I built myself a table that shows the progress of the day, week, month, quarter, and year. I thought I would share that here in case anyone is interested.

I was inspired by the Year Progress bots in Mastodon as well as this site. It wasn’t so much that there was anything wrong with those. It was more that the geek in me started to wonder if I could do it.

Also, I suspect there are more efficient ways to do this, perhaps in DataviewJS (I’m very much a beginner with JS and DataviewJS), so if there are suggestions on how to do that, please help me refine this.

I tried posting each of the sections separately, but I hit the character limit for posting. Happy to post them into the comments in a slightly more readable format if there’s interest.

In display mode, the table renders as:

2023-03-23-Book Reading - Holocron - Obsidian v1.1.16-000819

The code for the table is:


| Period  |                                                                                                                                                                          Value                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                               Day                                                                                                                                                                                                                                                                                                                                                |                                                                                                                                                                                                                                                                                                                                                              Of                                                                                                                                                                                                                                                                                                                                                              | Progress                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 Percent                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
|:-------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|   Day   |                                                                                                                                                       `= dateformat(date(now), "EEE, dd-MMM-yy")`                                                                                                                                                        |                                                                                                                                                                                                                                                                                                                                 `= dateformat(date(now), "HH")`                                                                                                                                                                                                                                                                                                                                  |                                                                                                                                                                                                                                                                                                                                                              24                                                                                                                                                                                                                                                                                                                                                              | `= "<progress max=" + 24 + "  value=" + number(dateformat(date(now), "HH")) + "> </progress>"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     `= round((number(dateformat(date(now), "HH")) / 24)*100) + " %"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
|  Week   |                                                                                                                                                         `= dateformat(date(now), "kkkk-'FW'WW")`                                                                                                                                                         |                                                                                                                                                                                                                                                                                                                                  `= dateformat(date(now), "E")`                                                                                                                                                                                                                                                                                                                                  |                                                                                                                                                                                                                                                                                                                                                              7                                                                                                                                                                                                                                                                                                                                                               | `= "<progress max=" + 7 + "  value=" + number(dateformat(date(now), "E")) + "> </progress>" `                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      `= round((number(dateformat(date(now), "E")) / 7)*100) + " %"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
|  Month  |                                                                                                                                                        `= dateformat(date(now), "MMMM '('MM')'")`                                                                                                                                                        |                                                                                                                                                                                                                                                                                                                                 `= dateformat(date(now), "dd")`                                                                                                                                                                                                                                                                                                                                  |                                                                                                                                                                                                                                                                                                                                               `= dateformat(date(eom), "dd")`                                                                                                                                                                                                                                                                                                                                                | `= "<progress max=" + dateformat(date(eom), "dd") + "  value=" + number(dateformat(date(now), "dd")) + "> </progress>"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     `=round((number(dateformat(date(now), "dd")) / number(dateformat(date(eom), "dd")))*100) + " %"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| Quarter | `= choice( (date(now) > date(2023-01-01)) AND (date(now) < date(2023-03-31)), "Q1", choice( (date(now) > date(2023-04-01)) AND (date(now) < date(2023-06-30)), "Q2", choice( (date(now) > date(2023-07-01)) AND (date(now) < date(2023-09-30)), "Q3", choice( (date(now) > date(2023-10-01)) AND (date(now) < date(2023-12-31)), "Q4", "ERROR" ) ) ) ) ` | `= choice( (date(now) > date(2023-01-01)) AND (date(now) < date(2023-03-31)), (number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-01-01), "ooo"))+1), choice( (date(now) > date(2023-04-01)) AND (date(now) < date(2023-06-30)), (number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-04-01), "ooo"))+1), choice( (date(now) > date(2023-07-01)) AND (date(now) < date(2023-09-30)), (number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-07-01), "ooo"))+1), choice( (date(now) > date(2023-10-01)) AND (date(now) < date(2023-12-31)), (number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-10-01), "ooo"))+1), "ERROR" ) ) ) ) ` | `= choice( (date(now) > date(2023-01-01)) AND (date(now) < date(2023-03-31)), (number(dateformat(date(2023-03-31), "ooo")) - number(dateformat(date(2023-01-01), "ooo"))+1), choice( (date(now) > date(2023-04-01)) AND (date(now) < date(2023-06-30)), (number(dateformat(date(2023-06-30), "ooo")) - number(dateformat(date(2023-04-01), "ooo"))+1), choice( (date(now) > date(2023-07-01)) AND (date(now) < date(2023-09-30)), (number(dateformat(date(2023-09-30), "ooo")) - number(dateformat(date(2023-07-01), "ooo"))+1), choice( (date(now) > date(2023-10-01)) AND (date(now) < date(2023-12-31)), (number(dateformat(date(2023-12-31), "ooo")) - number(dateformat(date(2023-10-01), "ooo"))+1), "ERROR" ) ) ) ) ` | `= choice( (date(now) > date(2023-01-01)) AND (date(now) < date(2023-03-31)), "<progress max=" + (number(dateformat(date(2023-03-31), "ooo")) - number(dateformat(date(2023-01-01), "ooo"))+1) + "    value=" + (number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-01-01), "ooo"))+1) + "> </progress> ", choice( (date(now) > date(2023-04-01)) AND (date(now) < date(2023-06-30)), "<progress max=" + (number(dateformat(date(2023-06-30), "ooo")) - number(dateformat(date(2023-04-01), "ooo"))+1) + "    value=" + (number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-04-01), "ooo"))+1) + "> </progress> ", choice( (date(now) > date(2023-07-01)) AND (date(now) < date(2023-09-30)), "<progress max=" + (number(dateformat(date(2023-09-30), "ooo")) - number(dateformat(date(2023-07-01), "ooo"))+1) + "    value=" + (number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-07-01), "ooo"))+1) + "> </progress>", choice( (date(now) > date(2023-10-01)) AND (date(now) < date(2023-12-31)), "<progress max=" + (number(dateformat(date(2023-12-31), "ooo")) - number(dateformat(date(2023-10-01), "ooo"))+1) + "    value=" + (number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-10-01), "ooo"))+1) + "> </progress>", "ERROR" ) ) ) ) ` | `= choice( (date(now) > date(2023-01-01)) AND (date(now) < date(2023-03-31)), (round(100*(number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-01-01), "ooo"))+1)/(number(dateformat(date(2023-03-31), "ooo")) - number(dateformat(date(2023-01-01), "ooo"))+1))) + " %", choice( (date(now) > date(2023-04-01)) AND (date(now) < date(2023-06-30)), (round(100*(number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-04-01), "ooo"))+1)/(number(dateformat(date(2023-06-30), "ooo")) - number(dateformat(date(2023-04-01), "ooo"))+1))) + " %", choice( (date(now) > date(2023-07-01)) AND (date(now) < date(2023-09-30)), (round(100*(number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-07-01), "ooo"))+1)/(number(dateformat(date(2023-09-30), "ooo")) - number(dateformat(date(2023-07-01), "ooo"))+1))) + " %", choice( (date(now) > date(2023-10-01)) AND (date(now) < date(2023-12-31)), (round(100*(number(dateformat(date(now), "ooo")) - number(dateformat(date(2023-10-01), "ooo"))+1)/(number(dateformat(date(2023-12-31), "ooo")) - number(dateformat(date(2023-10-01), "ooo"))+1))) + " %", "ERROR" ) ) ) ) ` |
|  Year   |                                                                                                                                                            `= dateformat(date(now), "kkkk")`                                                                                                                                                             |                                                                                                                                                                                                                                                                                                                             `= number(dateformat(date(now), "ooo"))`                                                                                                                                                                                                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                       `= number(dateformat(date(2023-12-31), "ooo"))`                                                                                                                                                                                                                                                                                                                                        | `= "<progress max=" + (number(dateformat(date(2023-12-31), "ooo"))) + "  value=" + (number(dateformat(date(now), "ooo"))) + "> </progress>"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                `=round(100*(number(dateformat(date(now), "ooo")) / number(dateformat(date(2023-12-31), "ooo")))) + " %"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

Sorry for the very long scroll … the math for the quarters got a bit out of hand.

jpfieber · March 24, 2023, 12:47am

Very cool, copied it to one of my pages, and though the code looked like it was going to be a disaster, came up as a beautiful graph as you displayed. Thanks!

RedeyeFR · May 3, 2023, 12:01pm

Hey there, it looks amazing but it is manual in the year definition. Do, you know of a way to make it automated with using relative date like now or even better using templater functions autocomplete it on daily note creation using daily note YYYY-MM-DD format.

sammy8146 · May 12, 2023, 6:40pm

Well this was a fun one to work on!

Sorry it took a few extra days to respond, but it took me forever to figure out how to make this work. I’m sure there are better / more elegant ways, but this one seems to work for me.

Generally speaking, I replaced the hard-coded dates (e.g. 2023-07-01) with

string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-"))

// I did not bother with the month or day fields because I don’t think they will change year-to-year.

The code for the bottom two rows of the table (quarter and year) are copied below. I would have pasted in the entire table, but that put this post WAY over the character limit for Discourse.

| Quarter  | `= choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "01", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "03", "31"), "-")))), "Q1", choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "04", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "06", "30"), "-")))), "Q2", choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "09", "30"), "-")))), "Q3", choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "10", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "12", "31"), "-")))), "Q4", "ERROR" ) ) ) ) ` | `= choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "01", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "03", "31"), "-")))), (number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "01", "01"), "-"))), "ooo"))+1), choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "04", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "06", "30"), "-")))), (number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "04", "01"), "-"))), "ooo"))+1), choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "09", "30"), "-")))), (number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-"))), "ooo"))+1), choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "10", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "12", "31"), "-")))), (number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "10", "01"), "-"))), "ooo"))+1), "ERROR" ) ) ) ) + " d" ` | `= choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "01", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "03", "31"), "-")))), (number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "03", "31"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "01", "01"), "-"))), "ooo"))+1), choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "04", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "06", "30"), "-")))), (number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "06", "30"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "04", "01"), "-"))), "ooo"))+1), choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "09", "30"), "-")))), (number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "09", "30"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-"))), "ooo"))+1), choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "10", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "12", "31"), "-")))), (number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "12", "31"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "10", "01"), "-"))), "ooo"))+1), "ERROR" ) ) ) ) + " d"` | `= choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "01", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "03", "31"), "-")))), "<progress max=" + (number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "03", "31"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "01", "01"), "-"))), "ooo"))+1) + "    value=" + (number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "01", "01"), "-"))), "ooo"))+1) + "> </progress> ", choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "04", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "06", "30"), "-")))), "<progress max=" + (number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "06", "30"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "04", "01"), "-"))), "ooo"))+1) + "    value=" + (number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "04", "01"), "-"))), "ooo"))+1) + "> </progress> ", choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "09", "30"), "-")))), "<progress max=" + (number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "09", "30"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-"))), "ooo"))+1) + "    value=" + (number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-"))), "ooo"))+1) + "> </progress>", choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "10", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "12", "31"), "-")))), "<progress max=" + (number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "12", "31"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "10", "01"), "-"))), "ooo"))+1) + "    value=" + (number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "10", "01"), "-"))), "ooo"))+1) + "> </progress>", "ERROR" ) ) ) ) ` | `= choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "01", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "03", "31"), "-")))), (round(100*(number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "01", "01"), "-"))), "ooo"))+1)/(number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "03", "31"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "01", "01"), "-"))), "ooo"))+1))) + " %", choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "04", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "06", "30"), "-")))), (round(100*(number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "04", "01"), "-"))), "ooo"))+1)/(number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "06", "30"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "04", "01"), "-"))), "ooo"))+1))) + " %", choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "09", "30"), "-")))), (round(100*(number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-"))), "ooo"))+1)/(number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "09", "30"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "07", "01"), "-"))), "ooo"))+1))) + " %", choice( (date(now) > date(string(join(list(string(dateformat(date(now), "yyyy")), "10", "01"), "-")))) AND (date(now) < date(string(join(list(string(dateformat(date(now), "yyyy")), "12", "31"), "-")))), (round(100*(number(dateformat(date(now), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "10", "01"), "-"))), "ooo"))+1)/(number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "12", "31"), "-"))), "ooo")) - number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "10", "01"), "-"))), "ooo"))+1))) + " %", "ERROR" ) ) ) ) ` |
|   Year   |                                                                                                                                                                                                                                                                                                                                                                                                                            `= dateformat(date(now), "kkkk")`                                                                                                                                                                                                                                                                                                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             `= number(dateformat(date(now), "ooo")) + " d"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       `= number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "12", "31"), "-"))), "ooo")) + " d"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `= "<progress max=" + (number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "12", "31"), "-"))), "ooo"))) + "  value=" + (number(dateformat(date(now), "ooo"))) + "> </progress>"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |   `=round(100*(number(dateformat(date(now), "ooo")) / number(dateformat(date(string(join(list(string(dateformat(date(now), "yyyy")), "12", "31"), "-"))), "ooo")))) + " %"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |

LMK if that works or if there are better ways to do it.

sammy8146 · May 12, 2023, 8:02pm

Sorry, totally missed the second half of the question.

To use the Templater plugin, I think the thing to do is start with the table I posted originally (not the adjustment I posted just above) and then replace every instance of 2023 with:

<% tp.date.now("YYYY") %>

On note creation the Templater plugin should run the code above and replace it with the current year.

I was not able to test this, so a few things I think might be watch-outs:

will Templater execute within a code block and/or a markdown table
if the plugin being used is not Templater, then the syntax of the code above might need to be adjusted
the Templater code pasted above uses YYYY as the format token. It works on my system as expected, but some engines differentiate by case (yyyy versus YYYY).

If you do get it to work, would you mind posting back here? I’d be interested to hear how and/or what changes needed to be made, mainly for my own learning and education. Thx.

RedeyeFR · May 14, 2023, 1:25pm

Hey there, thanks for the answer. I’ll try my way at doing it using my understanding of Luxon Tokens from dataview. I recon the hardest is going to be quarters, as there is no way to find the “day of quarter” easily with Luxon as far as I know. That’s why your table is huge I guess, didn’t look much into it yet.

I’ll elaborate a solution using date(now) for a main note, and then a solution using templater daily note with a standard “YYYY-MM-DD” format.

RedeyeFR · May 14, 2023, 7:26pm

Alright here is my solution :

EDIT : For visualisation, feel free to copy the table inside this webpage.

| Period  | Actual                                        | Now                                                                                         | End                                                                                                          | Progress                                                                                                                                                                                                                                                    | Percent                                                                                                                                                                                                                            |
|---------|-----------------------------------------------|---------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Day     | `= dateformat(date(now), "EEEE, dd-MM-yyyy")` | `= dateformat(date(now), "HH")`                                                             | 24                                                                                                           | `= "<progress max=" + 24 + "  value=" + number(dateformat(date(now), "HH")) + "> </progress>"`                                                                                                                                                              | `= round((number(dateformat(date(now), "HH")) / 24)*100) + " %"`                                                                                                                                                                   |
| Week    | `= dateformat(date(now), "kkkk-'W'WW")`       | `= dateformat(date(now), "E")`                                                              | 7                                                                                                            | `= "<progress max=" + 7 + "  value=" + number(dateformat(date(now), "E")) + "> </progress>" `                                                                                                                                                               | `= round((number(dateformat(date(now), "E")) / 7)*100) + " %"`                                                                                                                                                                     |
| Month   | `= dateformat(date(now), "kkkk-MM")`          | `= dateformat(date(now), "dd")`                                                             | `= dateformat(date(eom), "dd")`                                                                              | `= "<progress max=" + dateformat(date(eom), "dd") + "  value=" + number(dateformat(date(now), "dd")) + "> </progress>"`                                                                                                                                     | `=round((number(dateformat(date(now), "dd")) / number(dateformat(date(eom), "dd")))*100) + " %"`                                                                                                                                   |
| Quarter | `= dateformat(date(now), "kkkk-'Q'q")`        | `$= dv.date("now").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1` | `$= dv.date("now").endOf("quarter").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1` | `$= "<progress max=" + (dv.date("now").endOf("quarter").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1) + "  value=" + (dv.date("now").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1) + "> </progress>"` | `$= Math.round(((dv.date("now").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1) / (dv.date("now").endOf("quarter").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1))*100) + " %"` |
| Year    | `= dateformat(date(now), "kkkk")`             | `= dateformat(date(now), "ooo")`                                                            | `= dateformat(date(eoy), "ooo")`                                                                             | `= "<progress max=" + dateformat(date(eoy), "ooo") + "  value=" + number(dateformat(date(now), "ooo")) + "> </progress>"`                                                                                                                                   | `=round((number(dateformat(date(now), "ooo")) / number(dateformat(date(eoy), "ooo")))*100) + " %"`                                                                                                                                 |

What changes ? I’m using basically the same things but used standardised literal expression for months and years.

I also used some inline Javascript to make it work with quarters.

Start of current quarter :

$= dv.date("now").startOf("quarter").toFormat("ooo")

Actual day in year :

$= dv.date("now").toFormat("ooo")

End of current quarter :

$= dv.date("now").endOf("quarter").toFormat("ooo")

Days spent in current quarter (+1 is needed because we take two amounts in days and substract them) :

$= dv.date("now").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1

Current quarter length (+1 is needed because we take two amounts in days and substract them) :

$= dv.date("now").endOf("quarter").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1

Progress bar :

$= "<progress max=" + (dv.date("now").endOf("quarter").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1) + " value=" + (dv.date("now").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1) + "> </progress>"

Percentage :

$= Math.round(((dv.date("now").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1) / (dv.date("now").endOf("quarter").toFormat("ooo") - dv.date("now").startOf("quarter").toFormat("ooo") + 1))*100) + " %"

In the end, I talked to a Dovos on the Dataview plugin Discord. Here is another method using Javascript entirely :

 function newDiff(date1, date2) {
    let years = date1.diff(date2, 'year');
    date2.add(years, 'years');
    let months = date1.diff(date2, 'months');
    date2.add(months, 'months');
    let days = date1.diff(date2, 'days');
    date2.add(days, 'days');
    let hours = date1.diff(date2, 'hours');
    date2.add(hours, 'hours');
    let minutes = date1.diff(date2, 'minutes');
    date2.add(minutes, 'minutes');
    let seconds = date1.diff(date2, 'seconds');
    let resultArray = []
    if (years) resultArray.push(`${years} years`)
    if (months) resultArray.push(`${months} months`)
    if (days) resultArray.push(`${days} days`)
    if (hours) resultArray.push(`${hours} hours`)
    if (minutes) resultArray.push(`${minutes} minutes`)
    //if (seconds) resultArray.push(`${seconds} seconds`)
    const resultString = resultArray.join(', ')
    return  resultString;
};
function newBar(start, end, now){
    const value = Number(((now- start)*100)/(end-start)).toFixed("2")
    const remTime = newDiff(moment(end), moment(now))
    return "<progress value='" + value + "' max='100'></progress>" + 
        "<span>" + value + "% &nbsp;| &nbsp;" + remTime + " left</span>"
}
function liveBar(start, end, now){
    const value = Number(((now- start)*100)/(end-start)).toFixed("2")
    const remTime = newDiff(moment(end), moment(start))
    return "<progress value='" + value + "' max='100'></progress>" + 
        "<span> Live &nbsp;| &nbsp;" + remTime + " went by</span>"
}

const data = []
data.push(["Day", newBar(dv.date("today").toMillis(), dv.date("tomorrow").toMillis(), dv.date("now").toMillis())])
data.push(["Week", newBar(dv.date("sow").toMillis(), dv.date("eow").toMillis(), dv.date("now").toMillis())])
data.push(["Month", newBar(dv.date("som").toMillis(), dv.date("eom").toMillis(), dv.date("now").toMillis())])
data.push(["Quarter", newBar(DateTime.fromFormat(dv.date("now").toFormat("yyyy-qq"), "yyyy-qq").toMillis(), DateTime.fromFormat(dv.date("now").plus({quarter: 1}).toFormat("yyyy-qq"), "yyyy-qq").toMillis(), dv.date("now").toMillis())])
data.push(["Year", newBar(dv.date("soy").toMillis(), dv.date("eoy").toMillis(), dv.date("now").toMillis())])

dv.table(["Name", "Bar"], data)

Hope it helps, I learned a lot o/

holroy · May 14, 2023, 8:26pm

I’m thinking that instead of doing this using inline dataviewjs, I would rather build the entire thing using dataviewjs, but that’s another story. Still it’s kind of cool to see what you’ve achieved here.

I just wanted to show that you’re able to use variables within even inline dataviewjs query, if you also use semicolons. Using this the progress bar for the quarter would look like:

`$= const D= dv.date("now"), SoQ= D.startOf("quarter").toFormat("o"), EoQ= D.endOf("quarter").toFormat("o"); "<progress max=" + (EoQ - SoQ + 1) + " value=" + (D.toFormat("o") - SoQ + 1) + "> </progress>"`

Is it necessary to use variables? Maybe not, but it does make the logic a little clearer I think. And especially if you were to do more of this within a single script, I would store the various alternatives in variables, so as to not needing to recalculate them over and over again.

sammy8146 · May 14, 2023, 9:20pm

Oh this is much more succinct than the way I was doing it, esp with the JS portions for quarter. I’ve been trying to learn dvJS, so these two examples are going to really help there, too.

I’m so glad I posted this.

sammy8146 · May 14, 2023, 9:24pm

Thanks so much for this.

I could not for the life of me figure out how to set variables in an inline DQL. That’s what led me down the nested choice statements.

This will help me refactor some of the code I use in other places, too.

RedeyeFR · May 15, 2023, 7:25am

That’s exactly why I searched for an answer. My gf looked at me like “why the hell you’re learning to do that anyway ?”.

I said “Have you ever been in a situation where there’s no answer online and the only forum talking about the exact same thing doesn’t have any answer ? Maybe not, but I hate that”.

I’m sure it’ll helps people down the line, and it’s fun, so that’s it !

Thanks for the inline variable tip btw!

paoloap · January 11, 2024, 7:31am

it worked for me also, like a charm!

thanks a lot buddy

kaveh · February 9, 2024, 6:55am

Many thanks for sharing!

Below is the version I settled on, which is a combination of the pure JavaScript example, with some Markdown.

I tried to make it as efficient as possible, by saving multiple calls to variables. I also removed anything that was unused. I considered removing the years calculation, but left it in there for the very rare instance that you may be looking at the table at midnight exactly on new years day (based on some testing, I’m pretty sure this might show a remaining time of “1 year”).

Finally, I used the ternary operator inline to make sure the plural or singular form of the duration was used, based on the value (i.e., “1 month” versus “2 months”).

function newDiff(date1, date2) {
    let years = date1.diff(date2, 'years');
    date2.add(years, 'years');
    let months = date1.diff(date2, 'months');
    date2.add(months, 'months');
    let days = date1.diff(date2, 'days');
    date2.add(days, 'days');
    let hours = date1.diff(date2, 'hours');
    date2.add(hours, 'hours');
    let minutes = date1.diff(date2, 'minutes');
    let resultArray = [];
    if (years) resultArray.push(`${years} year${(years>1)?"s":""}`);
    if (months) resultArray.push(`${months} month${(months>1)?"s":""}`);
    if (days) resultArray.push(`${days} day${(days>1)?"s":""}`);
    if (hours) resultArray.push(`${hours} hour${(hours>1)?"s":""}`);
    if (minutes) resultArray.push(`${minutes} minute${(minutes>1)?"s":""}`);
    const resultString = resultArray.join(', ');
    return  resultString;
};

function newBar(start, end, now){
    const value = Number(((now-start)*100)/(end-start)).toFixed("2");
    const remTime = newDiff(moment(end), moment(now));
    return "<progress value='" + value + "' max='100'></progress> | " + value + " % |  " + remTime;
}

const now = dv.date("now");
const nowMillis = now.toMillis();

dv.span(`
|  | Progress | Percentage | Remaining |
| --- | --- |:---:|:---:|
| **Day** | ${newBar(dv.date("today").toMillis(), dv.date("tomorrow").toMillis(), nowMillis)} |
| **Week** | ${newBar(dv.date("sow").toMillis(), dv.date("eow").toMillis(), nowMillis)} |
| **Month** | ${newBar(dv.date("som").toMillis(), dv.date("eom").toMillis(), nowMillis)} |
| **Quarter** | ${newBar(DateTime.fromFormat(now.toFormat("yyyy-qq"), "yyyy-qq").toMillis(), DateTime.fromFormat(now.plus({quarter: 1}).toFormat("yyyy-qq"), "yyyy-qq").toMillis(), nowMillis)} |
| **Year** | ${newBar(dv.date("soy").toMillis(), dv.date("eoy").toMillis(), nowMillis)} |
`);

Ni-zav · March 26, 2025, 6:05am

this is really helpful, I did not know it has already been asked and done before until I need it. Great works!