Diseños con pestañas
Mostrar varias tablas y gráficos en la misma página puede generar ruido visual y distraer a quienes usan la app. En estos casos, el diseño con pestañas resulta muy útil, porque permite mostrar diferentes resultados como pestañas.
En este ejercicio, partiremos de la app de Shiny con diseño de barra lateral del ejercicio anterior y la modificaremos para usar pestañas. Este ejercicio también deja claro que Shiny facilita muchísimo cambiar el diseño de una app con solo unas pocas modificaciones en el código.
Tu app final debería verse así:
Este ejercicio forma parte del curso
Creación de aplicaciones web con Shiny en R
Instrucciones del ejercicio
- Modifica el diseño de esta app para que el selector de nombres aparezca en la barra lateral y el gráfico y la tabla aparezcan como pestañas separadas a la derecha. ¡No te olvides de poner etiquetas a las pestañas!
Ejercicio interactivo práctico
Prueba este ejercicio y completa el código de muestra.
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)