Lên khung (wireframe) với các nguyên tắc UI/UX
Bây giờ, hãy tiến hành lên khung (wireframing) cho bảng điều khiển của bạn, đồng thời áp dụng một số nguyên tắc. Lưu ý: bài tập này sẽ không hiển thị bất kỳ trực quan hóa nào.
Hãy hình dung bạn tạo một bảng điều khiển cho Sally với danh mục gồm hai cổ phiếu, Apple (AAPL) và Disney (DIS). Bạn sẽ đưa những gì vào bảng điều khiển của cô ấy?
Một số biến cần xem xét gồm giá mở cửa và đóng cửa hằng ngày của mỗi cổ phiếu, ký hiệu là close và open, cũng như giá cao nhất và thấp nhất, ký hiệu là high và low. Một biến khác đáng quan tâm là khối lượng giao dịch trong ngày (tức số cổ phiếu được giao dịch trong ngày), ký hiệu là volume.
Các thư viện shinydashboard và shiny đã được nạp sẵn cho bạn trong bài tập này, và một hàm trống có tên server() đã được lưu.
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
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.
library(shinydashboard)
library(shiny)
header <- dashboardHeader(
title = "Portfolio dashboard for Sally",
titleWidth = 300
)
sidebar <- dashboardSidebar(
width = 300,
sidebarMenu(
id = "pages",
menuItem("Historical trends",
tabName = "historical"),
menuItem("Profits and Losses (PnLs)",
tabName = "profit",
icon = icon("money-bill-alt"),
# Truncate the number in the badge label to 2 decimal places
badgeLabel = "+2.324815454862%",
# Change the badge color to green
badgeColor = "red")
)
)
body <- dashboardBody(tabItems(
tabItem(tabName = "historical",
fluidRow(box(selectInput("stock", "Select stock symbol",
choices=c("AAPL", "DIS"))),
box("Stock name", width = 6)),
fluidRow(box("valueBox", "Open", width = 2),
box("valueBox", "High", width = 2),
box("valueBox", "Low", width = 2),
box("valueBox", "Close", width = 2),
box("valueBox", "Volume", width = 2)),
fluidRow(box("valueBox", "Open % change", width = 2, color = "red"),
box("valueBox", "High % change", width = 2),
box("valueBox", "Low % change", width = 2),
box("valueBox", "Close % change", width = 2),
box("valueBox", "Volume % change", width = 2))),
tabItem(tabName = "profit",
fluidRow(box("valueBox", "Account balance", width = 3),
box("valueBox", "Value at Risk (Var)", width = 3),
box("valueBox", "Returns", width = 3),
box("valueBox", "Profit-to-loss ratio", width = 3)),
fluidRow(box("PnL chart", width = 12, height = 400)))
)
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)