Тело дашборда

Создание дашбордов с помощью shinydashboard

Png Kee Seng

Researcher

Обзор

  • Основная часть UI в shinydashboard
  • Здесь обычно размещают входные данные и выводы
    • Как блюда и заказы в ресторане
    • Сервер обеспечивает связь между ними
  • Тело определяется функцией dashboardBody() и по соглашению сохраняется в переменную body
body <- dashboardBody(...)
Создание дашбордов с помощью shinydashboard

Вайрфреймирование

  • Создайте вайрфрейм
    • Настройте структуру до добавления содержимого
  • В shinydashboard сначала определите расположение объектов

Вайрфрейм дирижабля.

1 Brett Jordan, Flickr
Создание дашбордов с помощью shinydashboard

Строки и блоки: пустые блоки

  • Добавляйте строки с помощью 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")

           )

)
Создание дашбордов с помощью shinydashboard

Строки и блоки: содержимое в блоках

Тело с четырьмя блоками, часть из которых содержит содержимое.

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

)
Создание дашбордов с помощью shinydashboard

Предотвращение переполнения блоков

  • По умолчанию каждый блок занимает 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"))
)
Создание дашбордов с помощью shinydashboard

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"))
           ))
Создание дашбордов с помощью shinydashboard

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")))
}
Создание дашбордов с помощью shinydashboard

Аналогия между valueBoxOutput и plotOutput

  • plotOutput():
    • Размещается в UI
    • Определяет положение элемента в shinydashboard
  • renderPlot():
    • Размещается в server()
    • Содержит объект ggplot()
  • valueBoxOutput():
    • Размещается в UI
    • Определяет положение элемента в shinydashboard
  • renderValueBox():
    • Размещается в server()
    • Содержит объект valueBox()
Создание дашбордов с помощью shinydashboard

Связь боковой панели и тела

  • Вспомните боковую панель с двумя кнопками «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."
)))
Создание дашбордов с помощью shinydashboard

Вкладки в теле дашборда

  • В 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

Давайте потренируемся!

Создание дашбордов с помощью shinydashboard

Preparing Video For Download...