shinydashboard: Create Dashboards with 'Shiny'

Description

Create dashboards with 'Shiny'. This package provides a theme on top of 'Shiny', making it easy to create attractive dashboards.

Author(s)

Maintainer: Winston Chang winston@posit.co

Authors:

• Barbara Borges Ribeiro

Other contributors:

• Posit Software, PBC [copyright holder]

• Almasaeed Studio (AdminLTE theme for Bootstrap) [contributor, copyright holder]

• Adobe Systems Incorporated (Source Sans Pro font) [contributor, copyright holder]

See Also

Useful links:

• https://rstudio.github.io/shinydashboard/

• https://github.com/rstudio/shinydashboard

• Report bugs at https://github.com/rstudio/shinydashboard/issues

Create a box for the main body of a dashboard

Description

Boxes can be used to hold content in the main body of a dashboard.

Usage

box(
  ...,
  title = NULL,
  footer = NULL,
  status = NULL,
  solidHeader = FALSE,
  background = NULL,
  width = 6,
  height = NULL,
  collapsible = FALSE,
  collapsed = FALSE
)

Arguments

See Also

Other boxes: infoBox(), tabBox(), valueBox()

Examples

## Only run this example in interactive R sessions
if (interactive()) {
library(shiny)

# A dashboard body with a row of infoBoxes and valueBoxes, and two rows of boxes
body <- dashboardBody(

  # infoBoxes
  fluidRow(
    infoBox(
      "Orders", uiOutput("orderNum2"), "Subtitle", icon = icon("credit-card")
    ),
    infoBox(
      "Approval Rating", "60%", icon = icon("line-chart"), color = "green",
      fill = TRUE
    ),
    infoBox(
      "Progress", uiOutput("progress2"), icon = icon("users"), color = "purple"
    )
  ),

  # valueBoxes
  fluidRow(
    valueBox(
      uiOutput("orderNum"), "New Orders", icon = icon("credit-card"),
      href = "http://google.com"
    ),
    valueBox(
      tagList("60", tags$sup(style="font-size: 20px", "%")),
       "Approval Rating", icon = icon("line-chart"), color = "green"
    ),
    valueBox(
      htmlOutput("progress"), "Progress", icon = icon("users"), color = "purple"
    )
  ),

  # Boxes
  fluidRow(
    box(status = "primary",
      sliderInput("orders", "Orders", min = 1, max = 2000, value = 650),
      selectInput("progress", "Progress",
        choices = c("0%" = 0, "20%" = 20, "40%" = 40, "60%" = 60, "80%" = 80,
                    "100%" = 100)
      )
    ),
    box(title = "Histogram box title",
      status = "warning", solidHeader = TRUE, collapsible = TRUE,
      plotOutput("plot", height = 250)
    )
  ),

  # Boxes with solid color, using `background`
  fluidRow(
    # Box with textOutput
    box(
      title = "Status summary",
      background = "green",
      width = 4,
      textOutput("status")
    ),

    # Box with HTML output, when finer control over appearance is needed
    box(
      title = "Status summary 2",
      width = 4,
      background = "red",
      uiOutput("status2")
    ),

    box(
      width = 4,
      background = "light-blue",
      p("This is content. The background color is set to light-blue")
    )
  )
)

server <- function(input, output) {
  output$orderNum <- renderText({
    prettyNum(input$orders, big.mark=",")
  })

  output$orderNum2 <- renderText({
    prettyNum(input$orders, big.mark=",")
  })

  output$progress <- renderUI({
    tagList(input$progress, tags$sup(style="font-size: 20px", "%"))
  })

  output$progress2 <- renderUI({
    paste0(input$progress, "%")
  })

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

  output$status2 <- renderUI({
    iconName <- switch(input$progress,
      "100" = "ok",
      "0" = "remove",
      "road"
    )
    p("Current status is: ", icon(iconName, lib = "glyphicon"))
  })


  output$plot <- renderPlot({
    hist(rnorm(input$orders))
  })
}

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    body
  ),
  server = server
)
}

The main body of a dashboard page.

Description

The main body typically contains box()es. Another common use pattern is for the main body to contain tabItems().

Usage

dashboardBody(...)

Arguments

See Also

tabItems(), box(), valueBox().

