Wireframing com princípios de UI/UX

Agora vamos fazer o wireframing do seu dashboard, aplicando alguns dos princípios. Observe que nenhuma visualização será exibida neste exercício.

Imagine criar um dashboard para a Sally, cujo portfólio é composto por duas ações, Apple (AAPL) e Disney (DIS). O que você incluiria no dashboard dela?

Algumas variáveis a considerar são os preços de abertura e fechamento diários de cada ação, indicados por close e open, assim como os preços máximo e mínimo, indicados por high e low. Outra variável de interesse é o volume negociado no dia (ou seja, número de ações negociadas no dia), indicado por volume.

As bibliotecas shinydashboard e shiny já foram incluídas para você neste exercício, e uma função vazia chamada server() foi criada.

Este exercicio faz parte do curso

Construindo dashboards com shinydashboard

Ver curso

exercicio interativo prático

Tente este exercicio completando este código de exemplo.

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 e Executar Código