Elemen interaktif di shinydashboard

Membangun Dashboard dengan shinydashboard

Png Kee Seng

Researcher

Skenario

Kita bekerja untuk agen tur di London.
Turis butuh tempat menginap.
Apa yang bisa kita lakukan untuk membantu?

Grafik London

Jumlah listing dalam rentang harga
Proporsi kamar privat
Rata-rata harga
Beberapa grafik
Tabel data
Peta London

¹ Gambar oleh Freepik

Sketsa dashboard

Sketsa kasar dashboard.

Membangun dashboard: Menyiapkan kerangka

Lakukan wireframing dengan menyiapkan shinydashboard kosong dengan judul dan tombol sidebar.

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

server <- function(input, output) {}

shinyApp(ui, server)

Membangun dashboard: Menambahkan ValueBox

Menambahkan valueBox sebagai bagian dari wireframing.

Di body:

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

Di server:

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

Membangun dashboard: Menambahkan kontrol

Menambahkan input—kontrol untuk pengguna.

Di body:

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

Perbarui server, gunakan input$range[1] dan input$range[2]

Membangun dashboard: Menambahkan plot interaktif

Menambahkan plot interaktif dengan plotly.

Di body:

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

Di server:

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

Membangun dashboard: Menambahkan plot lain

Menambahkan plot kedua pada halaman yang sama, diakses lewat menu dropdown.

Di body:

selectInput(inputId = "select", 
    label = "Pilih grup:", 
    choices = c("Neighbourhood", 
            "Room Type"))

Di server:

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

Membangun dashboard: Menambah deskripsi dan tab

Menambahkan teks penjelas untuk dashboard.

Di body:

box(side = "right", ...,
    title = "Selamat datang di London!", 
    "...")

Perbarui di body:

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

Membangun dashboard: Menambahkan tabel interaktif

Menambahkan tabel interaktif dengan fungsi dataTable.

Kita dapat memakai fungsi shiny.

Di body:

dataTableOutput("table")

Di server:

output$table <- 
    renderDataTable(listings)

Membangun dashboard: Menambahkan peta interaktif

Menambahkan peta leaflet di dashboard.

Di sidebar:

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

Di body:

leafletOutput("map",...)

Di server:

output$map <- renderLeaflet(map)

Ayo berlatih!

Membangun Dashboard dengan shinydashboard