CommencerCommencer gratuitement

Wireframing with UI/UX principles

Let's now carry out wireframing for your dashboard, while applying some of the principles. Note that no visualizations will be rendered in this exercise.

Imagine creating a dashboard for Sally whose portfolio is made up of two stocks, Apple (AAPL) and Disney (DIS). What would you include in her dashboard?

Some variables to be considered are the daily market opening and closing prices of each stock, denoted by close and open, as well as the maximum and minimum prices, denoted by high and low. Another variable of interest is the trading volume for the day (i.e., number of shares traded for the day), which is denoted by volume.

The shinydashboard and shiny libraries have been included for you in this exercise, and an empty function called server() has been stored.

Cet exercice fait partie du cours

Building Dashboards with shinydashboard

Afficher le cours

Exercice interactif pratique

Essayez cet exercice en complétant cet exemple de code.

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)
Modifier et exécuter le code