Основна частина

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

Png Kee Seng

Researcher

Огляд

Основний вміст інтерфейсу shinydashboard
Зазвичай тут розміщують входи та виходи
- Вони як страви та замовлення в ресторані
- Сервер забезпечує обмін даними
Основну частину задає dashboardBody(), зазвичай зберігають у body

body <- dashboardBody(...)

Вайрфреймінг

Зробіть вайрфрейм
- Спершу налаштуйте структуру, потім додавайте вміст
У shinydashboard спершу визначте позиції об'єктів

Вайрфрейм цепеліна.

¹ Brett Jordan, Flickr

Додавання рядків і коробок: порожні коробки

Додавайте рядки за допомогою fluidRow()
І коробки за допомогою box()

Панель з двома рядками, у кожному по дві порожні коробки.

body <- dashboardBody(

  fluidRow(

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

           ),
  fluidRow(

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

           )

)

Додавання рядків і коробок: вміст у коробках

Основна частина з чотирма коробками та вмістом у деяких.

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))))

)

Запобігання переповненню коробок

Кожна коробка за замовчуванням займає 6 із 12 одиниць горизонтального простору
Щоб уникнути переповнення, встановіть 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 в основній частині. Зверніть увагу: відрендерений shinydashboard ідентичний попередньому.

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»
Щоб зв'язати їх з основною частиною, додайте 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"))
}

Давайте потренуємось!

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