CommencezCommencez gratuitement

Statuts et finalisation de l'interface

Un des bons principes d'ergonomie d'interface veut que l'on utilise les couleurs de façon intuitive. Heureusement, shinydashboard permet de définir des statuts dans certains éléments shinydashboard. On y parvient en ajoutant un argument status aux éléments appropriés, comme box(), notificationItem(), dropdownMenu(), même si ces deux dernières fonctions ne seront pas abordées dans ce cours.

Définir status = "success" produit une coloration verte, status = "danger" une coloration rouge, status = "warning" est orange, et ainsi de suite.

Cette activité fait partie du cours

Créer des tableaux de bord avec shinydashboard

Voir le cours

Instructions de l’exercice

  • Changez le statut de la première boîte de la troisième rangée à « success ».
  • Référez-vous aux lignes 28 à 33, où les valeurs des ValueBox() de la deuxième rangée sont précisées, et faites de même pour celles de la troisième rangée.
  • Définissez la sortie de l'objet plotly nommé « line » à l'étape précédente.
  • Affichez le shinydashboard à l'aide de ui et server que vous venez de définir.

Exercice interactif pratique

Essayez cet exercice en complétant ce code d’exemple.

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