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, c'est comme l'enseigne du restaurant
Il peut contenir le titre du tableau de bord
Il peut contenir des menus déroulants
- P. ex. : messages, notifications, tâches

Voici un exemple de vitrine simple.

L'en-tête est comme l'enseigne d'un restaurant. Il peut contenir d'autres éléments pratiques ou esthétiques. Voici un exemple de devanture complexe.

¹ 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
- Valeur par défaut : 230 px

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 de longs titres.

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
- Notifications
- Tâches
Ajoutez dropdownMenu() avec type "messages"
- Ajoutez un messageItem()
- L'icône par défaut est icon("user")
- Vous pouvez 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

Nous pouvons aussi ajouter d'autres types d'éléments
- messageItem()
- notificationItem()
- taskItem()
L'apparence diffère
- messageItem() : icône par défaut icon("user")
- notificationItem() : icône par défaut icon("exclamation-triangle")
- taskItem() : contient 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

Nous pouvons aussi ajouter un autre menu déroulant

Un en-tête avec plusieurs menus déroulants.

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 dans 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 badge

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

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

  )
)

Ajouter des sous-onglets

Des sous-onglets peuvent être ajoutés avec menuSubItem()
Notez que les badges ne sont pas possibles pour un onglet avec 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 sorties dans la barre latérale

Des entrées et des sorties peuvent être ajoutées à la barre latérale
Il faut aussi définir les 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