Create a header for a dashboard page

Description

A dashboard header can be left blank, or it can include dropdown menu items on the right side.

Usage

dashboardHeader(
  ...,
  title = NULL,
  titleWidth = NULL,
  disable = FALSE,
  .list = NULL
)

Arguments

See Also

dropdownMenu()

Examples

## Only run this example in interactive R sessions
if (interactive()) {
library(shiny)

# A dashboard header with 3 dropdown menus
header <- dashboardHeader(
  title = "Dashboard Demo",

  # Dropdown menu for messages
  dropdownMenu(type = "messages", badgeStatus = "success",
    messageItem("Support Team",
      "This is the content of a message.",
      time = "5 mins"
    ),
    messageItem("Support Team",
      "This is the content of another message.",
      time = "2 hours"
    ),
    messageItem("New User",
      "Can I get some help?",
      time = "Today"
    )
  ),

  # Dropdown menu for notifications
  dropdownMenu(type = "notifications", badgeStatus = "warning",
    notificationItem(icon = icon("users"), status = "info",
      "5 new members joined today"
    ),
    notificationItem(icon = icon("warning"), status = "danger",
      "Resource usage near limit."
    ),
    notificationItem(icon = icon("shopping-cart", lib = "glyphicon"),
      status = "success", "25 sales made"
    ),
    notificationItem(icon = icon("user", lib = "glyphicon"),
      status = "danger", "You changed your username"
    )
  ),

  # Dropdown menu for tasks, with progress bar
  dropdownMenu(type = "tasks", badgeStatus = "danger",
    taskItem(value = 20, color = "aqua",
      "Refactor code"
    ),
    taskItem(value = 40, color = "green",
      "Design new layout"
    ),
    taskItem(value = 60, color = "yellow",
      "Another task"
    ),
    taskItem(value = 80, color = "red",
      "Write documentation"
    )
  )
)

shinyApp(
  ui = dashboardPage(
    header,
    dashboardSidebar(),
    dashboardBody()
  ),
  server = function(input, output) { }
)
}

Dashboard page

Description

This creates a dashboard page for use in a Shiny app.

Usage

dashboardPage(
  header,
  sidebar,
  body,
  title = NULL,
  skin = c("blue", "black", "purple", "green", "red", "yellow")
)

Arguments

See Also

dashboardHeader(), dashboardSidebar(), dashboardBody().

Examples

## Only run this example in interactive R sessions
if (interactive()) {
# Basic dashboard page template
library(shiny)
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(),
    title = "Dashboard example"
  ),
  server = function(input, output) { }
)
}

Create a dashboard sidebar.

Description

A dashboard sidebar typically contains a sidebarMenu(), although it may also contain a sidebarSearchForm(), or other Shiny inputs.

Usage

dashboardSidebar(..., disable = FALSE, width = NULL, collapsed = FALSE)

Arguments

See Also

sidebarMenu()

Examples

## Only run this example in interactive R sessions
if (interactive()) {
header <- dashboardHeader()

sidebar <- dashboardSidebar(
  sidebarUserPanel("User Name",
    subtitle = a(href = "#", icon("circle", class = "text-success"), "Online"),
    # Image file should be in www/ subdir
    image = "userimage.png"
  ),
  sidebarSearchForm(label = "Enter a number", "searchText", "searchButton"),
  sidebarMenu(
    # Setting id makes input$tabs give the tabName of currently-selected tab
    id = "tabs",
    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
    menuItem("Widgets", icon = icon("th"), tabName = "widgets", badgeLabel = "new",
             badgeColor = "green"),
    menuItem("Charts", icon = icon("bar-chart-o"),
      menuSubItem("Sub-item 1", tabName = "subitem1"),
      menuSubItem("Sub-item 2", tabName = "subitem2")
    )
  )
)

body <- dashboardBody(
  tabItems(
    tabItem("dashboard",
      div(p("Dashboard tab content"))
    ),
    tabItem("widgets",
      "Widgets tab content"
    ),
    tabItem("subitem1",
      "Sub-item 1 tab content"
    ),
    tabItem("subitem2",
      "Sub-item 2 tab content"
    )
  )
)

shinyApp(
  ui = dashboardPage(header, sidebar, body),
  server = function(input, output) { }
)
}

