Skip to content

[WIP] progress bar in infoBox #135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

[WIP] progress bar in infoBox #135

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
543ee4d
Merge pull request #1 from rstudio/master
dmpe Mar 3, 2016
53160e1
Merge remote-tracking branch 'upstream/master'
dmpe Mar 19, 2016
c8fe446
:construction: Work In Progress of additing a progress bar in infoBox
dmpe Mar 19, 2016
4613d28
code after editing a message in the PR.
dmpe Mar 20, 2016
c4b6eb9
update after wch comments
dmpe Mar 22, 2016
f689436
second time addressing wch comments
dmpe Mar 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions R/boxes.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this change is unneeded.

#' (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.
#'
Expand All @@ -58,14 +58,15 @@ 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice to have a more detailed description of what this does.

#'
#' @family boxes
#' @seealso \code{\link{box}} for usage examples.
#'
#' @export
infoBox <- function(title, value = NULL, subtitle = NULL,
icon = shiny::icon("bar-chart"), color = "aqua", width = 4, href = NULL,
fill = FALSE) {
fill = FALSE, progressValue = NULL) {

validateColor(color)
tagAssert(icon, type = "i")
Expand All @@ -83,7 +84,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 (!is.null(progressValue)) div(class = "progress", progressValue),
if (!is.null(subtitle)) span(class = "progress-description", subtitle)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

span(class = "progress-description", subtitle) now uses CSS from AdminLTE which makes sure it behave correctly due to margins.

)
)

Expand Down
4 changes: 3 additions & 1 deletion man/infoBox.Rd
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 11 additions & 5 deletions tests-manual/box.R
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"),
fill = T, progressValue = uiOutput("progressBarValue")
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use TRUE and FALSE instead of T and F.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, I think it wouldn't really make sense for users to be able to enter in a numeric value when the value is static, but have to manually create a div for dynamic output here. Probably the best thing for users to do is dynamically output the entire infoBox. For this particular example, there's probably no need to make the progressValue dynamic, since no one will actually use it this way.

),
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"),
Expand Down Expand Up @@ -90,6 +92,10 @@ server <- function(input, output) {
paste0(input$progress, "%")
})

output$progressBarValue <- renderUI({
div(class = "progress-bar", style = paste0("width: ", input$progress, "%; height: 2px;"))
})

output$status <- renderText({
paste0("There are ", input$orders,
" orders, and so the current progress is ", input$progress, "%.")
Expand Down