องค์ประกอบเชิงโต้ตอบใน shinydashboard

การสร้างแดชบอร์ดด้วย shinydashboard

Png Kee Seng

Researcher

สถานการณ์

เราทำงานให้กับบริษัททัวร์แห่งหนึ่งในลอนดอน
นักท่องเที่ยวต้องการที่พัก
เราจะช่วยพวกเขาได้อย่างไร?

ภาพกราฟิกของลอนดอน

จำนวนรายการในช่วงราคาที่กำหนด
สัดส่วนของห้องส่วนตัว
ราคาเฉลี่ย
แผนภูมิต่าง ๆ
ตารางข้อมูล
แผนที่ลอนดอน

¹ Image by Freepik

ภาพร่างแดชบอร์ด

ภาพร่างคร่าว ๆ ของแดชบอร์ด

สร้างแดชบอร์ด: ตั้งค่าโครงสร้างหลัก

สร้าง wireframe โดยตั้งค่า shinydashboard เปล่าพร้อมชื่อและปุ่ม sidebar ที่ต้องการ

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

server <- function(input, output) {}

shinyApp(ui, server)

สร้างแดชบอร์ด: เพิ่ม ValueBox

เพิ่ม valuebox เป็นส่วนหนึ่งของการสร้าง wireframe

ใน body:

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

ใน server:

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

สร้างแดชบอร์ด: เพิ่มตัวควบคุม

เพิ่ม input — ตัวควบคุมสำหรับผู้ใช้

ใน body:

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

อัปเดต server โดยใช้ input$range[1] และ input$range[2]

สร้างแดชบอร์ด: เพิ่มกราฟเชิงโต้ตอบ

เพิ่มกราฟเชิงโต้ตอบโดยใช้ plotly

ใน body:

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

ใน server:

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

สร้างแดชบอร์ด: เพิ่มกราฟอีกชาร์ต

เพิ่มกราฟที่สองในหน้าแดชบอร์ดเดียวกัน สามารถเข้าถึงได้ผ่านเมนูแบบเลื่อนลง

ใน body:

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

ใน server:

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

สร้างแดชบอร์ด: เพิ่มคำอธิบายและแท็บ

เพิ่มข้อความอธิบายสำหรับแดชบอร์ด

ใน body:

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

อัปเดตใน body:

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

สร้างแดชบอร์ด: เพิ่มตารางเชิงโต้ตอบ

เพิ่มตารางเชิงโต้ตอบโดยใช้ฟังก์ชัน dataTable

ใช้ฟังก์ชันของ shiny ได้เลย

ใน body:

dataTableOutput("table")

ใน server:

output$table <- 
    renderDataTable(listings)

สร้างแดชบอร์ด: เพิ่มแผนที่เชิงโต้ตอบ

เพิ่มแผนที่ leaflet ในแดชบอร์ด

ใน sidebar:

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

ใน body:

leafletOutput("map",...)

ใน server:

output$map <- renderLeaflet(map)

มาฝึกกันเถอะ!

การสร้างแดชบอร์ดด้วย shinydashboard