Tabbladen-layouts

Meerdere tabellen en grafieken op dezelfde pagina tonen kan visuele ruis veroorzaken en afleiden. In zulke gevallen is de tabbladen-layout handig, omdat je daarmee verschillende resultaten als tabbladen kunt weergeven.

In deze oefening beginnen we met de Shiny-app met de sidebar-layout uit de vorige oefening en passen we die aan om tabbladen te gebruiken. Deze oefening laat ook goed zien dat Shiny het heel gemakkelijk maakt om app-layouts te wisselen met maar een paar aanpassingen in de code.

Je uiteindelijke app zou er ongeveer zo uit moeten zien:

Een app waarbij de naamselector in de linkerzijbalk staat, en de grafiek en tabel als tabbladen rechts in het hoofdvenster verschijnen

Deze oefening maakt deel uit van de cursus

Webapplicaties bouwen met Shiny in R

Cursus bekijken

Oefeninstructies

Pas de layout van deze app aan zodat de naamselector in de sidebar staat en de grafiek en de tabel rechts als aparte tabbladen verschijnen. Vergeet niet de tabbladen te labelen!

Praktische interactieve oefening

Probeer deze oefening eens door deze voorbeeldcode in te vullen.

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)

Code bewerken en uitvoeren