Elementos interativos em um shinydashboard

Construindo dashboards com shinydashboard

Png Kee Seng

Researcher

Cenário

Trabalhamos para uma agência de turismo em Londres.
Turistas precisam de um lugar para ficar.
Como podemos ajudar?

Um gráfico de Londres

Número de anúncios em uma faixa de preço
Proporção de quartos privados
Preços médios
Alguns gráficos
Uma tabela de dados
Um mapa de Londres

¹ Imagem por Freepik

Esboço do dashboard

Um esboço do dashboard.

Construindo o dashboard: Montando a estrutura

Fazer o wireframe configurando um shinydashboard vazio com um título e botões da barra lateral.

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

server <- function(input, output) {}

shinyApp(ui, server)

Construindo o dashboard: Adicionando ValueBox

Adicionando valueBoxes como parte do wireframe.

Em body:

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

Em server:

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

Construindo o dashboard: Adicionando controles

Adicionando inputs — controles para usuários.

Em body:

box(
    side = "right", ...,
    sliderInput(inputId = "range",
        label = "Select price range:",
        min = 0,
        max = 25000,
        value = c(0,25000))
        ))

Atualize o server, usando input$range[1] e input$range[2]

Construindo o dashboard: Adicionando gráficos interativos

Adicionando gráficos interativos com plotly.

Em body:

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

Em server:

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

Construindo o dashboard: Adicionando outro gráfico

Adicionando um segundo gráfico na mesma página do dashboard, acessível por um menu suspenso.

Em body:

selectInput(inputId = "select", 
    label = "Select group:", 
    choices = c("Neighbourhood", 
            "Room Type"))

Em server:

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

Construindo o dashboard: Adicionando descrição e abas

Adicionando texto para explicar este dashboard.

Em body:

box(side = "right", ...,
    title = "Welcome to London!", 
    "...")

Atualize em body:

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

Construindo o dashboard: Adicionando tabelas interativas

Adicionando tabelas interativas com funções dataTable.

Podemos usar funções do shiny.

Em body:

dataTableOutput("table")

Em server:

output$table <- 
    renderDataTable(listings)

Construindo o dashboard: Adicionando um mapa interativo

Adicionando um mapa leaflet no dashboard.

Em sidebar:

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

Em body:

leafletOutput("map",...)

Em server:

output$map <- renderLeaflet(map)

Vamos praticar!

Construindo dashboards com shinydashboard