Value box

An opinionated (card()-powered) box, designed for displaying a value and title. Optionally, a showcase can provide for context for what the value represents (for example, it could hold a bsicons::bs_icon(), or even a shiny::plotOutput()).

Usage

value_box(
  title,
  value,
  ...,
  showcase = NULL,
  showcase_layout = showcase_left_center(),
  full_screen = FALSE,
  theme_color = "primary",
  height = NULL,
  class = NULL
)

showcase_left_center(
  width = 0.3,
  max_height = "100px",
  max_height_full_screen = 0.67
)

showcase_top_right(
  width = 0.3,
  max_height = "75px",
  max_height_full_screen = 0.67
)

Arguments

title, value

a htmltools::tag() child to display above value. If a string a provided, it's automatically wrapped in a header tag.

...

Unnamed arguments may be any htmltools::tag() children to display below value.. Named arguments become attributes on the containing element.

showcase

a htmltools::tag() child to showcase (e.g., a bsicons::bs_icon(), a plotly::plotlyOutput(), etc).

showcase_layout

either showcase_left_center() or showcase_top_right().

full_screen

If TRUE, an icon will appear when hovering over the card body. Clicking the icon expands the card to fit viewport size. Consider pairing this feature with card_body_fill() to get output that responds to changes in the size of the card.

theme_color

a theme color to use for the background color. Should match a name in the Bootstrap Sass variable $theme-colors (e.g., "secondary", "success", "danger", etc)

height

Any valid CSS unit (e.g., height="200px").

class

utility classes for customizing the appearance of the summary card. Use bg-* and text-* classes (e.g, "bg-danger" and "text-light") to customize the background/foreground colors.

width

one of the following:

A proportion (i.e., a number between 0 and 1) of available width to allocate to the showcase.
A vector of length 2 valid CSS unit defining the width of each column (for showcase_left_center() the 1st unit defines the showcase width and for showcase_top_right the 2nd unit defines the showcase width). Note that any units supported by the CSS grid grid-template-columns property may be used (e.g., fr units).

max_height, max_height_full_screen

A proportion (i.e., a number between 0 and 1) or any valid CSS unit defining the showcase max_height.

Examples


library(htmltools)

if (interactive()) {
  value_box(
    "KPI Title",
    h1(HTML("$1 <i>Billion</i> Dollars")),
    span(
      bsicons::bs_icon("arrow-up"),
      " 30% VS PREVIOUS 30 DAYS"
    ),
    showcase = bsicons::bs_icon("piggy-bank"),
    class = "bg-success"
  )
}

Usage

Arguments

See also

Examples