Nagłówek i pasek boczny

Tworzenie dashboardów z shinydashboard

Png Kee Seng

Researcher

Nagłówek

Nagłówek jest jak szyld restauracji
Może zawierać tytuł dashboardu
Może zawierać menu rozwijane
- Np. wiadomości, powiadomienia, zadania

Przykład prostej fasady sklepu.

Nagłówek jest jak szyld restauracji. Może zawierać elementy praktyczne i estetyczne. Przykład rozbudowanej fasady.

¹ Image by upklyak on Freepik

Tytuł w shinydashboard

Nagłówek definiuje dashboardHeader()
Co zrobić, gdy tytuł jest za długi?
- Ustaw argument titleWidth
- Domyślna wartość to 230 pikseli

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

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

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

Szerokość nagłówka można dostosować do długich tytułów.

Dodawanie menu rozwijanego z wiadomością

Do nagłówka można dodać menu rozwijane
Trzy typy menu rozwijanych
- Wiadomości
- Powiadomienia
- Zadania
Dodaj dropdownMenu() typu "messages"
- Dodaj messageItem()
- Domyślna ikona to icon("user")
- Można również ustawić 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"

)))

Menu rozwijane z jednym elementem wiadomości.

Dodawanie menu rozwijanego z wieloma wiadomościami

Dodaj kolejny messageItem() w dropdownMenu() o nazwie "Twitter"

Menu rozwijane z dwoma elementami wiadomości.

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

Dodawanie menu rozwijanego z różnymi elementami

Można dodawać inne typy elementów
- messageItem()
- notificationItem()
- taskItem()
Różnice w wyglądzie
- messageItem(): domyślna ikona to icon("user")
- notificationItem(): domyślna ikona to icon("exclamation-triangle")
- taskItem(): zawiera pasek postępu

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

Dodawanie menu rozwijanego z różnymi elementami

Menu rozwijane z wieloma elementami

Dodawanie kolejnych menu rozwijanych

Można również dodać kolejne menu rozwijane

Nagłówek z więcej niż jednym menu rozwijanym.

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

Pasek boczny

Pasek boczny definiuje dashboardSidebar()
Szerokość paska można dostosować parametrem width.
sidebarMenu() umożliwia dodanie wielu stron w shinydashboard

Pasek boczny z dwoma przyciskami

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)

Dodawanie odznaki

Można również dodać odznakę
- Ustaw badgeLabel i badgeColor

Pasek boczny z dodatkowymi odznakami

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

  )
)

Dodawanie podzakładek

Podzakładki można dodać za pomocą menuSubItem()
Uwaga: do zakładki zawierającej podzakładki nie można dodać odznaki

Pasek boczny zawierający podzakładki

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

Dodawanie elementów wejściowych i wyjściowych do paska bocznego

Do paska bocznego można dodać elementy wejściowe i wyjściowe
Należy również zdefiniować je w server

Pasek boczny zawierający 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")))
  )
)

Czas na ćwiczenia!

Tworzenie dashboardów z shinydashboard