Layout a schede

Mostrare più tabelle e grafici sulla stessa pagina può creare confusione visiva e distrarre chi usa l'app. In questi casi, il layout a schede è molto utile perché permette di visualizzare Risultati diversi come schede.

In questo esercizio partiremo dall'app Shiny con layout a barra laterale dell'esercizio precedente e la modificheremo per usare le schede. Questo esercizio mette anche in evidenza quanto sia semplice, con Shiny, cambiare il layout dell'app con poche modifiche al codice.

La tua app finale dovrebbe assomigliare a questa:

Un'app in cui il selettore del nome appare nella barra laterale a sinistra, mentre il grafico e la tabella compaiono come schede a destra nel pannello principale

Questo esercizio fa parte del corso

Creare applicazioni web con Shiny in R

Visualizza corso

Istruzioni dell'esercizio

Modifica il layout di questa app in modo che il selettore del nome appaia nella barra laterale e che grafico e tabella compaiano come schede separate a destra. Non dimenticare di etichettare le schede!

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

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

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)

Modifica ed esegui il codice