Mulai sekarangMulai gratis

Wireframing dengan prinsip UI/UX

Sekarang mari lakukan wireframing untuk dashboard Anda sambil menerapkan beberapa prinsip yang telah dipelajari. Perhatikan bahwa tidak ada visualisasi yang akan dirender pada latihan ini.

Bayangkan Anda membuat dashboard untuk Sally yang portofolionya terdiri dari dua saham, Apple (AAPL) dan Disney (DIS). Apa saja yang akan Anda tampilkan di dashboardnya?

Beberapa variabel yang perlu dipertimbangkan adalah harga pembukaan dan penutupan harian setiap saham, ditandai dengan close dan open, serta harga maksimum dan minimum, ditandai dengan high dan low. Variabel lain yang menarik adalah volume perdagangan harian (yaitu jumlah saham yang diperdagangkan dalam sehari), yang ditandai dengan volume.

Pustaka shinydashboard dan shiny sudah disertakan untuk Anda dalam latihan ini, dan sebuah fungsi kosong bernama server() telah disiapkan.

Latihan ini merupakan bagian dari kursus

Membangun Dashboard dengan shinydashboard

Lihat Kursus

Latihan interaktif langsung praktik

Cobalah latihan ini dengan melengkapi kode contoh ini.

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)
Edit dan Jalankan Kode