始める無料で始める

ステータスの設定

動画で取り上げた良いUI/UXの実践のひとつは、色を効果的に使うことです。ご覧のように、box() や notificationItem() には、適切な引数を設定することで色分けされたステータスを追加できます。

Available statuses

これにより、あらかじめ定義された色を使って、ユーザーが細かく注視しなくてもメッセージの性質をすばやく見分けられるようになります。

次では、shinydashboard でさまざまなステータスを試していきます。

この演習では、shiny と shinydashboard ライブラリはすでに読み込まれています。さらに、ヘッダーとサイドバーは sidebar として保存されており、server() は空の関数です。

この演習はコースの一部です

shinydashboard で作るダッシュボード

コースを見る

実践的なインタラクティブ演習

このサンプルコードを完成させて、この演習に挑戦してみましょう。

library(shiny)
library(shinydashboard)

sidebar <- dashboardSidebar(
  width = 300,
  sidebarMenu(
    id = "pages",
    menuItem("Historical trends",
             tabName = "historical"),
    menuItem("Profits and Losses (PnLs)", 
             tabName = "profit", 
             icon = icon("money-bill-alt"),
             badgeLabel = "+2.3%", badgeColor = "green")
  )
)

header <- dashboardHeader(
  title = "Portfolio dashboard for Sally",
  titleWidth = 300,
  dropdownMenu(type = "notifications",
               # Change status of "Sell alert" from "warning" to "danger"
               notificationItem("Sell alert", status = "warning"),
               # Set status of "Buy alert" to "success".
               notificationItem("Buy alert", ___))
)

body <- dashboardBody()

ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)
コードを編集して実行