Create a dropdown menu to place in a dashboard header

Description

Create a dropdown menu to place in a dashboard header

Usage

dropdownMenu(
  ...,
  type = c("messages", "notifications", "tasks"),
  badgeStatus = "primary",
  icon = NULL,
  headerText = NULL,
  .list = NULL
)

Arguments

See Also

dashboardHeader() for example usage.

Create a dropdown menu output (client side)

Description

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

Usage

dropdownMenuOutput(outputId)

Arguments

See Also

renderMenu() for the corresponding server-side function and examples, and dropdownMenu() for the corresponding function for generating static menus.

Other menu outputs: menuItemOutput(), menuOutput(), renderMenu(), sidebarMenuOutput()

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 (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.

Usage

infoBox(
  title,
  value = NULL,
  subtitle = NULL,
  icon = shiny::icon("bar-chart"),
  color = "aqua",
  width = 4,
  href = NULL,
  fill = FALSE
)

Arguments

See Also

box() for usage examples.

Other boxes: box(), tabBox(), valueBox()

Create a sidebar menu item output (client side)

Description

This is the UI-side function for creating a dynamic sidebar menu item.

Usage

menuItemOutput(outputId)

Arguments

See Also

renderMenu() for the corresponding server-side function and examples, and menuItem() for the corresponding function for generating static sidebar menus.

Other menu outputs: dropdownMenuOutput(), menuOutput(), renderMenu(), sidebarMenuOutput()

Create a dynamic menu output for shinydashboard (client side)

Description

This can be used as a placeholder for dynamically-generated dropdownMenu(), notificationItem(), messageItem(), taskItem() sidebarMenu(), or menuItem(). If called directly, you must make sure to supply the correct type of tag. It is simpler to use the wrapper functions if present; for example, dropdownMenuOutput() and sidebarMenuOutput().

Usage

menuOutput(outputId, tag = tags$li)

Arguments

See Also

renderMenu() for the corresponding server side function and examples.

Other menu outputs: dropdownMenuOutput(), menuItemOutput(), renderMenu(), sidebarMenuOutput()

Create a message item to place in a dropdown message menu

Description

Create a message item to place in a dropdown message menu

Usage

messageItem(
  from,
  message,
  icon = shiny::icon("user"),
  time = NULL,
  href = NULL
)

Arguments

See Also

dashboardHeader() for example usage.

Other menu items: notificationItem(), taskItem()

Create a notification item to place in a dropdown notification menu

Description

Create a notification item to place in a dropdown notification menu

Usage

notificationItem(
  text,
  icon = shiny::icon("warning"),
  status = "success",
  href = NULL
)

Arguments

See Also

dashboardHeader() for example usage.

Other menu items: messageItem(), taskItem()

Create a dropdown menu output (server side; deprecated)

Description

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

Usage

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

Arguments

Create dynamic menu output (server side)

Description

Create dynamic menu output (server side)

Usage

renderMenu(expr, env = parent.frame(), quoted = FALSE, outputArgs = list())

Arguments

See Also

menuOutput() for the corresponding client side function and examples.

Other menu outputs: dropdownMenuOutput(), menuItemOutput(), menuOutput(), sidebarMenuOutput()

Examples

## Only run these examples in interactive R sessions

if (interactive()) {
library(shiny)
# ========== Dynamic sidebarMenu ==========
ui <- dashboardPage(
  dashboardHeader(title = "Dynamic sidebar"),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody()
)

server <- function(input, output) {
  output$menu <- renderMenu({
    sidebarMenu(
      menuItem("Menu item", icon = icon("calendar"))
    )
  })
}

shinyApp(ui, server)

# ========== Dynamic dropdownMenu ==========
# Example message data in a data frame
messageData <- data.frame(
  from = c("Admininstrator", "New User", "Support"),
  message = c(
    "Sales are steady this month.",
    "How do I register?",
    "The new server is ready."
  ),
  stringsAsFactors = FALSE
)

ui <- dashboardPage(
  dashboardHeader(
    title = "Dynamic menus",
    dropdownMenuOutput("messageMenu")
  ),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  output$messageMenu <- renderMenu({
    # Code to generate each of the messageItems here, in a list. messageData
    # is a data frame with two columns, 'from' and 'message'.
    # Also add on slider value to the message content, so that messages update.
    msgs <- apply(messageData, 1, function(row) {
      messageItem(
        from = row[["from"]],
        message = paste(row[["message"]], input$slider)
      )
    })

    dropdownMenu(type = "messages", .list = msgs)
  })
}

shinyApp(ui, server)
}

Create an info or value box output (server side)

Description

This is the server-side function for creating a dynamic valueBox() or infoBox().

Usage

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

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

Arguments

See Also

valueBoxOutput() for the corresponding UI-side function.

Examples

## Only run this example in interactive R sessions
if (interactive()) {
library(shiny)

ui <- dashboardPage(
  dashboardHeader(title = "Dynamic boxes"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(width = 2, actionButton("count", "Count")),
      infoBoxOutput("ibox"),
      valueBoxOutput("vbox")
    )
  )
)

server <- function(input, output) {
  output$ibox <- renderInfoBox({
    infoBox(
      "Title",
      input$count,
      icon = icon("credit-card")
    )
  })
  output$vbox <- renderValueBox({
    valueBox(
      "Title",
      input$count,
      icon = icon("credit-card")
    )
  })
}

shinyApp(ui, server)
}

