Interactieve elementen in een shinydashboard

Dashboards bouwen met shinydashboard

Png Kee Seng

Researcher

Scenario

We werken voor een reisbureau in Londen.
Toeristen hebben een verblijf nodig.
Hoe kunnen we helpen?

Een grafische weergave van Londen

Aantal aanbiedingen binnen een prijsklasse
Het aandeel privékamers
Gemiddelde prijzen
Enkele grafieken
Een datatabel
Een kaart van Londen

¹ Afbeelding door Freepik

Schets van het dashboard

Een ruwe schets van het dashboard.

Dashboard bouwen: Het kader opzetten

Maak een wireframe door een leeg shinydashboard op te zetten met een titel en zijbalkknoppen.

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

server <- function(input, output) {}

shinyApp(ui, server)

Dashboard bouwen: ValueBox toevoegen

Valueboxes toevoegen als deel van onze wireframe.

In body:

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

In server:

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

Dashboard bouwen: Bediening toevoegen

Inputs toevoegen — bediening voor gebruikers.

In body:

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

Update server met input$range[1] en input$range[2]

Dashboard bouwen: Interactieve grafieken toevoegen

Interactieve grafieken toevoegen met plotly.

In body:

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

In server:

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

Dashboard bouwen: Nog een grafiek toevoegen

Een tweede grafiek toevoegen op dezelfde dashboardpagina, bereikbaar via een keuzemenu.

In body:

selectInput(inputId = "select", 
    label = "Selecteer groep:", 
    choices = c("Neighbourhood", 
            "Room Type"))

In server:

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

Dashboard bouwen: Beschrijving en tabbladen toevoegen

Extra tekst toevoegen om dit dashboard toe te lichten.

In body:

box(side = "right", ...,
    title = "Welkom in Londen!", 
    "...")

Update in body:

tabBox(id = "tabset", ...,
    tabPanel("Grafieken", ...),
    tabPanel("Datatabel", ...)

Dashboard bouwen: Interactieve tabellen toevoegen

Interactieve tabellen toevoegen met dataTable-functies.

We kunnen shiny-functies gebruiken.

In body:

dataTableOutput("table")

In server:

output$table <- 
    renderDataTable(listings)

Dashboard bouwen: Een interactieve kaart toevoegen

Een leaflet-kaart toevoegen in het dashboard.

In sidebar:

sidebarMenu(
    menuItem("Grafieken", ...),
    menuItem("Kaart", ...))

In body:

leafletOutput("map",...)

In server:

output$map <- renderLeaflet(map)

Laten we oefenen!

Dashboards bouwen met shinydashboard