Layouturi cu tab-uri

Afișarea mai multor tabele și grafice pe aceeași pagină poate crea dezordine vizuală și poate distrage utilizatorii aplicației. În astfel de cazuri, layoutul cu tab-uri este foarte util, deoarece permite afișarea diferitelor rezultate sub formă de tab-uri.

În acest exercițiu, vom porni de la aplicația Shiny cu layoutul tip sidebar din exercițiul anterior și o vom modifica pentru a folosi tab-uri. Acest exercițiu îți va demonstra clar cât de ușor este să schimbi layoutul unei aplicații Shiny cu doar câteva modificări ale codului.

Aplicația ta finală ar trebui să arate vizual astfel:

O aplicație în care selectorul de nume apare în bara laterală stângă, iar graficul și tabelul apar ca tab-uri în panoul principal din dreapta

Acest exercițiu face parte din cursul

Crearea aplicațiilor web cu Shiny în R

Vezi cursul

Instrucțiuni pentru exercițiu

Modifică layoutul acestei aplicații astfel încât selectorul de nume să apară în bara laterală, iar graficul și tabelul să fie afișate ca tab-uri separate în dreapta. Nu uita să etichetezi tab-urile!

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

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)

Editează și rulează codul