Mises en page avec barre latérale

Les fonctions de mise en page permettent d’organiser visuellement les entrées et les résultats dans l’interface. Un agencement bien choisi rend une application Shiny plus esthétique et améliore aussi l’expérience utilisateur.

Dans cet exercice, vous allez modifier la mise en page d’une application Shiny qui permet d’explorer la popularité de prénoms tendance. Votre application finale devrait ressembler à ceci :

An app where the name selector appears in the left sidebar, while the graph appears on the right in the main panel

Cet exercice fait partie du cours

<cours>Créer des applications web avec Shiny en R</cours>

Voir le cours

Instructions de l’exercice

Modifiez la mise en page de cette application pour que le sélecteur de nom apparaisse dans la barre latérale et que le graphique et la table apparaissent à droite.

Exercice interactif pratique

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

ui <- fluidPage(
  # MODIFY CODE BELOW: Wrap in a sidebarLayout
    # MODIFY CODE BELOW: Wrap in a sidebarPanel
    selectInput('name', 'Select Name', top_trendy_names$name),
    # MODIFY CODE BELOW: Wrap in a mainPanel
    plotly::plotlyOutput('plot_trendy_names'),
    DT::DTOutput('table_trendy_names')
)

# DO NOT MODIFY
server <- function(input, output, session){
  # Function to plot trends in a name
  plot_trends <- function(){
     babynames %>% 
      filter(name == input$name) %>% 
      ggplot(aes(x = year, y = n)) +
      geom_col()
  }
  output$plot_trendy_names <- plotly::renderPlotly({
    plot_trends()
  })
  
  output$table_trendy_names <- DT::renderDT({
    babynames %>% 
      filter(name == input$name)
  })
}

shinyApp(ui = ui, server = server)

Modifier et exécuter le code