Skip to content
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

[WIP] progress bar in infoBox #135

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 all 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
7 changes: 5 additions & 2 deletions R/boxes.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,16 @@ 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 A numeric value to display in the progress bar.
#' Must be between 0 and 100.
#'
#' @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 +85,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
5 changes: 4 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 = TRUE, progressValue = 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"),
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