Merge pull request #388 from swsoyee/add-commas-to-progressBar

feat: add commas in value and total of progressBar

R/progressBars.R

@@ -12,6 +12,7 @@
 #' @param striped logical, add a striped effect.
 #' @param title character, optional title.
 #' @param range_value Default is to display percentage (\code{[0, 100]}), but you can specify a custom range, e.g. \code{-50, 50}.
+#' @param commas logical, add commas on total and value.
 #' @param unit_mark Unit for value displayed on the progress bar, default to \code{"\%"}.
 #'
 #' @return A progress bar that can be added to a UI definition.
@@ -90,6 +91,7 @@ progressBar <- function(id,
                         striped = FALSE,
                         title = NULL,
                         range_value = NULL,
+                        commas = TRUE,
                         unit_mark = "%") {
   if (!is.null(total)) {
     percent <- round(value / total * 100)
@@ -110,12 +112,20 @@ progressBar <- function(id,
     )
   }
 
+  if(commas) {
+    value_for_display <- prettyNum(value, big.mark = ",", scientific = FALSE)
+    total_for_display <- prettyNum(total, big.mark = ",", scientific = FALSE)
+  } else {
+    value_for_display <- value
+    total_for_display <- total
+  }
+
   if (!is.null(total)) {
     total <- tags$span(
       class = "progress-number",
-      tags$b(value, id = paste0(id, "-value")),
+      tags$b(value_for_display, id = paste0(id, "-value")),
       "/",
-      tags$span(id = paste0(id, "-total"), total)
+      tags$span(id = paste0(id, "-total"), total_for_display)
     )
   }
 
@@ -156,7 +166,8 @@ progressBar <- function(id,
 #' @rdname progress-bar
 updateProgressBar <- function(session, id, value, total = NULL,
                               title = NULL, status = NULL,
-                              range_value = NULL, unit_mark = "%") {
+                              range_value = NULL, commas = TRUE,
+                              unit_mark = "%") {
   message <- "update-progressBar-shinyWidgets"
   if (!is.null(range_value)) {
     percent <- rescale(x = value, from = range_value, to = c(0, 100))
@@ -177,6 +188,7 @@ updateProgressBar <- function(session, id, value, total = NULL,
       total = if (is.null(total)) -1 else total,
       title = title,
       status = status,
+      commas = commas,
       unit_mark = unit_mark
     )
   )

inst/assets/progress-bars/progress-bars-bindings.js

@@ -13,9 +13,9 @@ Shiny.addCustomMessageHandler("update-progressBar-shinyWidgets", function(
   if (total > 0) {
     pct = Math.round((value / total) * 100);
     if (elVal !== null)
-      elVal.innerText = value;
+      elVal.innerText = data.commas ? value.toLocaleString("en-US") : value;
     if (elTot !== null)
-      elTot.innerText = total;
+      elTot.innerText = data.commas ? total.toLocaleString("en-US") : total;
     value = Math.round((value / total) * 100);
   } else {
     pct = data.percent > 0 ? data.percent : value;

inst/assets/shinyWidgets.css

@@ -1,6 +1,6 @@
 
 
-/* CSS icone btn */
+/* CSS checkbox buttons for icons */
 
 
 .btn.checkbtn:focus {
@@ -24,6 +24,15 @@
 }
 
 
+.btn.checkbtn.disabled > .check-btn-icon-yes {
+	pointer-events: none;
+}
+.btn.checkbtn.disabled > .check-btn-icon-no {
+	pointer-events: none;
+}
+
+
+
 
 
 /*
@@ -37,6 +46,106 @@
 
 
 
+
+/* CSS radio buttons for icons */
+
+
+.btn.radiobtn:focus {
+  outline: none !important;
+}
+
+.btn.radiobtn .radio-btn-icon-yes {
+	opacity: 0;
+	display: none;
+}
+.btn.radiobtn.active .radio-btn-icon-yes {
+	opacity: 1;
+	display: inline-block;
+}
+
+.btn.radiobtn.active .radio-btn-icon-no {
+	opacity: 0;
+	display: none;
+}
+.btn.radiobtn .radio-btn-icon-no {
+	opacity: 1;
+	display: inline-block;
+}
+
+.btn.radiobtn.disabled > .radio-btn-icon-yes {
+	pointer-events: none;
+}
+.btn.radiobtn.disabled > .radio-btn-icon-no {
+	pointer-events: none;
+}
+
+
+
+
+/* Option 1 */
+/*
+.btn.radiobtn span.glyphicon-unchecked {
+	opacity: 1; display: inline-block;
+}
+.btn.radiobtn.active span.glyphicon-unchecked {
+	opacity: 1; display: none;
+}
+
+.btn.radiobtn span.glyphicon-check {
+	opacity: 1; display: none;
+}
+.btn.radiobtn.active span.glyphicon-check {
+	opacity: 1; display: inline-block;
+}
+*/
+
+
+
+/* Option 2*/
+/*
+.btn.radiobtn span.glyphicon-remove {
+	opacity: 1; display: inline-block;
+}
+.btn.radiobtn.active span.glyphicon-remove {
+	opacity: 1; display: none;
+}
+
+.btn.radiobtn span.glyphicon-ok {
+	opacity: 1; display: none;
+}
+.btn.radiobtn.active span.glyphicon-ok {
+	opacity: 1; display: inline-block;
+}
+*/
+
+
+/* Option 3*/
+/*
+.btn.radiobtn span.glyphicon-ok.blank.hide {
+	opacity: 0; display: none;
+}
+.btn.radiobtn.active span.glyphicon-ok.blank.hide {
+	opacity: 0; display: inline-block;
+}
+.btn.radiobtn span.glyphicon-ok.blank {
+	opacity: 0; display: none;
+}
+.btn.radiobtn.active span.glyphicon-ok.blank {
+	opacity: 1; display: inline-block;
+}
+*/
+
+/* Option 4*/
+/*
+.btn.radiobtn span.glyphicon-check.blank {
+	opacity: 0; display: none;
+}
+.btn.radiobtn.active span.glyphicon-check.blank {
+	opacity: 1; display: inline-block;
+}
+*/
+
+
 /* http://bootsnipp.com/snippets/8deZ */
 
 
@@ -203,95 +312,3 @@
     background: inherit;
     left: 20px;
 }
-
-
-/* CSS icone btn */
-
-
-.btn.radiobtn:focus {
-  outline: none !important;
-}
-
-.btn.radiobtn .radio-btn-icon-yes {
-	opacity: 0; display: none;
-}
-.btn.radiobtn.active .radio-btn-icon-yes {
-	opacity: 1; display: inline-block;
-}
-
-.btn.radiobtn.active .radio-btn-icon-no {
-	opacity: 0; display: none;
-}
-.btn.radiobtn .radio-btn-icon-no {
-	opacity: 1; display: inline-block;
-}
-
-
-
-
-
-
-
-/* Option 1 */
-/*
-.btn.radiobtn span.glyphicon-unchecked {
-	opacity: 1; display: inline-block;
-}
-.btn.radiobtn.active span.glyphicon-unchecked {
-	opacity: 1; display: none;
-}
-
-.btn.radiobtn span.glyphicon-check {
-	opacity: 1; display: none;
-}
-.btn.radiobtn.active span.glyphicon-check {
-	opacity: 1; display: inline-block;
-}
-*/
-
-
-
-/* Option 2*/
-/*
-.btn.radiobtn span.glyphicon-remove {
-	opacity: 1; display: inline-block;
-}
-.btn.radiobtn.active span.glyphicon-remove {
-	opacity: 1; display: none;
-}
-
-.btn.radiobtn span.glyphicon-ok {
-	opacity: 1; display: none;
-}
-.btn.radiobtn.active span.glyphicon-ok {
-	opacity: 1; display: inline-block;
-}
-*/
-
-
-/* Option 3*/
-/*
-.btn.radiobtn span.glyphicon-ok.blank.hide {
-	opacity: 0; display: none;
-}
-.btn.radiobtn.active span.glyphicon-ok.blank.hide {
-	opacity: 0; display: inline-block;
-}
-.btn.radiobtn span.glyphicon-ok.blank {
-	opacity: 0; display: none;
-}
-.btn.radiobtn.active span.glyphicon-ok.blank {
-	opacity: 1; display: inline-block;
-}
-*/
-
-/* Option 4*/
-/*
-.btn.radiobtn span.glyphicon-check.blank {
-	opacity: 0; display: none;
-}
-.btn.radiobtn.active span.glyphicon-check.blank {
-	opacity: 1; display: inline-block;
-}
-*/
-

inst/assets/uglify.R

@@ -31,14 +31,14 @@ bindings_files <- paste(unlist(bindings_files), collapse = "\n")
 library("js")
 bindings_files <- uglify_optimize(text = bindings_files)
 
-writeLines(text = bindings_files, con = "inst/www/shinyWidgets-bindings.min.js")
+writeLines(text = bindings_files, con = "inst/assets/shinyWidgets-bindings.min.js")
 
 
 
 # css ----
 
 # all files
-css_files <- list.files(path = "inst/www/", pattern = "\\.css$", full.names = TRUE, recursive = TRUE)
+css_files <- list.files(path = "inst/assets/", pattern = "\\.css$", full.names = TRUE, recursive = TRUE)
 
 # keep the ones not integrated via a widgets
 css_files <- css_files[
@@ -57,7 +57,7 @@ css_files <- lapply(css_files, paste, collapse = "\n")
 css_files <- paste(unlist(css_files), collapse = "\n")
 
 # write them all
-writeLines(text = css_files, con = "inst/www/shinyWidgets.css")
+writeLines(text = css_files, con = "inst/assets/shinyWidgets.css")
 
 # go here to minify the file
 # https://cssminifier.com/