Create a dashboard sidebar menu and menu items.

Description

A dashboardSidebar can contain a sidebarMenu. A sidebarMenu contains menuItems, and they can in turn contain menuSubItems.

Usage

sidebarMenu(..., id = NULL, .list = NULL)

menuItem(
  text,
  ...,
  icon = NULL,
  badgeLabel = NULL,
  badgeColor = "green",
  tabName = NULL,
  href = NULL,
  newtab = TRUE,
  selected = NULL,
  expandedName = as.character(gsub("[[:space:]]", "", text)),
  startExpanded = FALSE
)

menuSubItem(
  text,
  tabName = NULL,
  href = NULL,
  newtab = TRUE,
  icon = shiny::icon("angle-double-right"),
  selected = NULL
)

Arguments

Details

Menu items (and similarly, sub-items) should have a value for either href or tabName; otherwise the item would do nothing. If it has a value for href, then the item will simply be a link to that value.

If a menuItem has a non-NULL tabName, then the menuItem will behave like a tab – in other words, clicking on the menuItem will bring a corresponding tabItem to the front, similar to a shiny::tabPanel(). One important difference between a menuItem and a tabPanel is that, for a menuItem, you must also supply a corresponding tabItem with the same value for tabName, whereas for a tabPanel, no tabName is needed. (This is because the structure of a tabPanel is such that the tab name can be automatically generated.) Sub-items are also able to activate tabItems.

Menu items (but not sub-items) also may have an optional badge. A badge is a colored oval containing text.

See Also

dashboardSidebar() for example usage. For dynamically-generated sidebar menus, see renderMenu() and sidebarMenuOutput().

Other sidebar items: sidebarSearchForm(), sidebarUserPanel()

Create a sidebar menu output (client side)

Description

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

Usage

sidebarMenuOutput(outputId)

Arguments

See Also

renderMenu() for the corresponding server-side function and examples, and sidebarMenu() for the corresponding function for generating static sidebar menus.

Other menu outputs: dropdownMenuOutput(), menuItemOutput(), menuOutput(), renderMenu()

Create a search form to place in a sidebar

Description

A search form consists of a text input field and a search button.

Usage

sidebarSearchForm(
  textId,
  buttonId,
  label = "Search...",
  icon = shiny::icon("search")
)

Arguments

See Also

dashboardSidebar() for example usage.

Other sidebar items: sidebarMenu(), sidebarUserPanel()

A panel displaying user information in a sidebar

Description

A panel displaying user information in a sidebar

Usage

sidebarUserPanel(name, subtitle = NULL, image = NULL)

Arguments

See Also

dashboardSidebar() for example usage.

Other sidebar items: sidebarMenu(), sidebarSearchForm()

Create a tabbed box

Description

Create a tabbed box

Usage

tabBox(
  ...,
  id = NULL,
  selected = NULL,
  title = NULL,
  width = 6,
  height = NULL,
  side = c("left", "right")
)

Arguments

See Also

Other boxes: box(), infoBox(), valueBox()

