Statuses và hoàn thiện UI
Một nguyên tắc của UI tốt là dùng màu sắc một cách trực quan. May mắn là shinydashboard cho phép đặt trạng thái (status) cho một số phần tử của shinydashboard. Bạn làm điều này bằng cách thêm đối số status vào các phần tử phù hợp như box(), notificationItem(), dropdownMenu(), dù hai hàm sau sẽ không được đề cập trong khóa học này.
Đặt status = "success" sẽ cho màu xanh lá, status = "danger" cho màu đỏ, status = "warning" là màu cam, v.v.
Bài tập này là một phần của khóa học
Xây dựng Dashboard với shinydashboard
Hướng dẫn bài tập
- Đổi trạng thái của hộp đầu tiên ở hàng thứ ba thành "success".
- Tham chiếu dòng 28 đến 33, nơi các giá trị cho
ValueBox()ở hàng thứ hai được chỉ định, và làm tương tự cho các hộp ở hàng thứ ba. - Định nghĩa đầu ra của đối tượng
plotlyđược đặt tên là "line" ở bước trước. - Kết xuất shinydashboard bằng
uivàservermà bạn vừa định nghĩa.
Bài tập tương tác thực hành trực tiếp
Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.
header <- dashboardHeader(title = "Portfolio information")
sidebar <- dashboardSidebar(disable = TRUE)
body <- dashboardBody(
fluidRow(box(selectInput("stock", "Stock name", choices = c("AAPL", "DIS")))),
fluidRow(valueBoxOutput("name", width = 2),
valueBoxOutput("open", width = 2),
valueBoxOutput("close", width = 2),
valueBoxOutput("high", width = 2),
valueBoxOutput("low", width = 2),
valueBoxOutput("vol", width = 2)),
# Change status to "success"
fluidRow(box("This stock is in your portfolio", width = 2, status = "danger"),
valueBoxOutput("open_pct", width = 2),
valueBoxOutput("close_pct", width = 2),
valueBoxOutput("high_pct", width = 2),
valueBoxOutput("low_pct", width = 2),
valueBoxOutput("vol_pct", width = 2)),
fluidRow(box(plotlyOutput("line")),
box(radioButtons("feature", "Features",
choiceNames = c("Open", "Close", "High", "Low", "Volume"),
choiceValues = c("open", "close", "high", "low", "volume")) ) )
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output) {
output$name <- renderValueBox(valueBox("Stock name", get_name(input$stock), color = "black"))
output$open <- renderValueBox(valueBox("Open price", most_recent(input$stock, "open"), color = "black"))
output$close <- renderValueBox(valueBox("Close price", most_recent(input$stock, "close"), color = "black"))
output$high <- renderValueBox(valueBox("High", most_recent(input$stock, "high"), color = "black"))
output$low <- renderValueBox(valueBox("Low", most_recent(input$stock, "low"), color = "black"))
output$vol <- renderValueBox(valueBox("Volume", most_recent(input$stock, "volume"), color = "black"))
# Specify the values for ValueBoxes in the third row
output$open_pct <- ___(valueBox("Change", paste0(most_recent_pct(input$stock, "open"),"%"), color = box_color(most_recent_pct(input$stock, "open"))))
___ <- ___(___("Change", paste0(most_recent_pct(input$stock, "close"),"%"), color = box_color(most_recent_pct(input$stock, "close"))))
___ <- ___(___("Change", paste0(most_recent_pct(input$stock, "high"),"%"), color = box_color(most_recent_pct(input$stock, "high"))))
___ <- ___(___("Change", paste0(most_recent_pct(input$stock, ___),"%"), color = box_color(most_recent_pct(input$stock, ___))))
___ <- ___(___("Change", paste0(most_recent_pct(___, ___),"%"), color = box_color(most_recent_pct(___, ___))))
# Plotly object in the fourth row
___ <- ___(plot_line(input$stock, input$feature))
}
# Render the dashboard using shinyApp()
___