Progress Bar based on a page property variable

Questions & Help
1

The goal is to have a progress bar that fills based on a variable.
I’m having trouble using a page property inside a hiccup command.

I have set a page property like so:
myprop:: 300

And here is an example progress bar:
[:progress {:max 600 :value 50 }]

How would I go about replacing the value of ‘50’ in the progress bar above with ‘myprop’ page property?

2

Welcome. Consider Display Query Results in Charts

3

My use case is a bit different from the suggestions in that link, but it was a good reference. I’m trying to track my progress in learning Kanji. Here’s what I’ve come up.

  1. On a journal page set a property with the number of learned kanji so far. learned_kanji:: 416

  2. Make Queries to show the progress towards JLPT Levels.

Example for JLPT N2:

#+BEGIN_QUERY
{
  :query [:find (pull ?b [*])
          :where [?b :block/properties ?p]
                        [(get ?p :learned-kanji)]]
:view (fn [result]
          (let [total 1000 ;; Set the total value for the progress bar
                limited-result (take 1 result)] ;; Limit to a single result
            [:div
             (for [r limited-result]
               (let [progress (get-in r [:block/properties :learned-kanji])
                     progress-ratio (/ progress total)
                     progress-percent (* progress-ratio 100)
                    ;; progress-rounded (/ (Math/round (* progress-percent 10)) 10.0) ;; This breaks query view
]
                 [:div
                      [:h4 {:style {:display "inline-block" :margin-right "10px"}} "Kanji N2"]
                  ;; [:span (str "Progress: " progress-percent "%")] ;; This works but displays too many decimals
                  ;; [:span (format "%.1f" (float progress-percent)) ] ;; Format breaks query view
                  [:progress {:value progress :max total :style {:width "200px" :margin-right "4px"}}]
                  [:small (str progress "/" total)]]))]))
}
#+END_QUERY

End Result:

image

4

Nice. Concerning rounding, could achieve it through multiplication, int and division.

5

Thanks for the rounding tip!

#+BEGIN_QUERY
{
:query [
    :find (pull ?b [*])
    :where 
        [?b :block/properties ?p]
        [(get ?p :learned-kanji)]
    ]
:result-transform (fn [result]
                      (take 1 (sort-by (fn [d] (get d :block/created-at)) > result))) ;; Take only the Latest
:view (fn [result]
        (let [total 620 ;; Set the total value for the progress bar
                r (first result) ;; Get the first result directly
                progress (get-in r [:block/properties :learned-kanji])
                progress-ratio (/ progress total)
                progress-percent (* progress-ratio 100)
                progress-rounded (/ (int (+ (* progress-percent 10) 0.5)) 10.0)
            ]
            [:div
                [:h4 {:style {:display "inline-block" :margin-right "10px"}} "Kanji N3"]
                [:span (str "Progress: " progress-rounded "%")] 
                [:progress {:value progress :max total :style {:width "200px" :margin-right "4px"}}]
                [:small (str progress "/" total)]
            ]
        )
    )
}
#+END_QUERY

image

I’m having trouble now making a global variable for the property :learned-kanji
I would like it before the :query so I can use it in both :query and :view.
Is this possible in logseq?

I have tried some variations of the following with no success:

let [property-name "learned-kanji"]
:query [
    :find (pull ?b [*])
    :where 
        [?b :block/properties ?p]
        [(get ?p (keyword property-name))]
    ]
6
  • Experiment with the following:
    • in external { } :
      :inputs ["learned-kanji"]
    • in :query :
      :find ?property-name (pull ?b [*])
    • in :find :
      :keys property-name b
:in $ ?property-name
    • in :where :
      ?property-name
    • in :view :
      (get res :b)
(:property-name res)
  • The above are demonstrated e.g. here