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.
This exercise is part of the course
Building Dashboards with shinydashboard
Hands-on interactive exercise
Have a go at this exercise by completing this sample 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)