Sidhuvud och sidofält

Bygga dashboards med shinydashboard

Png Kee Seng

Researcher

Sidhuvudet

Sidhuvudet är som skylten på en restaurang
Det kan innehålla dashboardens titel
Det kan innehålla rullgardinsmenyer
- T.ex. meddelanden, notiser, uppgifter

Här är ett exempel på en enkel butiksfasad.

Sidhuvudet liknar skylten på en restaurang. Det kan innehålla praktiska eller estetiska element. Här är ett exempel på hur ett mer avancerat sidhuvud kan se ut.

¹ Bild av upklyak på Freepik

Titeln i shinydashboard

Sidhuvudet definieras med dashboardHeader()
Vad händer om titeln är för lång?
- Ange argumentet titleWidth
- Standardvärdet är 230 pixlar

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

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

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

Sidhuvudets bredd kan justeras för att rymma långa titlar.

Lägga till en rullgardinsmeny med ett meddelande

Rullgardinsmenyer kan läggas till i sidhuvudet
Tre typer av rullgardinsmenyer
- Meddelanden
- Notiser
- Uppgifter
Lägg till dropdownMenu() av type "messages"
- Lägg till ett messageItem()
- Ikonen är icon("user") som standard
- Vi kan också ange time

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

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

      time = "5 mins"

)))

Rullgardinsmeny med ett meddelandeobjekt.

Lägga till en rullgardinsmeny med flera meddelanden

Lägg till ytterligare ett messageItem() i dropdownMenu() med namnet "Twitter"

En rullgardinsmeny med två meddelandeobjekt.

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")
    )
  )
)

Lägga till en rullgardinsmeny med flera objekt

Vi kan även lägga till andra typer av objekt
- messageItem()
- notificationItem()
- taskItem()
Det finns utseendemässiga skillnader
- messageItem(): Standardikonen är icon("user")
- notificationItem(): Standardikonen är icon("exclamation-triangle")
- taskItem(): Innehåller en förloppsindikator

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")
))

Lägga till en rullgardinsmeny med flera objekt

En rullgardinsmeny med flera objekt

Lägga till fler rullgardinsmenyer

Vi kan också lägga till ytterligare en rullgardinsmeny

Ett sidhuvud med mer än en rullgardinsmeny.

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."
)))

Sidofältet

Sidofältet definieras med dashboardSidebar()
Bredden på sidofältet kan justeras via width.
sidebarMenu() gör det möjligt att lägga till flera sidor i en shinydashboard

Ett sidofält med två knappar

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)

Lägga till en badge

En badge kan också läggas till
- Ange badgeLabel och badgeColor

Ett sidofält med 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")

  )
)

Lägga till underflikar

Underflikar kan läggas till med menuSubItem()
Observera att badges inte kan läggas till på en flik som innehåller underflikar

Ett sidofält med underflikar

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")))
  )
)

Lägga till indata och utdata i sidofältet

Indata och utdata kan läggas till i sidofältet
Vi måste också definiera indata och utdata i server

Ett sidofält med en 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")))
  )
)

Nu kör vi en övning!

Bygga dashboards med shinydashboard