CommencezCommencez gratuitement

Ébauche (wireframing) avec des principes de UI/UX

Passons maintenant à l'ébauche (wireframing) de votre tableau de bord tout en appliquant certains principes. Notez qu'aucune visualisation ne sera générée dans cet exercice.

Imaginez créer un tableau de bord pour Sally, dont le portefeuille comprend deux actions, Apple (AAPL) et Disney (DIS). Qu'incluriez-vous dans son tableau de bord?

Parmi les variables à considérer, il y a les cours d'ouverture et de fermeture quotidiens de chaque action, indiqués par close et open, ainsi que les cours maximum et minimum, indiqués par high et low. Une autre variable d'intérêt est le volume d'échanges de la journée (c.-à-d. le nombre d'actions transigées dans la journée), indiqué par volume.

Les bibliothèques shinydashboard et shiny ont été incluses pour vous dans cet exercice, et une fonction vide appelée server() a été enregistrée.

Cette activité fait partie du cours

Créer des tableaux de bord avec shinydashboard

Voir le cours

Exercice interactif pratique

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

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