L'en-tête et la barre latérale

Créer des tableaux de bord avec shinydashboard

Png Kee Seng

Researcher

L'en-tête

L'en-tête est comme l'enseigne du restaurant
Elle peut contenir le titre du tableau de bord
Elle peut contenir des menus déroulants
- P. ex. : messages, avis, tâches

Voici un exemple de devanture simple.

L'en-tête est comme l'enseigne d'un restaurant. Elle peut contenir des éléments pratiques ou esthétiques. Voici un exemple d'interface plus chargée.

¹ Image par upklyak sur Freepik

Le titre shinydashboard

L'en-tête est défini par dashboardHeader()
Et si le titre est trop long ?
- Définissez l'argument titleWidth
- Par défaut : 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)

La largeur de l'en-tête peut être ajustée pour des titres longs.

Ajouter un menu déroulant avec un message

Des menus déroulants peuvent être ajoutés à l'en-tête
Trois types de menus déroulants
- Messages
- Avis
- Tâches
Ajoutez dropdownMenu() avec type "messages"
- Ajoutez un messageItem()
- L'icône par défaut est icon("user")
- On peut aussi définir 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 déroulant avec un message.

Ajouter un menu déroulant avec plusieurs messages

Ajoutez un autre messageItem() dans dropdownMenu() appelé « Twitter »

Un menu déroulant avec deux messages.

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

Ajouter un menu déroulant avec plusieurs éléments

On peut aussi ajouter d'autres types d'éléments
- messageItem()
- notificationItem()
- taskItem()
Leur apparence diffère
- messageItem() : icône par défaut icon("user")
- notificationItem() : icône par défaut icon("exclamation-triangle")
- taskItem() : comprend une barre de progression

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

Ajouter un menu déroulant avec plusieurs éléments

Un menu déroulant avec plusieurs éléments

Ajouter d'autres menus déroulants

On peut aussi ajouter un autre menu déroulant

Un en-tête avec plus d'un menu déroulant.

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

La barre latérale

La barre latérale est définie par dashboardSidebar()
Sa largeur se règle avec width
sidebarMenu() permet d'ajouter plusieurs pages à un shinydashboard

Une barre latérale avec deux boutons

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)

Ajouter un écusson

On peut aussi ajouter un écusson
- Définissez badgeLabel et badgeColor

Une barre latérale avec des écussons supplémentaires

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

             badgeLabel = "Nouveau contenu !", 
             badgeColor = "green"),

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

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

  )
)

Ajouter des sous-onglets

On peut ajouter des sous-onglets avec menuSubItem()
Notez qu'on ne peut pas ajouter d'écusson à un onglet qui contient des sous-onglets

Une barre latérale avec des sous-onglets

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

Ajouter des entrées et des sorties dans la barre latérale

On peut ajouter des entrées et des sorties dans la barre latérale
Il faut aussi définir entrées et sorties dans server

Une barre latérale contenant 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")))
  )
)

Passons à la pratique !

Créer des tableaux de bord avec shinydashboard