本文

shinydashboard で作るダッシュボード

Png Kee Seng

Researcher

概要

shinydashboard の UI の大部分
通常、入力と出力をここに配置
- レストランの料理と注文の関係に似る
- 通信は server が担当
本文は dashboardBody() で定義し、慣例的に body に保存

body <- dashboardBody(...)

ワイヤーフレーミング

ワイヤーフレームを作成
- 中身を入れる前に構造を決める
shinydashboard では、まずオブジェクトの配置を決める

ツェッペリンのワイヤーフレーム。

¹ Brett Jordan, Flickr

行とボックスの追加：空のボックス

fluidRow() で行を追加
box() でボックスを追加

2行あり、それぞれに空の2ボックスがあるダッシュボード。

body <- dashboardBody(

  fluidRow(

           box("Row 1, box 1"), 
           box("Row 1, box 2")

           ),
  fluidRow(

           box("Row 2, box 1"), 
           box("Row 2, box 2")

           )

)

行とボックスの追加：ボックス内の内容

4つのボックスがあり一部に内容が入った本体。

body <- dashboardBody(
  fluidRow(box("Row 1, box 1", 

               plotOutput('plot')),

           box("Row 1, box 2")),
  fluidRow(box("Row 2, box 1"), 
           box("Row 2, box 2", 

               selectInput("select", 
                           "Select team number:", 
                           choices = c(1,2))))

)

ボックスのはみ出し防止

各ボックスは既定で横幅12のうち6を占有
はみ出し防止に width を指定
- 例では 3、5、4 に設定
box() を追加する設計が推奨

本体にボックスを追加

body <- dashboardBody(
  fluidRow(box("Row 1, box 1"), 
           box("Row 1, box 2"),
           box("Row 1, box 3")),
  fluidRow(box("Row 2, box 1"), 
           box("Row 2, box 2"))
)

body <- dashboardBody(
  fluidRow(box("Row 1, box 1", width = 3), 
           box("Row 1, box 2", width = 5),
           box("Row 1, box 3", width = 4)),
  fluidRow(box("Row 2, box 1"), 
           box("Row 2, box 2"))
)

valueBox と infoBox

少量の情報を表示するボックスもある
- valueBox()
- infoBox()

本体にある valueBox と infoBox。

body <- dashboardBody(
  fluidRow(valueBox(value = 3, 
                    subtitle = "Total no. of red cards awarded", 
                    icon = icon("user"),
                    color = "red"),

           infoBox(value = 158, 
                   title = "Total no. of goals scored", 
                   icon = icon("futbol"))
           ))

valueBoxOutput と infoBoxOutput

valueBox() と infoBox() の派生： valueBoxOutput() と infoBoxOutput()
これらは出力用関数
renderValueBox() と renderInfoBox() もある
valueBox() と infoBox() が必要

本体にある valueBoxOutput と infoBoxOutput。前スライドと同じ見た目。

body <- dashboardBody(
  fluidRow(valueBoxOutput(outputId = "valuebox1"),
           infoBoxOutput(outputId = "infobox1")
           ))

server <- function(input, output){
  output$valuebox1 <- renderValueBox(
    valueBox(3, "Total no. of red cards awarded",
                icon = icon("user"), color = "red"))
  output$infobox1 <- renderInfoBox(
    infoBox(158, 
                   title = "Total no. of goals scored", 
                   icon = icon("futbol")))
}

valueBoxOutput と plotOutput の類推

plotOutput():
- UI に配置
- shinydashboard 内での配置（位置）を決める
renderPlot():
- server() に配置
- ggplot() オブジェクトを含む

valueBoxOutput():
- UI に配置
- shinydashboard 内での配置（位置）を決める
renderValueBox():
- server() に配置
- valueBox() オブジェクトを含む

サイドバーと本文の連携

先ほど、サイドバーに「charts」と「statistics」の2つのボタンがありました
本文と連携するには tabItems() を追加
- 各ページは tabItem() で定義
- 各 menuItem() と tabItem() のラベルは一致させる

本文とサイドバーが連携

sidebar <- dashboardSidebar(
  sidebarMenu(
    id = "pages",

    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", badgeColor = "green"),

    menuItem("Statistics", icon = icon("file-excel"), 
             tabName = "statistics", 
             badgeLabel = "urgent", badgeColor = "red")
 ))

body <- dashboardBody(
  tabItems(

    tabItem("charts",
      "Charts go here."
    ),
    tabItem("statistics",
      "Statistics go here."
)))

本文内のタブ

shinyApp では、tabsetPanel() でもタブを定義可能
- 各タブは tabPanel() で定義
tabItems()／tabItem() と混同しない

本文内にタブセットを追加

body <- dashboardBody(tabsetPanel(

    tabPanel("Distributions", 
             box(plotOutput("dist"))),
    tabPanel("Statistics", 
             dateInput("matchdate", 
                       "Enter the match date:", 
                       value = "2022-11-20"),
             valueBoxOutput("red"), 
             valueBoxOutput("yellow")),
    tabPanel("Data", "Data goes here.", 
             tableOutput("data"))

))

server <- function(input, output){
  output$red <- renderValueBox(valueBox(0, "Red cards"))
  output$yellow <- renderValueBox(valueBox(6, "Yellow cards"))
}

Ayo berlatih!

shinydashboard で作るダッシュボード