CommencerCommencez gratuitement

Wireframing

Reprenons l’exemple précédent du tableau de bord pour les résultats d’analyse d’un tournoi de football. Dans les exercices précédents, vous avez déjà configuré l’en-tête et la barre latérale.

En particulier, un bouton dans la barre latérale est défini par menuItem() et est contenu dans sidebarMenu(). Vous avez peut-être remarqué que ces boutons ne font encore rien. Vous allez maintenant relier ces boutons de la barre latérale à une page différente dans le corps de l’interface. Cela fait toujours partie du wireframing, où vous décidez encore de l’emplacement de chaque élément. Chaque page du corps est définie par tabItem() et doit être contenue dans tabItems.

Les packages shiny et shinydashboard ont déjà été chargés pour vous. De plus, l’en-tête du tableau de bord a déjà été enregistré sous le nom header.

Cet exercice fait partie du cours

<cours>Créer des tableaux de bord avec shinydashboard</cours>
Voir le cours

Exercice interactif pratique

Essayez cet exercice en complétant ce code d’exemple.

library(shiny)
library(shinydashboard)

header <- dashboardHeader(
  title = "Analysis results for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",
               messageItem("Colleage", "Hello world!")),
  dropdownMenu(type = "notifications",
               notificationItem("Have you rested today?"),
               taskItem("Dashboard completion", value = 20)))

sidebar <- dashboardSidebar(
  sidebarMenu(
    width = 400,
    id = "pages",
    menuItem("Match details", tabName = "matches", icon = icon("futbol"),
             badgeLabel = "New content!", badgeColor = "green"),
    menuItem("Overall results", tabName = "overall", 
             menuSubItem("Charts", tabName = "charts"),
             menuSubItem("Data table", tabName = "datatable", icon=icon("file-excel"))),
    menuItem("A slider",  sliderInput("slider", "Number of goals", min=0, max=10, value = 2))
  )
)

body <- dashboardBody(
  # Link "matches" to an empty page in the body
  ___(
    ___(___, "Match information goes here")
  )
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)
Modifier et exécuter le code