Statuses en de UI afronden

Een van de principes van goede UI zegt dat we kleuren intuïtief moeten gebruiken. Gelukkig heeft shinydashboard een optie om statuses in te stellen in sommige shinydashboard-elementen. Dit doe je door een status-argument toe te voegen aan de juiste elementen, zoals box(), notificationItem(), dropdownMenu(), al komen de laatste twee functies niet aan bod in deze cursus.

Met status = "success" krijg je een groene kleur, status = "danger" geeft rood, status = "warning" is oranje, enzovoort.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met shinydashboard

Bekijk cursus

Oefeninstructies

Verander de status van de eerste box in de derde rij naar "success".
Kijk naar regels 28 tot en met 33, waar de waarden voor ValueBox()-en in de tweede rij zijn opgegeven, en doe hetzelfde voor die in de derde rij.
Definieer de output van het plotly-object dat in de vorige stap "line" werd genoemd.
Render de shinydashboard met de ui en server die je zojuist hebt gedefinieerd.

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan 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