LoslegenKostenlos loslegen

Wireframing mit UI/UX-Grundsätzen

Erstellen wir nun ein Wireframe für dein Dashboard und wenden dabei einige der Prinzipien an. Beachte, dass in dieser Übung keine Visualisierungen gerendert werden.

Stell dir vor, du erstellst ein Dashboard für Sally, deren Portfolio aus zwei Aktien besteht: Apple (AAPL) und Disney (DIS). Was würdest du in ihr Dashboard aufnehmen?

Einige zu berücksichtigende Variablen sind die täglichen Eröffnungs- und Schlusskurse jeder Aktie, bezeichnet mit open und close, sowie die Höchst- und Tiefstkurse, bezeichnet mit high und low. Eine weitere interessante Variable ist das tägliche Handelsvolumen (also die Anzahl der gehandelten Aktien pro Tag), bezeichnet mit volume.

Die Bibliotheken shinydashboard und shiny wurden für dich in dieser Übung bereits eingebunden, und eine leere Funktion namens server() wurde gespeichert.

Diese Übung ist Teil des Kurses

Dashboards mit shinydashboard erstellen

Kurs anzeigen

Interaktive Übung

Vervollständige den Beispielcode, um diese Übung erfolgreich abzuschließen.

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 bearbeiten und ausführen