Aan de slagBegin gratis

Wireframing met UI/UX-principes

Laten we nu wireframing voor je dashboard uitvoeren en daarbij enkele van de principes toepassen. Let op: in deze oefening worden geen visualisaties weergegeven.

Stel je voor dat je een dashboard maakt voor Sally, wiens portefeuille bestaat uit twee aandelen: Apple (AAPL) en Disney (DIS). Wat zou je in haar dashboard opnemen?

Enkele variabelen om te overwegen zijn de dagelijkse openings- en slotkoersen van elk aandeel, aangeduid met close en open, evenals de maximale en minimale koersen, aangeduid met high en low. Een andere interessante variabele is het handelsvolume van de dag (dus het aantal verhandelde aandelen die dag), aangeduid met volume.

De libraries shinydashboard en shiny zijn voor je opgenomen in deze oefening, en een lege functie genaamd server() is opgeslagen.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met shinydashboard

Bekijk cursus

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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)
Code bewerken en uitvoeren