Wireframing con principi di UI/UX

Ora realizziamo il wireframing per il tuo dashboard, applicando alcuni dei principi visti. Nota che in questo esercizio non verrà renderizzata alcuna visualizzazione.

Immagina di creare un dashboard per Sally, il cui portafoglio è composto da due titoli, Apple (AAPL) e Disney (DIS). Cosa includeresti nel suo dashboard?

Alcune variabili da considerare sono i prezzi di apertura e chiusura giornalieri di ciascun titolo, indicati con close e open, oltre ai prezzi massimo e minimo, indicati con high e low. Un'altra variabile di interesse è il volume di scambio della giornata (cioè il numero di azioni scambiate nella giornata), indicato con volume.

Le librerie shinydashboard e shiny sono già incluse per te in questo esercizio, e una funzione vuota chiamata server() è già stata creata.

Questo esercizio fa parte del corso

Creare dashboard con shinydashboard

Visualizza corso

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

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)

Modifica ed esegui il codice