Antetul și bara laterală

Crearea dashboardurilor cu shinydashboard

Png Kee Seng

Researcher

Antetul

Antetul este ca firma unui restaurant
Poate conține titlul tabloului de bord
Poate conține meniuri derulante
- Ex.: mesaje, notificări, sarcini

Exemplu de fațadă simplă a unui magazin.

Antetul este ca firma unui restaurant. Poate conține elemente practice sau estetice. Exemplu de interfață complexă.

¹ Image by upklyak on Freepik

Titlul în shinydashboard

Antetul este definit de dashboardHeader()
Ce facem dacă titlul este prea lung?
- Setați argumentul titleWidth
- Valoarea implicită este 230 de pixeli

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

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

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

Lățimea antetului poate fi ajustată pentru titluri lungi.

Adăugarea unui meniu derulant cu un mesaj

Meniuri derulante pot fi adăugate la antet
Trei tipuri de meniuri derulante
- Mesaje
- Notificări
- Sarcini
Adăugați dropdownMenu() de type "messages"
- Adăugați un messageItem()
- Pictograma implicită este icon("user")
- Putem seta și 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"

)))

Meniu derulant cu un singur element de mesaj.

Adăugarea unui meniu derulant cu mai multe mesaje

Adăugați un messageItem() în dropdownMenu() numit "Twitter"

Un meniu derulant cu două elemente de mesaj.

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

Adăugarea unui meniu derulant cu mai multe elemente

Putem adăuga și alte tipuri de elemente
- messageItem()
- notificationItem()
- taskItem()
Există diferențe de aspect
- messageItem(): Pictogramă implicită icon("user")
- notificationItem(): Pictogramă implicită icon("exclamation-triangle")
- taskItem(): Conține o bară de progres

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

Adăugarea unui meniu derulant cu mai multe elemente

Un meniu derulant cu mai multe elemente

Adăugarea mai multor meniuri derulante

Putem adăuga și un alt meniu derulant

Un antet cu mai mult de un meniu derulant.

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

Bara laterală

Bara laterală este definită de dashboardSidebar()
Lățimea barei laterale poate fi ajustată prin width.
sidebarMenu() permite plasarea mai multor pagini într-un shinydashboard

O bară laterală cu două butoane

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)

Adăugarea unei etichete (badge)

Se poate adăuga și o etichetă (badge)
- Setați badgeLabel și badgeColor

O bară laterală cu etichete suplimentare

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

  )
)

Adăugarea subfilelor

Subfile pot fi adăugate prin menuSubItem()
Etichetele nu pot fi adăugate la un tab care conține subfile

O bară laterală cu subfile

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

Adăugarea intrărilor și ieșirilor în bara laterală

Intrări și ieșiri pot fi adăugate în bara laterală
Acestea trebuie definite și în server

O bară laterală cu un 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")))
  )
)

Să exersăm!

Crearea dashboardurilor cu shinydashboard