Wireframing con principios de UI/UX

Vamos a crear el wireframe de tu dashboard aplicando algunos de los principios vistos. Ten en cuenta que en este ejercicio no se renderizarán visualizaciones.

Imagina que creas un dashboard para Sally, cuyo portafolio está formado por dos acciones: Apple (AAPL) y Disney (DIS). ¿Qué incluirías en su panel?

Algunas variables a considerar son los precios de apertura y cierre diarios de cada acción, indicados por close y open, así como los precios máximo y mínimo, indicados por high y low. Otra variable de interés es el volumen negociado del día (es decir, el número de acciones intercambiadas en el día), indicado por volume.

Las librerías shinydashboard y shiny ya se han incluido para ti en este ejercicio, y se ha definido una función vacía llamada server().

Este ejercicio forma parte del curso

Creación de paneles con shinydashboard

Ver curso

ejercicio interactivo práctico

Prueba este ejercicio completando este código de ejemplo.

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)

Editar y ejecutar código