Wireframing avec principes UI/UX

Passons maintenant au wireframing de votre tableau de bord, en appliquant certains des principes vus. Notez qu’aucune visualisation ne sera affichée dans cet exercice.

Imaginez créer un tableau de bord pour Sally dont le portefeuille est composé de deux actions, Apple (AAPL) et Disney (DIS). Qu’y incluriez-vous ?

Parmi les variables à prendre en compte : les prix d’ouverture et de clôture quotidiens de chaque action, notés close et open, ainsi que les prix maximum et minimum, notés high et low. Une autre variable intéressante est le volume d’échanges de la journée (c’est-à-dire le nombre d’actions échangées sur la journée), noté volume.

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

Cet exercice fait partie du cours

<cours>Créer des tableaux de bord avec shinydashboard</cours>

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