8.2 The User Interface

8.2.1 skin()

The skin is a color theme. See (https://adminlte.io/themes/AdminLTE/pages/UI/general.html). If the skin is light, the sidebar will have a light background. I love midnight skin, so I used it a lot. When creating an app for yourself, it is easy to choose the look you want, it depends on the type of app you create, the plot color should look good on your application with the skin you choose. Here is the list of the skin color.

skin = c("blue", "blue-light", "black", "black-light", "purple", "purple-light", "green", "green-light", "red", "red-light", "yellow", "yellow-light", "midnight")

8.2.2 header()

Figure 8.2: The Application Header

I included the header with the header.R in the UI header = source("header.R", local = TRUE)$value, let’s have a look the file header.R

dashboardHeader(
  tags$li(
    class = "dropdown",
    tags$style(".main-header {max-height: 38px}"),
    tags$style(".main-header .logo {height: 38px}")
  ),
  title = div(
    span(
      img(
        src = "stock_header.png",
        height = 40,
        width = "20%"
      ),
      "Stock Market Forecasting"
    ),
    align = "left",
    width = "100%",
    style = "padding-right:0px;"
  ),
  titleWidth = 310
)

8.2.3 sidebar()

Figure 8.3: The Application Sidebar

I included the sidebar with the sidebar.R in the UI sidebar = source("sidebar.R", local = TRUE)$value, let’s have a look the file sidebar.R

The sidebarMenu() included the pickerInput(), it obtained list of stickers, dateInput() and actionButton()

dashboardSidebar(
  width = 310,
  div(class = "inlay", style = "height:10px;;"),
  div(style = "overflow: visible;width:inherit;",
      sidebarMenu(
        menuItem(
          "Stock Symbols Selection",
          tabName = "stock_symbol",
          icon = icon("dashboard"),
          hr(),
          pickerInput(
            inputId = "stickers",
            label = "Select Stock Symbols: ",
            choices = sticker$symbol,
            multiple = TRUE,
            selected = c("GOOGL", "FB", "AMZN", "AAPL"),
            options = list(
              `max-options` = 8,
              `actions-box` = TRUE,
              `live-search` = TRUE,
              `virtual-scroll` = 10,
              `multiple-separator` = "\n",
              size = 10
            ),
            choicesOpt = list(content = stringr::str_trunc(sticker$choices, width = 30))
          ),
          dateInput(
            "dt_frome",
            "Date from:",
            value = Sys.Date() - 720,
            max = Sys.Date() - 360
          ),
          dateInput("dt_to", "Date to:", value = Sys.Date(), min = Sys.Date() -
                      360),
          actionButton("submit", "Get Symbols", icon("paper-plane"),
                       style = "color: #fff; background-color: #32907c; border-color: #32907c"),
          br(),
          hr()
        )
      ))
)

A dashboardSidebar() can contain a sidebarMenu. A sidebarMenu contains menuItems, and they can in turn contain menuSubItems.

dashboardSidebar(
  sidebarMenu(
    menuItems(
      menuSubItems(),
      menuSubItems()
    ),
    menuItems(),
    menuItems()
  )
)

Here is an example dashboardSidebar()

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(), 
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", icon = icon("th"), tabName = "widgets"),
      menuItem("Charts", icon = icon("bar-chart-o"), startExpanded = TRUE,
        menuSubItem("Sub-item 1", tabName = "subitem1"),
        menuSubItem("Sub-item 2", tabName = "subitem2")
      )
    ),
    textOutput("res")
  ),
  dashboardBody(
    tabItems(
      tabItem("dashboard", "Dashboard tab content"),
      tabItem("widgets", "Widgets tab content"),
      tabItem("subitem1", "Sub-item 1 tab content"),
      tabItem("subitem2", "Sub-item 2 tab content") 
    )
  )
)

server <- function(input, output, session) {
  output$res <- renderText({
    req(input$sidebarItemExpanded)
    paste("Expanded menuItem:", input$sidebarItemExpanded)
  })
}

shinyApp(ui, server)

Now we learn how to use pickerInput(), it’s from shinyWidgets package. Here is pickerInput() function

pickerInput(
  inputId,
  label = NULL,
  choices,
  selected = NULL,
  multiple = FALSE,
  options = list(),
  choicesOpt = NULL,
  width = NULL,
  inline = FALSE
)

You see choices = sticker$symbol, I read sticker data from global.R, you will find the following codes in global.R

nyse <- read.csv("data/nyse.csv", stringsAsFactors = FALSE)
nasdaq  <- read.csv("data/nasdaqcsv.csv", stringsAsFactors = FALSE)
constituents <- read.csv("data/constituents.csv", stringsAsFactors = FALSE)
other <- read.csv("data/other-listed.csv", stringsAsFactors = FALSE)
sticker <- rbind(nasdaq, nyse[,c(1,2)], constituents[, c(1,2)], other[,c(1,2)])
sticker <- sticker[duplicated(sticker$symbol),]
sticker$choices <- paste0(sticker$symbol, ": ",sticker$name)

The following input is dateInput() dateInput(inputId, label, value=NULL, min=NULL, max=NULL,format=”yyyy-mm-dd”,startview=”month”, weekstart=0,language = "of", width=NULL, autoclose=TRUE, datesdisabled=NULL, daysofweekdisabled=NULL). I used 2 dateInput(), one for “Data From” and the other for “Date to”. The last entry is the actionButton, it tells the application to get data after clicking on it.

8.2.4 controlbar()

Figure 8.4: The Application Controlbar

dashboardControlbar(
    tagList(
      fluidRow(column(width = 8, offset = 2,br(),
      actionButton("refresh","Refresh",icon("refresh", lib = "font-awesome"), 
      width = "100%",
      style = "color: #fff; background-color: #DD6B55; border-color: #DD6B55"))),
      helpText("This is refresh button, it will help you to reset your application 
               back to default.", 
      style = "padding-left : 10px; padding-right : 10px;")
      )
  )