ПочатиПочніть безкоштовно

Вайрфреймінг із принципами UI/UX

Тепер виконаймо вайрфреймінг для вашої інформаційної панелі, застосовуючи частину принципів. Зверніть увагу, що в цій вправі жодні візуалізації не відображатимуться.

Уявімо, що ви створюєте дашборд для Саллі, у портфелі якої два акції: Apple (AAPL) та Disney (DIS). Що ви включили б до її дашборда?

Серед змінних варто врахувати щоденні ціни відкриття та закриття ринку для кожної акції, позначені як close і open, а також максимальні та мінімальні ціни, позначені як high і low. Інша важлива змінна — це денний обсяг торгів (тобто кількість акцій, проданих за день), який позначено як volume.

Бібліотеки shinydashboard і shiny вже підключено для вас у цій вправі, а порожню функцію server() збережено.

Ця вправа є частиною курсу

Створення панелей керування з shinydashboard

Переглянути курс

Інтерактивна практична вправа

Спробуйте виконати цю вправу, доповнивши цей зразок коду.

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)
Редагувати та запускати код