Wireframing med UI/UX-principer

Nu ska vi skapa wireframes för din dashboard och samtidigt tillämpa några av principerna. Observera att inga visualiseringar renderas i den här övningen.

Tänk dig att du skapar en dashboard för Sally, vars portfölj består av två aktier: Apple (AAPL) och Disney (DIS). Vad skulle du inkludera i hennes dashboard?

Några variabler att ta hänsyn till är de dagliga marknadsöppnings- och stängningspriserna för varje aktie, betecknade med close och open, samt de högsta och lägsta priserna, betecknade med high och low. En annan intressant variabel är handelsvoly men för dagen (dvs. antal handlade aktier under dagen), som betecknas med volume.

Biblioteken shinydashboard och shiny är redan inkluderade i den här övningen, och en tom funktion kallad server() har lagrats.

Den här övningen är en del av kursen

Bygga dashboards med shinydashboard

Visa kurs

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

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)

Redigera och kör kod