Các phần tử tương tác trong shinydashboard

Xây dựng Dashboard với shinydashboard

Png Kee Seng

Researcher

Kịch bản

Chúng ta làm cho một hãng du lịch ở London.
Khách du lịch cần chỗ ở.
Ta có thể giúp gì?

Đồ họa London

Số lượng tin trong một khoảng giá
Tỷ lệ phòng riêng
Giá trung bình
Một số biểu đồ
Bảng dữ liệu
Bản đồ London

¹ Hình ảnh bởi Freepik

Phác thảo dashboard

Bản phác thảo sơ bộ của dashboard.

Xây dựng dashboard: Dựng khung

Dựng khung: tạo shinydashboard trống với tiêu đề và nút sidebar.

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

server <- function(input, output) {}

shinyApp(ui, server)

Xây dựng dashboard: Thêm ValueBox

Thêm valueBox trong bước phác thảo khung.

Trong body:

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

Trong server:

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

Xây dựng dashboard: Thêm điều khiển

Thêm đầu vào — các điều khiển cho người dùng.

Trong body:

box(
    side = "right", ...,
    sliderInput(inputId = "range",
        label = "Chọn khoảng giá:",
        min = 0,
        max = 25000,
        value = c(0,25000))
        ))

Cập nhật server, dùng input$range[1] và input$range[2]

Xây dựng dashboard: Thêm biểu đồ tương tác

Thêm biểu đồ tương tác với plotly.

Trong body:

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

Trong server:

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

Xây dựng dashboard: Thêm biểu đồ khác

Thêm biểu đồ thứ hai trên cùng trang, truy cập qua menu thả xuống.

Trong body:

selectInput(inputId = "select", 
    label = "Chọn nhóm:", 
    choices = c("Neighbourhood", 
            "Room Type"))

Trong server:

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

Xây dựng dashboard: Thêm mô tả và thẻ tab

Thêm văn bản giải thích cho dashboard.

Trong body:

box(side = "right", ...,
    title = "Chào mừng đến London!", 
    "...")

Cập nhật trong body:

tabBox(id = "tabset", ...,
    tabPanel("Biểu đồ", ...),
    tabPanel("Bảng dữ liệu", ...)

Xây dựng dashboard: Thêm bảng tương tác

Thêm bảng tương tác bằng hàm dataTable.

Ta có thể dùng các hàm shiny.

Trong body:

dataTableOutput("table")

Trong server:

output$table <- 
    renderDataTable(listings)

Xây dựng dashboard: Thêm bản đồ tương tác

Thêm bản đồ leaflet trong dashboard.

Trong sidebar:

sidebarMenu(
    menuItem("Biểu đồ", ...),
    menuItem("Bản đồ", ...))

Trong body:

leafletOutput("map",...)

Trong server:

output$map <- renderLeaflet(map)

Ayo berlatih!

Xây dựng Dashboard với shinydashboard