Phần thân

Xây dựng Dashboard với shinydashboard

Png Kee Seng

Researcher

Tổng quan

Phần lớn UI của shinydashboard
Thường đặt inputs và outputs tại đây
- Như món ăn và đơn hàng tại nhà hàng
- Server hỗ trợ giao tiếp
Phần thân được định nghĩa bằng dashboardBody() và thường lưu vào body

body <- dashboardBody(...)

Lên khung (wireframing)

Thực hiện wireframe
- Dựng cấu trúc trước khi thêm nội dung
Trong shinydashboard, hãy quyết định vị trí các đối tượng trước

Khung dây của một khinh khí cầu.

¹ Brett Jordan, Flickr

Thêm hàng và hộp: hộp trống

Thêm hàng với fluidRow()
Và thêm hộp với box()

Bảng điều khiển có hai hàng, mỗi hàng có hai hộp trống.

body <- dashboardBody(

  fluidRow(

           box("Hàng 1, hộp 1"), 
           box("Hàng 1, hộp 2")

           ),
  fluidRow(

           box("Hàng 2, hộp 1"), 
           box("Hàng 2, hộp 2")

           )

)

Thêm hàng và hộp: nội dung trong hộp

Cơ thể với bốn hộp và nội dung trong một số hộp.

body <- dashboardBody(
  fluidRow(box("Hàng 1, hộp 1", 

               plotOutput('plot')),

           box("Hàng 1, hộp 2")),
  fluidRow(box("Hàng 2, hộp 1"), 
           box("Hàng 2, hộp 2", 

               selectInput("select", 
                           "Chọn số đội:", 
                           choices = c(1,2))))

)

Tránh hộp bị tràn

Mặc định, mỗi hộp chiếm 6/12 chiều ngang
Để tránh tràn, đặt width
- Ví dụ: đặt 3, 5 và 4
Rất nên thêm box()

Nhiều hộp hơn trong phần thân

body <- dashboardBody(
  fluidRow(box("Hàng 1, hộp 1"), 
           box("Hàng 1, hộp 2"),
           box("Hàng 1, hộp 3")),
  fluidRow(box("Hàng 2, hộp 1"), 
           box("Hàng 2, hộp 2"))
)

body <- dashboardBody(
  fluidRow(box("Hàng 1, hộp 1", width = 3), 
           box("Hàng 1, hộp 2", width = 5),
           box("Hàng 1, hộp 3", width = 4)),
  fluidRow(box("Hàng 2, hộp 1"), 
           box("Hàng 2, hộp 2"))
)

valueBox và infoBox

Cũng có các hộp hiển thị lượng thông tin nhỏ
- valueBox()
- infoBox()

valueBox và infoBox trong phần thân.

body <- dashboardBody(
  fluidRow(valueBox(value = 3, 
                    subtitle = "Tổng số thẻ đỏ", 
                    icon = icon("user"),
                    color = "red"),

           infoBox(value = 158, 
                   title = "Tổng số bàn thắng", 
                   icon = icon("futbol"))
           ))

valueBoxOutput và infoBoxOutput

Biến thể của valueBox() và infoBox(): valueBoxOutput() và infoBoxOutput()
Đây là các hàm output
Cũng có renderValueBox() và renderInfoBox()
Cần cả valueBox() và infoBox()

valueBoxOutput và infoBoxOutput trong phần thân. Bảng điều khiển hiển thị giống hệt như trước.

body <- dashboardBody(
  fluidRow(valueBoxOutput(outputId = "valuebox1"),
           infoBoxOutput(outputId = "infobox1")
           ))

server <- function(input, output){
  output$valuebox1 <- renderValueBox(
    valueBox(3, "Tổng số thẻ đỏ",
                icon = icon("user"), color = "red"))
  output$infobox1 <- renderInfoBox(
    infoBox(158, 
                   title = "Tổng số bàn thắng", 
                   icon = icon("futbol")))
}

Tương tự giữa valueBoxOutput và plotOutput

plotOutput():
- Đặt trong UI
- Xác định vị trí trong shinydashboard
renderPlot():
- Đặt trong server()
- Chứa một đối tượng ggplot()

valueBoxOutput():
- Đặt trong UI
- Xác định vị trí trong shinydashboard
renderValueBox():
- Đặt trong server()
- Chứa một đối tượng valueBox()

Liên kết sidebar và phần thân

Nhớ lại sidebar trước đó có hai nút "charts" và "statistics"
Để liên kết với phần thân, cần thêm tabItems()
- Mỗi trang do tabItem() định nghĩa
- Nhãn trong từng cặp menuItem()-tabItem() phải khớp

Phần thân và sidebar đã được liên kết

sidebar <- dashboardSidebar(
  sidebarMenu(
    id = "pages",

    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", badgeColor = "green"),

    menuItem("Statistics", icon = icon("file-excel"), 
             tabName = "statistics", 
             badgeLabel = "urgent", badgeColor = "red")
 ))

body <- dashboardBody(
  tabItems(

    tabItem("charts",
      "Biểu đồ ở đây."
    ),
    tabItem("statistics",
      "Thống kê ở đây."
)))

Các tab trong phần thân

Trong shinyApp, có thể tạo bộ thẻ bằng tabsetPanel()
- Mỗi thẻ do tabPanel() định nghĩa
Không nhầm với tabItems() và tabItem()

Thêm tabset trong phần thân

body <- dashboardBody(tabsetPanel(

    tabPanel("Distributions", 
             box(plotOutput("dist"))),
    tabPanel("Statistics", 
             dateInput("matchdate", 
                       "Nhập ngày thi đấu:", 
                       value = "2022-11-20"),
             valueBoxOutput("red"), 
             valueBoxOutput("yellow")),
    tabPanel("Data", "Dữ liệu ở đây.", 
             tableOutput("data"))

))

server <- function(input, output){
  output$red <- renderValueBox(valueBox(0, "Thẻ đỏ"))
  output$yellow <- renderValueBox(valueBox(6, "Thẻ vàng"))
}

Ayo berlatih!

Xây dựng Dashboard với shinydashboard