Create a value box (server side)

This is the server-side function for creating a dynamic bs4ValueBox.

This is the UI-side function for creating a dynamic bs4ValueBox.

A beautiful AdminLTE3 value box.

Usage

renderbs4ValueBox(expr, env = parent.frame(), quoted = FALSE)

bs4ValueBoxOutput(outputId, width = 4)

bs4ValueBox(
  value,
  subtitle,
  icon = NULL,
  color = NULL,
  width = 3,
  href = NULL,
  footer = NULL,
  gradient = FALSE,
  elevation = NULL
)

valueBox(
  value,
  subtitle,
  icon = NULL,
  color = NULL,
  width = 3,
  href = NULL,
  footer = NULL,
  gradient = FALSE,
  elevation = NULL
)

valueBoxOutput(outputId, width = 4)

renderValueBox(expr, env = parent.frame(), quoted = FALSE)

Arguments

expr

An expression that returns a Shiny tag object, HTML(), or a list of such objects.

env

The parent environment for the reactive expression. By default, this is the calling environment, the same as when defining an ordinary non-reactive expression. If expr is a quosure and quoted is TRUE, then env is ignored.

quoted

If it is TRUE, then the quote()ed value of expr will be used when expr is evaluated. If expr is a quosure and you would like to use its expression as a value for expr, then you must set quoted to TRUE.

outputId

Output variable name.

width

The width of the box, using the Bootstrap grid system. This is used for row-based layouts. The overall width of a region is 12, so the default width of 4 occupies 1/3 of that width. For column-based layouts, use NULL for the width; the width is set by the column that contains the box.

value

The value to display in the box. Usually a number or short text.

subtitle

Subtitle text.

icon

An icon tag, created by icon.

color

The color of the item. This determines the item's background color. Valid colors are defined as follows:

• primary: #007bff .

• secondary: #6c757d .

• info: #17a2b8 .

• success: #28a745 .

• warning: #ffc107 .

• danger: #dc3545 .

• gray-dark: #343a40 .

• gray: #adb5bd .

• white: #fff .

• indigo: #6610f2 .

• lightblue: #3c8dbc .

• navy: #001f3f .

• purple: #605ca8 .

• fuchsia: #f012be .

• pink: #e83e8c .

• maroon: #d81b60 .

• orange: #ff851b .

• lime: #01ff70 .

• teal: #39cccc .

• olive: #3d9970 .

href

An optional URL to link to in the footer. Should both `footer` and this parameter be set, `footer` will take precedence.

footer

Optional html content for the footer of the box.

gradient

Whether to use gradient style for background color. Default to FALSE.

elevation

Value box elevation.

See also

bs4ValueBoxOutput for the corresponding UI-side function.

renderbs4ValueBox for the corresponding server-side function and examples.

Other cards: bs4CardLayout(), bs4SocialCard(), bs4TabCard(), bs4UserCard(), descriptionBlock(), renderbs4InfoBox()

Author

David Granjon, dgranjon@ymail.com

Examples

if (interactive()) {
  library(shiny)
  library(bs4Dash)

  shiny::shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(),
      sidebar = dashboardSidebar(),
      controlbar = dashboardControlbar(),
      footer = dashboardFooter(),
      title = "test",
      body = dashboardBody(
        fluidRow(
          valueBoxOutput("vbox"),
          infoBoxOutput("ibox")
        )
      )
    ),
    server = function(input, output) {
      output$vbox <- renderValueBox({
        valueBox(
          value = 150,
          subtitle = "New orders",
          color = "primary",
          icon = icon("shopping-cart"),
          href = "#"
        )
      })

      output$ibox <- renderInfoBox({
        infoBox(
          title = "Comments",
          fill = TRUE,
          gradient = TRUE,
          color = "success",
          value = 41410,
          icon = icon("comments")
        )
      })
    }
  )
}
if (interactive()) {
  library(shiny)
  library(bs4Dash)

  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(),
      sidebar = dashboardSidebar(),
      controlbar = dashboardControlbar(),
      footer = dashboardFooter(),
      title = "test",
      body = bs4DashBody(
        fluidRow(
          valueBox(
            value = 150,
            subtitle = "New orders",
            color = "primary",
            icon = icon("cart-shopping")
          ),
          valueBox(
            value = "53%",
            subtitle = "New orders",
            color = "indigo",
            icon = icon("gears"),
            footer = div("Hello World")
          ),
          valueBox(
            value = "44",
            subtitle = "User Registrations",
            color = "teal",
            icon = icon("sliders")
          )
        )
      )
    ),
    server = function(input, output) {}
  )
}