Examples

## Only run this example in interactive R sessions
if (interactive()) {
library(shiny)

body <- dashboardBody(
  fluidRow(
    tabBox(
      title = "First tabBox",
      # The id lets us use input$tabset1 on the server to find the current tab
      id = "tabset1", height = "250px",
      tabPanel("Tab1", "First tab content"),
      tabPanel("Tab2", "Tab content 2")
    ),
    tabBox(
      side = "right", height = "250px",
      selected = "Tab3",
      tabPanel("Tab1", "Tab content 1"),
      tabPanel("Tab2", "Tab content 2"),
      tabPanel("Tab3", "Note that when side=right, the tab order is reversed.")
    )
  ),
  fluidRow(
    tabBox(
      # Title can include an icon
      title = tagList(shiny::icon("gear"), "tabBox status"),
      tabPanel("Tab1",
        "Currently selected tab from first box:",
        verbatimTextOutput("tabset1Selected")
      ),
      tabPanel("Tab2", "Tab content 2")
    )
  )
)

shinyApp(
  ui = dashboardPage(dashboardHeader(title = "tabBoxes"), dashboardSidebar(), body),
  server = function(input, output) {
    # The currently selected tab from the first box
    output$tabset1Selected <- renderText({
      input$tabset1
    })
  }
)
}

One tab to put inside a tab items container

Description

One tab to put inside a tab items container

Usage

tabItem(tabName = NULL, ...)

Arguments

See Also

menuItem(), menuSubItem(), tabItems(). See sidebarMenu() for a usage example.

A container for tab items

Description

A container for tab items

Usage

tabItems(...)

Arguments

See Also

menuItem(), menuSubItem(), tabItem(). See sidebarMenu() for a usage example.

Assert that a tag has specified properties

Description

Assert that a tag has specified properties

Usage

tagAssert(tag, type = NULL, class = NULL, allowUI = TRUE)

Arguments

Create a task item to place in a dropdown task menu

Description

Create a task item to place in a dropdown task menu

Usage

taskItem(text, value = 0, color = "aqua", href = NULL)

Arguments

See Also

dashboardHeader() for example usage.

Other menu items: messageItem(), notificationItem()

Change the selected tab on the client

Description

This function controls the active tab of tabItems() from the server. It behaves just like shiny::updateTabsetPanel().

Usage

updateTabItems(...)

Arguments

Examples

## Only run this example in interactive R sessions
if (interactive()) {

ui <- dashboardPage(
  dashboardHeader(title = "Simple tabs"),
  dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    ),
    actionButton('switchtab', 'Switch tab')
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "dashboard",
        h2("Dashboard tab content")
      ),
      tabItem(tabName = "widgets",
        h2("Widgets tab content")
      )
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$switchtab, {
    newtab <- switch(input$tabs,
      "dashboard" = "widgets",
      "widgets" = "dashboard"
    )
    updateTabItems(session, "tabs", newtab)
  })
}

shinyApp(ui, server)
}

Valid colors

Description

These are valid colors for various dashboard components. Valid colors are listed below.

Details

• red

• yellow

• aqua

• blue

• light-blue

• green

• navy

• teal

• olive

• lime

• orange

• fuchsia

• purple

• maroon

• black

Valid statuses

Description

These status strings correspond to colors as defined in Bootstrap's CSS. Although the colors can vary depending on the particular CSS selector, they generally appear as follows:

Details

• primary Blue (sometimes dark blue)

• success Green

• info Blue

• warning Orange

• danger Red

Create a value box for the main body of a dashboard.

Description

A value box displays a value (usually a number) in large text, with a smaller subtitle beneath, and a large icon on the right side. Value boxes are meant to be placed in the main body of a dashboard.

Usage

valueBox(value, subtitle, icon = NULL, color = "aqua", width = 4, href = NULL)

Arguments

See Also

box() for usage examples.

Other boxes: box(), infoBox(), tabBox()

Create an info or value box output (client side)

Description

This is the UI-side function for creating a dynamic valueBox() or infoBox().

Usage

valueBoxOutput(outputId, width = 4)

infoBoxOutput(outputId, width = 4)

Arguments

See Also

renderValueBox() for the corresponding server-side function and examples.