De header en de zijbalk

Dashboards bouwen met shinydashboard

Png Kee Seng

Researcher

De header

De header is als het uithangbord van het restaurant
Hij kan de dashboardtitel bevatten
Hij kan dropdownmenu’s bevatten
- Bijv. berichten, meldingen, taken

Hier is een voorbeeld van een eenvoudige winkelpui.

De header is als het uithangbord van een restaurant. Hij kan andere praktische of esthetische elementen bevatten. Hier is een voorbeeld van een complexe voorkant.

¹ Afbeelding door upklyak op Freepik

De shinydashboard-titel

De header wordt gedefinieerd met dashboardHeader()
Wat als de titel te lang is?
- Stel het argument titleWidth in
- Standaard is 230 pixels

header <- dashboardHeader(title = "Soccer tournament")

header <- dashboardHeader(title = "Analysis for global soccer tournament")

header <- dashboardHeader(title = "Analysis for global soccer tournament")
                            titleWidth = 400)

De headerbreedte kan worden aangepast voor lange titels.

Een dropdownmenu met een bericht toevoegen

Voeg dropdownmenu’s toe aan de header
Drie types dropdownmenu’s
- Berichten
- Meldingen
- Taken
Voeg dropdownMenu() toe met type "messages"
- Voeg een messageItem() toe
- Het standaardpictogram is icon("user")
- Je kunt ook time instellen

header <- dashboardHeader(
  title = "Analysis for FIFA world cup",
  titleWidth = 300,
  dropdownMenu(type = "messages",

    messageItem("Data division",
      "Keep up the good work!",

      time = "5 mins"

)))

Dropdownmenu met één berichtitem.

Een dropdownmenu met meerdere berichten toevoegen

Voeg nog een messageItem() toe binnen dropdownMenu() met de naam "Twitter"

Een dropdownmenu met twee berichtitems.

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",
    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"
    ),

    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")
    )
  )
)

Een dropdownmenu met meerdere items toevoegen

We kunnen ook andere itemtypes toevoegen
- messageItem()
- notificationItem()
- taskItem()
Ze zien er verschillend uit
- messageItem(): Standaardpictogram is icon("user")
- notificationItem(): Standaardpictogram is icon("exclamation-triangle")
- taskItem(): Bevat een voortgangsbalk

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",

    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"),
    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")),

    notificationItem("This is a notification."
    ),

    taskItem(value = 30, color = "blue",
      "Dashboard construction")
))

Een dropdownmenu met meerdere items toevoegen

Een dropdownmenu met meerdere items

Meer dropdownmenu’s toevoegen

We kunnen ook een extra dropdownmenu toevoegen

Een header met meer dan één dropdownmenu.

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,

  dropdownMenu(type = "messages",
    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"),
    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")),
    notificationItem("This is a notification."),
    taskItem(value = 30, color = "blue",
      "Dashboard construction")),

  dropdownMenu(type = "notifications",
    notificationItem(icon = icon("users"),
      "This is another notification."
)))

De zijbalk

De zijbalk wordt gedefinieerd met dashboardSidebar()
Pas de breedte aan via width.
Met sidebarMenu() kun je meerdere pagina’s plaatsen in een shinydashboard

Een zijbalk met twee knoppen

sidebar <- dashboardSidebar()

sidebar <- dashboardSidebar(width=400)

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
        icon = icon("chart-line")),
    menuItem("Statistics", icon = icon("file-excel"), 
        tabName = "stats")
  )
)

sidebar <- dashboardSidebar(disable = TRUE)

Een badge toevoegen

Je kunt ook een badge toevoegen
- Stel badgeLabel en badgeColor in

Een zijbalk met extra badges

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),

             badgeLabel = "New content!", 
             badgeColor = "green"),

    menuItem("Statistics", icon = icon("file-excel"), 
             tabName = "stats", 

             badgeLabel = "urgent", 
             badgeColor = "red")

  )
)

Subtabs toevoegen

Voeg subtabs toe met menuSubItem()
Let op: je kunt geen badge toevoegen aan een tab met subtabs

Een zijbalk met subtabs

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", 
             badgeColor = "green"),
    menuItem("Statistics", icon = icon("file-excel"), 
            tabName = "stats", 
            menuSubItem("Team 1", tabName = "team1", 
                     icon=icon("user")),
            menuSubItem("Team 2", tabName = "team2", 
                     icon=icon("user")))
  )
)

Inputs en outputs in de zijbalk toevoegen

Je kunt inputs en outputs toevoegen aan de zijbalk
Definieer inputs en outputs ook in server

Een zijbalk met een checkboxGroupInput().

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", 
             badgeColor = "green"),
    menuItem("Statistics", icon = icon("file-excel"), 
            tabName = "stats", 
            menuSubItem("Team 1", tabName = "team1", 
            icon=icon("user")),
            menuSubItem("Team 2", tabName = "team2", 
            icon=icon("user"))),

    menuItem("A couple of checkboxes",  
             checkboxGroupInput("checkboxes", 
              "Day of the week", 
              choices =  c("Mon","Tue","Wed","Thu","Fri","Sat","Sun"),
              selected = c("Mon","Tue","Wed","Thu","Fri")))
  )
)

Laten we oefenen!

Dashboards bouwen met shinydashboard