ÎncepețiÎncepe gratuit

Wireframing cu principii UI/UX

Hai să realizăm wireframing-ul pentru dashboard-ul tău, aplicând câteva dintre principiile UI/UX. Reține că în acest exercițiu nu vor fi afișate vizualizări.

Imaginează-ți că creezi un dashboard pentru Sally, al cărei portofoliu este format din două acțiuni: Apple (AAPL) și Disney (DIS). Ce ai include în dashboard-ul ei?

Printre variabilele de luat în considerare se numără prețurile zilnice de deschidere și închidere ale fiecărei acțiuni, notate cu close și open, precum și prețurile maxime și minime, notate cu high și low. O altă variabilă relevantă este volumul tranzacționat în ziua respectivă (adică numărul de acțiuni tranzacționate), notat cu volume.

Bibliotecile shinydashboard și shiny au fost deja incluse în acest exercițiu, iar o funcție goală numită server() a fost deja stocată.

Acest exercițiu face parte din cursul

Crearea dashboardurilor cu shinydashboard

Vezi cursul

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

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)
Editează și rulează codul