O header e a barra lateral

Construindo dashboards com shinydashboard

Png Kee Seng

Researcher

O header

O header é como a placa do restaurante
Pode conter o título do dashboard
Pode conter menus suspensos
- Ex.: mensagens, notificações, tarefas

Aqui está um exemplo de uma vitrine simples.

O header é como a placa de um restaurante. Ele pode conter outros elementos práticos ou estéticos. Aqui está um exemplo de um front-end complexo.

¹ Imagem de upklyak no Freepik

O título no shinydashboard

O header é definido por dashboardHeader()
E se o título for muito longo?
- Defina o argumento titleWidth
- O padrão é 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)

A largura do header pode ser ajustada para títulos longos.

Adicionando um menu suspenso com mensagem

Menus suspensos podem ser adicionados ao header
Três tipos de menus suspensos
- Mensagens
- Notificações
- Tarefas
Adicione dropdownMenu() com type "messages"
- Adicione um messageItem()
- O ícone padrão é icon("user")
- Também dá para definir 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 suspenso com um item de mensagem.

Adicionando um menu suspenso com várias mensagens

Adicione outro messageItem() dentro de dropdownMenu() chamado "Twitter"

Um menu suspenso com dois itens de mensagem.

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

Adicionando um menu suspenso com vários itens

Também podemos adicionar outros tipos de itens
- messageItem()
- notificationItem()
- taskItem()
Há diferenças visuais
- messageItem(): ícone padrão é icon("user")
- notificationItem(): ícone padrão é icon("exclamation-triangle")
- taskItem(): contém uma barra de progresso

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

Adicionando um menu suspenso com vários itens

Um menu suspenso com vários itens

Adicionando mais menus suspensos

Também podemos adicionar outro menu suspenso

Um header com mais de um menu suspenso.

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

A barra lateral

A barra lateral é definida por dashboardSidebar()
A largura pode ser ajustada definindo width
sidebarMenu() permite colocar várias páginas no shinydashboard

Uma barra lateral com dois botões

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)

Adicionando um badge

Também é possível adicionar um badge
- Defina badgeLabel e badgeColor

Uma barra lateral com badges adicionais

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

  )
)

Adicionando sub-abas

Sub-abas podem ser adicionadas com menuSubItem()
Observe que não é possível adicionar badges a uma aba com sub-abas

Uma barra lateral com sub-abas

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

Adicionando inputs e outputs na barra lateral

Inputs e outputs podem ser adicionados à barra lateral
Também é preciso defini-los no server

Uma barra lateral com 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")))
  )
)

Vamos praticar!

Construindo dashboards com shinydashboard