Layouts com abas

Exibir várias tabelas e gráficos na mesma página pode gerar poluição visual e distrair quem usa o app. Nesses casos, o layout com abas é muito útil, pois permite mostrar diferentes saídas em abas separadas.

Neste exercício, vamos começar com o app Shiny usando o layout com barra lateral do exercício anterior e modificá-lo para usar abas. Este exercício também deixa claro como o Shiny facilita a troca de layouts do app com poucas alterações no código.

Seu app final deve se parecer visualmente com isto:

Um app em que o seletor de nomes aparece na barra lateral à esquerda, enquanto o gráfico e a tabela aparecem como abas à direita no painel principal

Este exercício faz parte do curso

Construindo Aplicações Web com Shiny em R

Ver curso

Instruções do exercício

Modifique o layout deste app para que o seletor de nomes apareça na barra lateral e o gráfico e a tabela apareçam como abas separadas à direita. Não se esqueça de rotular as abas!

Exercício interativo prático

Experimente este exercício completando este código de exemplo.

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)

Editar e executar o código