Statuses and completing the UI

One of the principles of good UI states that we ought to use colors intuitively. Luckily for us, shinydashboard has an option to set statuses in some shinydashboard elements. This is done by adding a status argument to those appropriate elements, like box(), notificationItem(), dropdownMenu(), although the latter two functions will not be covered in this course.

Setting status = "success" results in a green coloration, status = "danger" results in a red coloration, status = "warning" is orange, and so on.

Deze oefening maakt deel uit van de cursus

Building Dashboards with shinydashboard

Cursus bekijken

Oefeninstructies

Change the status of the first box in the third row to "success".
Refer to lines 28 to 33, where the values for ValueBox()s in the second row are specified, and do the same for those in the third row.
Define the output of the plotly object which was named "line" in the previous step.
Render the shinydashboard using the ui and server that you just defined.

Praktische interactieve oefening

Probeer deze oefening eens door deze voorbeeldcode in te vullen.

header <- dashboardHeader(title = "Portfolio information")
sidebar <- dashboardSidebar(disable = TRUE)

body <- dashboardBody(
          fluidRow(box(selectInput("stock", "Stock name", choices = c("AAPL", "DIS")))),
          fluidRow(valueBoxOutput("name", width = 2), 
                   valueBoxOutput("open", width = 2), 
                   valueBoxOutput("close", width = 2), 
                   valueBoxOutput("high", width = 2), 
                   valueBoxOutput("low", width = 2), 
                   valueBoxOutput("vol", width = 2)),
          # Change status to "success"
          fluidRow(box("This stock is in your portfolio", width = 2, status = "danger"), 
                   valueBoxOutput("open_pct", width = 2), 
                   valueBoxOutput("close_pct", width = 2), 
                   valueBoxOutput("high_pct", width = 2), 
                   valueBoxOutput("low_pct", width = 2), 
                   valueBoxOutput("vol_pct", width = 2)),
          fluidRow(box(plotlyOutput("line")), 
                   box(radioButtons("feature", "Features", 
                       choiceNames = c("Open", "Close", "High", "Low", "Volume"),
                       choiceValues = c("open", "close", "high", "low", "volume")) ) )
          )

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
  output$name <- renderValueBox(valueBox("Stock name", get_name(input$stock), color = "black"))
  output$open <- renderValueBox(valueBox("Open price", most_recent(input$stock, "open"), color = "black"))
  output$close <- renderValueBox(valueBox("Close price", most_recent(input$stock, "close"), color = "black"))
  output$high <- renderValueBox(valueBox("High", most_recent(input$stock, "high"), color = "black"))
  output$low <- renderValueBox(valueBox("Low", most_recent(input$stock, "low"), color = "black"))
  output$vol <- renderValueBox(valueBox("Volume", most_recent(input$stock, "volume"), color = "black"))
  # Specify the values for ValueBoxes in the third row
  output$open_pct <- ___(valueBox("Change", paste0(most_recent_pct(input$stock, "open"),"%"), color = box_color(most_recent_pct(input$stock, "open"))))
  ___ <- ___(___("Change", paste0(most_recent_pct(input$stock, "close"),"%"), color = box_color(most_recent_pct(input$stock, "close"))))
  ___ <- ___(___("Change", paste0(most_recent_pct(input$stock, "high"),"%"), color = box_color(most_recent_pct(input$stock, "high"))))
  ___ <- ___(___("Change", paste0(most_recent_pct(input$stock, ___),"%"), color = box_color(most_recent_pct(input$stock, ___))))
  ___ <- ___(___("Change", paste0(most_recent_pct(___, ___),"%"), color = box_color(most_recent_pct(___, ___))))
  # Plotly object in the fourth row
  ___ <- ___(plot_line(input$stock, input$feature))
}

# Render the dashboard using shinyApp()
___

Code bewerken en uitvoeren