Add rudimentary progress bar

openpharma · Dec 4, 2024 · 54f7f55 · 54f7f55
1 parent f4a71ad
commit 54f7f55
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 0 deletions.
diff --git a/R/mod_review_forms.R b/R/mod_review_forms.R
@@ -45,6 +45,7 @@ mod_review_forms_ui <- function(id){
             label = NULL
           )
         ),
+        progress_bar(ns("progress_bar")),
         bslib::layout_columns(
           col_widths = c(11, 12),
           shiny::actionButton(
@@ -319,6 +320,21 @@ mod_review_forms_server <- function(
       showNotification("Input saved successfully", duration = 1, type = "message") 
     })
 
+    output[["progress_bar"]] <- render_progress_bar({
+      req(
+        review_data_active(),
+        active_form(),
+        session$userData$review_records[[active_form()]]
+        )
+
+      list(
+        completed = sum(review_data_active()$reviewed == "Yes"),
+        unmarking = sum(session$userData$review_records[[active_form()]]$reviewed == "No"),
+        marking = sum(session$userData$review_records[[active_form()]]$reviewed == "Yes"),
+        total = nrow(review_data_active())
+      )
+    })
+
     output[["review_header"]] <- renderText({active_form()})
 
     output[["save_review_error"]] <- renderPrint({

diff --git a/R/shiny.R b/R/shiny.R
@@ -41,3 +41,21 @@ update_cbs <- function(tblId, checked) {
     sprintf(tblId, tolower(checked), tolower(!checked)) |> 
     shinyjs::runjs()
 }
+
+progress_bar <- function(outputId) {
+  div(
+    id = outputId,
+    class = "cs-progress-bar",
+    div(class = c("cs-progress", "completed")),
+    div(class = c("cs-progress", "unmarking")),
+    div(class = c("cs-progress", "marking"))
+  )
+}
+
+render_progress_bar <- function(expr, env = parent.frame(), quoted = FALSE) {
+  func <- exprToFunction(expr, env, quoted)
+
+  function(){
+    func()
+  }
+}
diff --git a/inst/app/www/custom.css b/inst/app/www/custom.css
@@ -75,3 +75,29 @@ tr:has(td input[type="checkbox"].indeterminate:not(:indeterminate))>td {
     background-color: aquamarine;
     border-color: aquamarine;
 }
+
+div.cs-progress-bar {
+  width: 100%;
+  background-color: #b3b3b3;
+  color: #ffffff;
+  border-radius: 10px;
+  height: 10px;
+  overflow: hidden;
+  display: flex;
+}
+
+div.cs-progress-bar>div.cs-progress {
+  height: 100%;
+}
+
+div.cs-progress-bar>div.cs-progress.completed {
+  background-color: green;
+}
+
+div.cs-progress-bar>div.cs-progress.unmarking {
+  background-color: red;
+}
+
+div.cs-progress-bar>div.cs-progress.marking {
+  background-color: blue;
+}
diff --git a/inst/app/www/custom.js b/inst/app/www/custom.js
@@ -31,3 +31,21 @@ $.extend(customCheckbox, {
 });
 
 Shiny.inputBindings.register(customCheckbox);
+
+var customProgressBar = new Shiny.OutputBinding();
+
+$.extend(customProgressBar, {
+  find: function(scope) {
+    return $(scope).find("div.cs-progress-bar");
+  },
+  renderValue: function(el, data) {
+    let cmp_pct = (data.completed-data.unmarking)/data.total*100;
+    let um_pct = data.unmarking/data.total*100;
+    let m_pct = data.marking/data.total*100;
+    $('#' + el.id + " .cs-progress.completed").width(cmp_pct.toFixed(2) + "%")
+    $('#' + el.id + " .cs-progress.unmarking").width(um_pct.toFixed(2) + "%")
+    $('#' + el.id + " .cs-progress.marking").width(m_pct.toFixed(2) + "%")
+  }
+});
+
+Shiny.outputBindings.register(customProgressBar)