The body

Building Dashboards with shinydashboard

Png Kee Seng

Researcher

An overview

Bulk of the shinydashboard UI
Typically, inputs and outputs are placed here
- These are like the dishes and orders at a restaurant
- The server helps with communication
The body is defined by dashboardBody() and is conventionally stored as body

body <- dashboardBody(...)

Wireframing

Carry out wire-framing
- Set up the structure before adding in the contents
In a shinydashboard, first decide positions of objects

The wireframe of a zeppelin.

¹ Brett Jordan, Flickr

Adding rows and boxes: empty boxes

Add rows with fluidRow()
And add boxes with box()

Dashboard with two rows, each with two empty boxes.

body <- dashboardBody(

  fluidRow(

           box("Row 1, box 1"), 
           box("Row 1, box 2")

           ),
  fluidRow(

           box("Row 2, box 1"), 
           box("Row 2, box 2")

           )

)

Adding rows and boxes: content in boxes

Body with four boxes and content in some boxes.

body <- dashboardBody(
  fluidRow(box("Row 1, box 1", 

               plotOutput('plot')),

           box("Row 1, box 2")),
  fluidRow(box("Row 2, box 1"), 
           box("Row 2, box 2", 

               selectInput("select", 
                           "Select team number:", 
                           choices = c(1,2))))

)

Prevent overflowing boxes

Each box takes up 6 out of 12 units of the total horizontal space by default
To prevent overflowing, set width
- In our example, set widths to 3, 5 and 4
Adding box()'s is highly recommended

More boxes in the body

body <- dashboardBody(
  fluidRow(box("Row 1, box 1"), 
           box("Row 1, box 2"),
           box("Row 1, box 3")),
  fluidRow(box("Row 2, box 1"), 
           box("Row 2, box 2"))
)

body <- dashboardBody(
  fluidRow(box("Row 1, box 1", width = 3), 
           box("Row 1, box 2", width = 5),
           box("Row 1, box 3", width = 4)),
  fluidRow(box("Row 2, box 1"), 
           box("Row 2, box 2"))
)

valueBox and infoBox

There are also boxes that display small amounts of information
- valueBox()
- infoBox()

valueBox and infoBox in the body.

body <- dashboardBody(
  fluidRow(valueBox(value = 3, 
                    subtitle = "Total no. of red cards awarded", 
                    icon = icon("user"),
                    color = "red"),

           infoBox(value = 158, 
                   title = "Total no. of goals scored", 
                   icon = icon("futbol"))
           ))

valueBoxOutput and infoBoxOutput

Variations of valueBox() and infoBox(): valueBoxOutput() and infoBoxOutput()
These are output functions
There are also renderValueBox() and renderInfoBox()
valueBox() and infoBox() are needed

valueBoxOutput and infoBoxOutput in the body. See that the rendered shinydashboard is identical to the previous one.

body <- dashboardBody(
  fluidRow(valueBoxOutput(outputId = "valuebox1"),
           infoBoxOutput(outputId = "infobox1")
           ))

server <- function(input, output){
  output$valuebox1 <- renderValueBox(
    valueBox(3, "Total no. of red cards awarded",
                icon = icon("user"), color = "red"))
  output$infobox1 <- renderInfoBox(
    infoBox(158, 
                   title = "Total no. of goals scored", 
                   icon = icon("futbol")))
}

Analogy between valueBoxOutput and plotOutput

plotOutput():
- Placed in the UI
- Determines its position in the shinydashboard
renderPlot():
- Placed in server()
- Contains a ggplot() object

valueBoxOutput():
- Placed in the UI
- Determines its position in the shinydashboard
renderValueBox():
- Placed in server()
- Contains a valueBox() object

Linking the sidebar and body

Recall earlier when we had a sidebar with two buttons called "charts" and "statistics"
To link these to the body, we will need to add tabItems()
- Each page is defined by a tabItem()
- The labels on each menuItem()-tabItem() pair must match

The body and sidebar are now linked

sidebar <- dashboardSidebar(
  sidebarMenu(
    id = "pages",

    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", badgeColor = "green"),

    menuItem("Statistics", icon = icon("file-excel"), 
             tabName = "statistics", 
             badgeLabel = "urgent", badgeColor = "red")
 ))

body <- dashboardBody(
  tabItems(

    tabItem("charts",
      "Charts go here."
    ),
    tabItem("statistics",
      "Statistics go here."
)))

Tabs in the body

In a shinyApp, a set of tabs can also be defined using tabsetPanel()
- Each tab is defined by tabPanel()
Do not confuse with tabItems() and tabItem()

Adding tabsets within the body

body <- dashboardBody(tabsetPanel(

    tabPanel("Distributions", 
             box(plotOutput("dist"))),
    tabPanel("Statistics", 
             dateInput("matchdate", 
                       "Enter the match date:", 
                       value = "2022-11-20"),
             valueBoxOutput("red"), 
             valueBoxOutput("yellow")),
    tabPanel("Data", "Data goes here.", 
             tableOutput("data"))

))

server <- function(input, output){
  output$red <- renderValueBox(valueBox(0, "Red cards"))
  output$yellow <- renderValueBox(valueBox(6, "Yellow cards"))
}

Let's practice!

Building Dashboards with shinydashboard