Elementos interactivos en un shinydashboard

Creación de paneles con shinydashboard

Png Kee Seng

Researcher

Escenario

Trabajamos en una agencia de tours en Londres.
Lxs turistas necesitan alojamiento.
¿Cómo podemos ayudarles?

Un gráfico de Londres

Número de anuncios en un rango de precios
Proporción de habitaciones privadas
Precios medios
Algunos gráficos
Una tabla de datos
Un mapa de Londres

¹ Imagen de Freepik

Boceto del dashboard

Un boceto del dashboard.

Construyendo el dashboard: configurar el marco

Crear el wireframe configurando un shinydashboard vacío con título y botones en la barra lateral.

header <- dashboardHeader(
  title = "Home rental listings")
sidebar <- dashboardSidebar()
body <- dashboardBody()
ui <- dashboardPage(header, 
                    sidebar, 
                    body)

server <- function(input, output) {}

shinyApp(ui, server)

Construyendo el dashboard: añadir ValueBox

Añadiendo valueBoxes como parte del wireframing.

En body:

fluidRow(
    valueBoxOutput(outputId = "count"),
    valueBoxOutput(outputId = "prop"),
    valueBoxOutput(outputId = "avg"))

En server:

output$count <- renderValueBox({
    valueBox(..., icon = ...)})
output$prop <- renderValueBox(...)
...

Construyendo el dashboard: añadir controles

Añadiendo inputs: controles para usuarios.

En body:

box(
    side = "right", ...,
    sliderInput(inputId = "range",
        label = "Selecciona rango de precios:",
        min = 0,
        max = 25000,
        value = c(0,25000))
        ))

Actualiza server usando input$range[1] y input$range[2]

Construyendo el dashboard: añadir gráficos interactivos

Añadiendo gráficos interactivos con plotly.

En body:

plotlyOutput("plots", 
    height = 500, 
    width = 600)

En server:

output$plots <- renderPlotly({
      ...
  })

Construyendo el dashboard: añadir otro gráfico

Añadiendo un segundo gráfico en la misma página, accesible desde un desplegable.

En body:

selectInput(inputId = "select", 
    label = "Selecciona grupo:", 
    choices = c("Neighbourhood", 
            "Room Type"))

En server:

output$plots <- renderPlotly({
    if (input$select == ...){plot1}
    else if(input$select == ...){plot2}
  })

Construyendo el dashboard: añadir descripción y pestañas

Añadiendo texto para explicar este dashboard.

En body:

box(side = "right", ...,
    title = "¡Bienvenid@ a Londres!", 
    "...")

Actualiza en body:

tabBox(id = "tabset", ...,
    tabPanel("Charts", ...),
    tabPanel("Data table", ...)

Construyendo el dashboard: añadir tablas interactivas

Añadiendo tablas interactivas con funciones dataTable.

Podemos usar funciones de shiny.

En body:

dataTableOutput("table")

En server:

output$table <- 
    renderDataTable(listings)

Construyendo el dashboard: añadir un mapa interactivo

Añadiendo un mapa leaflet al dashboard.

En sidebar:

sidebarMenu(
    menuItem("Charts", ...),
    menuItem("Map", ...))

En body:

leafletOutput("map",...)

En server:

output$map <- renderLeaflet(map)

¡Vamos a practicar!

Creación de paneles con shinydashboard