De body

Dashboards bouwen met shinydashboard

Png Kee Seng

Researcher

Overzicht

Grootste deel van de shinydashboard-UI
Meestal staan hier inputs en outputs
- Zoals gerechten en bestellingen in een restaurant
- De server verzorgt de communicatie
De body wordt gedefinieerd met dashboardBody() en sla je conventioneel op als body

body <- dashboardBody(...)

Wireframing

Maak eerst een wireframe
- Zet de structuur op voordat je inhoud toevoegt
Bepaal in een shinydashboard eerst de posities van objecten

Het wireframe van een zeppelin.

¹ Brett Jordan, Flickr

Rijen en boxen toevoegen: lege boxen

Voeg rijen toe met fluidRow()
En voeg boxen toe met box()

Dashboard met twee rijen, elk met twee lege boxen.

body <- dashboardBody(

  fluidRow(

           box("Rij 1, box 1"), 
           box("Rij 1, box 2")

           ),
  fluidRow(

           box("Rij 2, box 1"), 
           box("Rij 2, box 2")

           )

)

Rijen en boxen toevoegen: inhoud in boxen

Lichaam met vier vakken en inhoud in sommige vakken.

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

               plotOutput('plot')),

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

               selectInput("select", 
                           "Kies teamnummer:", 
                           choices = c(1,2))))

)

Voorkom overlappende boxen

Elke box gebruikt standaard 6 van de 12 horizontale eenheden
Stel width in om overlopen te voorkomen
- In ons voorbeeld: breedtes 3, 5 en 4
box() toevoegen is sterk aan te raden

Meer boxen in de body

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

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

valueBox en infoBox

Er zijn ook boxen voor kleine hoeveelheden info
- valueBox()
- infoBox()

valueBox en infoBox in de body.

body <- dashboardBody(
  fluidRow(valueBox(value = 3, 
                    subtitle = "Totaal aantal gegeven rode kaarten", 
                    icon = icon("user"),
                    color = "red"),

           infoBox(value = 158, 
                   title = "Totaal aantal gemaakte doelpunten", 
                   icon = icon("futbol"))
           ))

valueBoxOutput en infoBoxOutput

Variaties op valueBox() en infoBox(): valueBoxOutput() en infoBoxOutput()
Dit zijn outputfuncties
Er zijn ook renderValueBox() en renderInfoBox()
valueBox() en infoBox() zijn nodig

valueBoxOutput en infoBoxOutput in de body. De gerenderde shinydashboard is identiek aan de vorige.

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

server <- function(input, output){
  output$valuebox1 <- renderValueBox(
    valueBox(3, "Totaal aantal gegeven rode kaarten",
                icon = icon("user"), color = "red"))
  output$infobox1 <- renderInfoBox(
    infoBox(158, 
                   title = "Totaal aantal gemaakte doelpunten", 
                   icon = icon("futbol")))
}

Analogie: valueBoxOutput vs plotOutput

plotOutput():
- Staat in de UI
- Bepaalt de positie in de shinydashboard
renderPlot():
- Staat in server()
- Bevat een ggplot()-object

valueBoxOutput():
- Staat in de UI
- Bepaalt de positie in de shinydashboard
renderValueBox():
- Staat in server()
- Bevat een valueBox()-object

Sidebar en body koppelen

Eerder hadden we een sidebar met twee knoppen: "charts" en "statistics"
Om deze aan de body te koppelen, voeg je tabItems() toe
- Elke pagina is een tabItem()
- De labels van elk menuItem()-tabItem()-paar moeten overeenkomen

De body en sidebar zijn nu gekoppeld

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",
      "Grafieken komen hier."
    ),
    tabItem("statistics",
      "Statistieken komen hier."
)))

Tabs in de body

In een shinyApp kun je tabs ook maken met tabsetPanel()
- Elke tab is een tabPanel()
Niet verwarren met tabItems() en tabItem()

Tabsets toevoegen binnen de body

body <- dashboardBody(tabsetPanel(

    tabPanel("Distributions", 
             box(plotOutput("dist"))),
    tabPanel("Statistics", 
             dateInput("matchdate", 
                       "Voer de wedstrijddatum in:", 
                       value = "2022-11-20"),
             valueBoxOutput("red"), 
             valueBoxOutput("yellow")),
    tabPanel("Data", "Data komt hier.", 
             tableOutput("data"))

))

server <- function(input, output){
  output$red <- renderValueBox(valueBox(0, "Rode kaarten"))
  output$yellow <- renderValueBox(valueBox(6, "Gele kaarten"))
}

Laten we oefenen!

Dashboards bouwen met shinydashboard