Components of a shinydashboard

Building Dashboards with shinydashboard

Png Kee Seng

Researcher

What is a shinydashboard?

A shinydashboard is just another shinyApp with a dashboard output
- A UI is required
- A server is required
A shinyApp() is also needed to glue the UI and server together
See that the UI is defined by dashboardPage() and not fluidPage()

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output){
...
}

shinyApp(ui, server)

The user interface (UI)

The UI now contains more parts
1. A header
2. A side bar
3. A body
A shinydashboard UI is put together with dashboardPage()

header <- dashboardHeader(...)

sidebar <- dashboardSidebar(...)

body <- dashboardBody(...)

# a shinydashboard ui
ui <- dashboardPage(header, sidebar, body)

A preview of the UI

A breakdown of the components of a shinydashboard UI.

Revisiting the restaurant analogy

The UI is like the restaurant
The server is like the waiter
In particular, the UI can be further broken down into smaller components

A user of the shinyApp is like a patron of a restaurant.

The waiter passes down the order to the kitchen and brings the food to us.

¹ Image by macrovector on Freepik

The UI as a multi-course meal

In the UI:
- The header is like the signboard
- The side bar is like the list of courses
- The outputs and inputs are like the dishes and orders
One course is presented at a time
Instructions are given for each course
Each course is like a shinyApp
- We can have multiple sets of inputs and outputs

Each course is like a shinyApp with several inputs and outputs.

¹ Image by brgfx on Freepik

An empty shinydashboard

library(shinydashboard)
library(shiny)

header <- dashboardHeader(title = "My first dashboard")

sidebar <- dashboardSidebar()

body <- dashboardBody()

ui <- dashboardPage(header, sidebar, body)

Rendering the shinydashboard

header <- dashboardHeader(title = "My first dashboard")

sidebar <- dashboardSidebar()

body <- dashboardBody()

ui <- dashboardPage(header, sidebar, body)


server <- function(input, output) {
}


shinyApp(ui, server)

Rendering the shinydashboard

An empty shinydashboard

Let's practice!

Building Dashboards with shinydashboard