เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

การทำ Wireframe ด้วยหลักการ UI/UX

มาลองทำ Wireframe สำหรับแดชบอร์ดโดยประยุกต์ใช้หลักการที่ได้เรียนไป ทั้งนี้ แบบฝึกหัดนี้จะยังไม่แสดงผลภาพข้อมูลใด ๆ

ลองนึกภาพว่ากำลังสร้างแดชบอร์ดให้ Sally ซึ่งมีพอร์ตการลงทุนประกอบด้วยหุ้น 2 ตัว ได้แก่ Apple (AAPL) และ Disney (DIS) จะรวมข้อมูลอะไรบ้างในแดชบอร์ดของเธอ?

ตัวแปรที่ควรพิจารณามีดังนี้ ได้แก่ ราคาเปิดและราคาปิดตลาดรายวันของแต่ละหุ้น ซึ่งแทนด้วย close และ open รวมถึงราคาสูงสุดและต่ำสุด ซึ่งแทนด้วย high และ low นอกจากนี้ยังมีตัวแปรปริมาณการซื้อขายประจำวัน (จำนวนหุ้นที่ซื้อขายในแต่ละวัน) ซึ่งแทนด้วย volume

ไลบรารี shinydashboard และ shiny ได้ถูกเพิ่มไว้ให้แล้วในแบบฝึกหัดนี้ และมีฟังก์ชันว่างชื่อ server() ถูกเก็บไว้ให้เรียบร้อย

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

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

ดูคอร์ส

แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ

ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์

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)
แก้ไขและรันโค้ด