Interactive elements in a shinydashboard

Building Dashboards with shinydashboard

Png Kee Seng

Researcher

Scenario

We work for a tour agency in London.
Tourists need a place to stay.
What can we do to help them?

A graphic of London

Number of listings within a price range
The proportion of private rooms
Average prices
Some charts
A data table
A map of London

¹ Image by Freepik

Sketch of the dashboard

A rough sketch of the dashboard.

Building the dashboard: Setting up the frame

Carry out wireframing by setting up an empty shinydashboard with a desired title and sidebar buttons.

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

server <- function(input, output) {}

shinyApp(ui, server)

Building the dashboard: Adding ValueBox

Adding valueboxes as part of our wireframing efforts.

In body:

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

In server:

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

Building the dashboard: Adding controls

Adding inputs -- controls for users.

In body:

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

Update server, using input$range[1] and input$range[2]

Building the dashboard: Adding interactive plots

Adding interactive plots using plotly.

In body:

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

In server:

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

Building the dashboard: Adding another plot

Adding a second plot within the same dashboard page that can be accessed via a dropdown menu.

In body:

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

In server:

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

Building the dashboard: Adding a description and adding tabs

Adding additional text to provide an explanation for this dashboard.

In body:

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

Update in body:

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

Building the dashboard: Adding interactive tables

Adding interactive tables using dataTable functions.

We can use shiny functions.

In body:

dataTableOutput("table")

In server:

output$table <- 
    renderDataTable(listings)

Building the dashboard: Adding an interactive map

Adding a leaflet map in the dashboard.

In sidebar:

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

In body:

leafletOutput("map",...)

In server:

output$map <- renderLeaflet(map)

Let's practice!

Building Dashboards with shinydashboard