BaşlayınÜcretsiz başlayın

UI/UX ilkeleriyle wireframe oluşturma

Haydi şimdi bazı ilkeleri uygulayarak panon için wireframe oluşturalım. Bu egzersizde hiçbir görselleştirme çizilmeyecek, bunu unutma.

Portföyü iki hisseden oluşan Sally için bir pano hazırladığını hayal et: Apple (AAPL) ve Disney (DIS). Onun panosuna neleri dahil ederdin?

Dikkate alınacak bazı değişkenler, her hissenin günlük piyasa açılış ve kapanış fiyatlarıdır; bunlar sırasıyla open ve close ile gösterilir. Ayrıca en yüksek ve en düşük fiyatlar high ve low ile gösterilir. İlgi çekici bir diğer değişken de günün işlem hacmidir (yani günde işlem gören hisse adedi) ve volume ile gösterilir.

Bu egzersizde shinydashboard ve shiny kütüphaneleri senin için eklendi ve server() adlı boş bir fonksiyon kaydedildi.

Bu egzersiz, kursun bir parçasıdır

shinydashboard ile Panolar Oluşturma

Kursa Göz Atın

Uygulamalı etkileşimli egzersiz

Bu egzersizi bu örnek kodu tamamlayarak deneyin.

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)
Kodu Düzenle ve Çalıştır