การตั้งค่า Status และการทำ UI ให้สมบูรณ์
หลักการออกแบบ UI ที่ดีข้อหนึ่งคือการใช้สีอย่างสอดคล้องกับความหมาย โชคดีที่ shinydashboard มีตัวเลือกให้ตั้งค่า status ในองค์ประกอบต่าง ๆ ได้ โดยเพิ่ม argument status เข้าไปในองค์ประกอบที่รองรับ เช่น box(), notificationItem(), dropdownMenu() (อย่างไรก็ตาม สองฟังก์ชันหลังไม่ได้อยู่ในขอบเขตของคอร์สนี้)
การตั้งค่า status = "success" จะได้สีเขียว, status = "danger" จะได้สีแดง, status = "warning" จะได้สีส้ม และอื่น ๆ ตามลำดับ
แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร
การสร้างแดชบอร์ดด้วย shinydashboard
คำแนะนำการฝึกหัด
- เปลี่ยน status ของ box แรกในแถวที่สามเป็น "success"
- อ้างอิงบรรทัดที่ 28 ถึง 33 ซึ่งกำหนดค่าสำหรับ
ValueBox()ในแถวที่สอง แล้วทำแบบเดียวกันกับValueBox()ในแถวที่สาม - กำหนด output ของ object
plotlyที่ตั้งชื่อว่า "line" ไว้ในขั้นตอนก่อนหน้า - เรนเดอร์ shinydashboard โดยใช้
uiและserverที่กำหนดไว้
แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ
ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์
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()
___