From c8fe446d6971e499c44af2df1170adb18763a9bf Mon Sep 17 00:00:00 2001 From: dmpe Date: Sat, 19 Mar 2016 20:05:37 +0100 Subject: [PATCH 1/4] :construction: Work In Progress of additing a progress bar in infoBox See https://github.com/rstudio/shinydashboard/issues/124 --- R/boxes.R | 11 ++++++++--- man/infoBox.Rd | 9 ++++++++- tests-manual/box.R | 17 ++++++++++++----- 3 files changed, 28 insertions(+), 9 deletions(-) diff --git a/R/boxes.R b/R/boxes.R index 4f287ec9..88f61324 100644 --- a/R/boxes.R +++ b/R/boxes.R @@ -41,7 +41,7 @@ valueBox <- function(value, subtitle, icon = NULL, color = "aqua", width = 4, #' Create an info box for the main body of a dashboard. #' -#' An info box displays a large icon on the left side, and a title, value +#' @description An info box displays a large icon on the left side, and a title, value #' (usually a number), and an optional smaller subtitle on the right side. Info #' boxes are meant to be placed in the main body of a dashboard. #' @@ -58,6 +58,10 @@ valueBox <- function(value, subtitle, icon = NULL, color = "aqua", width = 4, #' content; the icon will use the same color with a slightly darkened #' background. #' @param href An optional URL to link to. +#' @param progressBar If \code{FALSE} (the default), does not add a progress bar +#' below the \code{value} parameter. +#' @param progressBarValue A numeric value to display in the progress bar. Must +#' be between zero percent and 100 percent (without the percent sign). See examples. #' #' @family boxes #' @seealso \code{\link{box}} for usage examples. @@ -65,7 +69,7 @@ valueBox <- function(value, subtitle, icon = NULL, color = "aqua", width = 4, #' @export infoBox <- function(title, value = NULL, subtitle = NULL, icon = shiny::icon("bar-chart"), color = "aqua", width = 4, href = NULL, - fill = FALSE) { + fill = FALSE, progressBar = FALSE, progressBarValue = NULL) { validateColor(color) tagAssert(icon, type = "i") @@ -83,7 +87,8 @@ infoBox <- function(title, value = NULL, subtitle = NULL, div(class = "info-box-content", span(class = "info-box-text", title), if (!is.null(value)) span(class = "info-box-number", value), - if (!is.null(subtitle)) p(subtitle) + if (progressBar) div(progressBarValue), + if (!is.null(subtitle)) span(class = "progress-description", subtitle) ) ) diff --git a/man/infoBox.Rd b/man/infoBox.Rd index e2695477..77ee7cf1 100644 --- a/man/infoBox.Rd +++ b/man/infoBox.Rd @@ -6,7 +6,8 @@ \usage{ infoBox(title, value = NULL, subtitle = NULL, icon = shiny::icon("bar-chart"), color = "aqua", width = 4, - href = NULL, fill = FALSE) + href = NULL, fill = FALSE, progressBar = FALSE, + progressBarValue = NULL) } \arguments{ \item{title}{Title text.} @@ -33,6 +34,12 @@ content, and the \code{color} argument for the background of the icon. If \code{TRUE}, use the \code{color} argument for the background of the content; the icon will use the same color with a slightly darkened background.} + +\item{progressBar}{If \code{FALSE} (the default), does not add a progress bar +below the \code{value} parameter.} + +\item{progressBarValue}{A numeric value to display in the progress bar. Must +be between zero percent and 100 percent (without the percent sign). See examples.} } \description{ An info box displays a large icon on the left side, and a title, value diff --git a/tests-manual/box.R b/tests-manual/box.R index 53934085..10df232c 100644 --- a/tests-manual/box.R +++ b/tests-manual/box.R @@ -1,23 +1,25 @@ # A dashboard body with a row of infoBoxes and valueBoxes, and two rows of other boxes library(shiny) +library(shinydashboard) + body <- dashboardBody( - # infoBoxes + # infoBoxes -> first row fluidRow( infoBox( - "Orders", uiOutput("orderNum2"), "Subtitle", icon = icon("credit-card") + "Orders", uiOutput("orderNum2"), subtitle = "Test", icon = icon("credit-card"), + progressBar = T, fill = T, progressBarValue = uiOutput("progressBarValue") ), infoBox( - "Approval Rating", "60%", icon = icon("line-chart"), color = "green", - fill = TRUE + "Approval Rating", "60%", icon = icon("line-chart"), color = "green", fill = TRUE ), infoBox( "Progress", uiOutput("progress2"), icon = icon("users"), color = "purple" ) ), - # valueBoxes + # valueBoxes -> second row fluidRow( valueBox( uiOutput("orderNum"), "New Orders", icon = icon("credit-card"), @@ -90,6 +92,11 @@ server <- function(input, output) { paste0(input$progress, "%") }) + output$progressBarValue <- renderUI({ + numberPercent <- paste0("width: ", input$progress, "%") + div(class = "progress", div(class = "progress-bar", style = numberPercent)) + }) + output$status <- renderText({ paste0("There are ", input$orders, " orders, and so the current progress is ", input$progress, "%.") From 4613d28569849e10d3e3a5d259b6b2eef5d22d79 Mon Sep 17 00:00:00 2001 From: dmpe Date: Sun, 20 Mar 2016 15:06:40 +0100 Subject: [PATCH 2/4] code after editing a message in the PR. This uses solution number 2 --- R/boxes.R | 6 +++++- tests-manual/box.R | 10 ++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/R/boxes.R b/R/boxes.R index 88f61324..4a8dc973 100644 --- a/R/boxes.R +++ b/R/boxes.R @@ -87,7 +87,11 @@ infoBox <- function(title, value = NULL, subtitle = NULL, div(class = "info-box-content", span(class = "info-box-text", title), if (!is.null(value)) span(class = "info-box-number", value), - if (progressBar) div(progressBarValue), + # if (progressBar) div(class = "progress", div(class = "progress-bar", style = progressBarValue)), + # if (progressBar) div(class = "progress", div(class = "progress-bar", style = + # paste0("width: ", progressBarValue, "%; height: 2px;"))), + + if (progressBar) div(class = "progress", progressBarValue), if (!is.null(subtitle)) span(class = "progress-description", subtitle) ) ) diff --git a/tests-manual/box.R b/tests-manual/box.R index 10df232c..3adc6a34 100644 --- a/tests-manual/box.R +++ b/tests-manual/box.R @@ -93,8 +93,14 @@ server <- function(input, output) { }) output$progressBarValue <- renderUI({ - numberPercent <- paste0("width: ", input$progress, "%") - div(class = "progress", div(class = "progress-bar", style = numberPercent)) + # input$progress + # numberPercent <- paste0("width: ", input$progress, "%") + # div(class = "progress", div(class = "progress-bar", style = numberPercent)) + + div(class = "progress-bar", style = paste0("width: ", input$progress, "%; height: 2px;")) + # tagList(style = paste0("width: ", input$progress, "%; height: 2px;")) + + # paste0("width: ", input$progress, "%; height: 2px;") }) output$status <- renderText({ From c4b6eb9e1fd6e0f8cf01aba2a3219401c4386f01 Mon Sep 17 00:00:00 2001 From: dmpe Date: Tue, 22 Mar 2016 13:09:22 +0100 Subject: [PATCH 3/4] update after wch comments --- R/boxes.R | 13 +++---------- man/infoBox.Rd | 9 ++------- tests-manual/box.R | 9 +-------- 3 files changed, 6 insertions(+), 25 deletions(-) diff --git a/R/boxes.R b/R/boxes.R index 4a8dc973..a4206421 100644 --- a/R/boxes.R +++ b/R/boxes.R @@ -58,10 +58,7 @@ valueBox <- function(value, subtitle, icon = NULL, color = "aqua", width = 4, #' content; the icon will use the same color with a slightly darkened #' background. #' @param href An optional URL to link to. -#' @param progressBar If \code{FALSE} (the default), does not add a progress bar -#' below the \code{value} parameter. -#' @param progressBarValue A numeric value to display in the progress bar. Must -#' be between zero percent and 100 percent (without the percent sign). See examples. +#' @param progressValue Must be between 0 and 100. #' #' @family boxes #' @seealso \code{\link{box}} for usage examples. @@ -69,7 +66,7 @@ valueBox <- function(value, subtitle, icon = NULL, color = "aqua", width = 4, #' @export infoBox <- function(title, value = NULL, subtitle = NULL, icon = shiny::icon("bar-chart"), color = "aqua", width = 4, href = NULL, - fill = FALSE, progressBar = FALSE, progressBarValue = NULL) { + fill = FALSE, progressValue = NULL) { validateColor(color) tagAssert(icon, type = "i") @@ -87,11 +84,7 @@ infoBox <- function(title, value = NULL, subtitle = NULL, div(class = "info-box-content", span(class = "info-box-text", title), if (!is.null(value)) span(class = "info-box-number", value), - # if (progressBar) div(class = "progress", div(class = "progress-bar", style = progressBarValue)), - # if (progressBar) div(class = "progress", div(class = "progress-bar", style = - # paste0("width: ", progressBarValue, "%; height: 2px;"))), - - if (progressBar) div(class = "progress", progressBarValue), + if (!is.null(progressValue)) div(class = "progress", progressValue), if (!is.null(subtitle)) span(class = "progress-description", subtitle) ) ) diff --git a/man/infoBox.Rd b/man/infoBox.Rd index 77ee7cf1..df7bd744 100644 --- a/man/infoBox.Rd +++ b/man/infoBox.Rd @@ -6,8 +6,7 @@ \usage{ infoBox(title, value = NULL, subtitle = NULL, icon = shiny::icon("bar-chart"), color = "aqua", width = 4, - href = NULL, fill = FALSE, progressBar = FALSE, - progressBarValue = NULL) + href = NULL, fill = FALSE, progressValue = NULL) } \arguments{ \item{title}{Title text.} @@ -35,11 +34,7 @@ content, and the \code{color} argument for the background of the icon. If content; the icon will use the same color with a slightly darkened background.} -\item{progressBar}{If \code{FALSE} (the default), does not add a progress bar -below the \code{value} parameter.} - -\item{progressBarValue}{A numeric value to display in the progress bar. Must -be between zero percent and 100 percent (without the percent sign). See examples.} +\item{progressValue}{Must be between 0 and 100.} } \description{ An info box displays a large icon on the left side, and a title, value diff --git a/tests-manual/box.R b/tests-manual/box.R index 3adc6a34..b89e69fd 100644 --- a/tests-manual/box.R +++ b/tests-manual/box.R @@ -9,7 +9,7 @@ body <- dashboardBody( fluidRow( infoBox( "Orders", uiOutput("orderNum2"), subtitle = "Test", icon = icon("credit-card"), - progressBar = T, fill = T, progressBarValue = uiOutput("progressBarValue") + fill = T, progressValue = uiOutput("progressBarValue") ), infoBox( "Approval Rating", "60%", icon = icon("line-chart"), color = "green", fill = TRUE @@ -93,14 +93,7 @@ server <- function(input, output) { }) output$progressBarValue <- renderUI({ - # input$progress - # numberPercent <- paste0("width: ", input$progress, "%") - # div(class = "progress", div(class = "progress-bar", style = numberPercent)) - div(class = "progress-bar", style = paste0("width: ", input$progress, "%; height: 2px;")) - # tagList(style = paste0("width: ", input$progress, "%; height: 2px;")) - - # paste0("width: ", input$progress, "%; height: 2px;") }) output$status <- renderText({ From f68943644cdbcdc9fea4fd580648fca1737adad8 Mon Sep 17 00:00:00 2001 From: dmpe Date: Mon, 28 Mar 2016 20:44:22 +0200 Subject: [PATCH 4/4] second time addressing wch comments --- R/boxes.R | 5 +++-- man/infoBox.Rd | 3 ++- tests-manual/box.R | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/R/boxes.R b/R/boxes.R index a4206421..90e0be8a 100644 --- a/R/boxes.R +++ b/R/boxes.R @@ -41,7 +41,7 @@ valueBox <- function(value, subtitle, icon = NULL, color = "aqua", width = 4, #' Create an info box for the main body of a dashboard. #' -#' @description An info box displays a large icon on the left side, and a title, value +#' An info box displays a large icon on the left side, and a title, value #' (usually a number), and an optional smaller subtitle on the right side. Info #' boxes are meant to be placed in the main body of a dashboard. #' @@ -58,7 +58,8 @@ valueBox <- function(value, subtitle, icon = NULL, color = "aqua", width = 4, #' content; the icon will use the same color with a slightly darkened #' background. #' @param href An optional URL to link to. -#' @param progressValue Must be between 0 and 100. +#' @param progressValue A numeric value to display in the progress bar. +#' Must be between 0 and 100. #' #' @family boxes #' @seealso \code{\link{box}} for usage examples. diff --git a/man/infoBox.Rd b/man/infoBox.Rd index df7bd744..36f363a2 100644 --- a/man/infoBox.Rd +++ b/man/infoBox.Rd @@ -34,7 +34,8 @@ content, and the \code{color} argument for the background of the icon. If content; the icon will use the same color with a slightly darkened background.} -\item{progressValue}{Must be between 0 and 100.} +\item{progressValue}{A numeric value to display in the progress bar. +Must be between 0 and 100.} } \description{ An info box displays a large icon on the left side, and a title, value diff --git a/tests-manual/box.R b/tests-manual/box.R index b89e69fd..fd9e567b 100644 --- a/tests-manual/box.R +++ b/tests-manual/box.R @@ -9,7 +9,7 @@ body <- dashboardBody( fluidRow( infoBox( "Orders", uiOutput("orderNum2"), subtitle = "Test", icon = icon("credit-card"), - fill = T, progressValue = uiOutput("progressBarValue") + fill = TRUE, progressValue = uiOutput("progressBarValue") ), infoBox( "Approval Rating", "60%", icon = icon("line-chart"), color = "green", fill = TRUE