Заголовок и боковая панель

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

Png Kee Seng

Researcher

Заголовок

Заголовок — это как вывеска ресторана
Он может содержать название дашборда
Он может содержать выпадающие меню
- Например, сообщения, уведомления, задачи

Пример простого фасада магазина.

Заголовок похож на вывеску ресторана. Он может содержать практические или декоративные элементы. Пример сложного оформления фасада.

¹ Изображение: upklyak на Freepik

Заголовок в shinydashboard

Заголовок задаётся с помощью dashboardHeader()
Что делать, если заголовок слишком длинный?
- Задайте аргумент titleWidth
- Значение по умолчанию — 230 пикселей

header <- dashboardHeader(title = "Soccer tournament")

header <- dashboardHeader(title = "Analysis for global soccer tournament")

header <- dashboardHeader(title = "Analysis for global soccer tournament")
                            titleWidth = 400)

Ширину заголовка можно настроить для длинных названий.

Добавление выпадающего меню с сообщением

В заголовок можно добавить выпадающие меню
Три типа выпадающих меню
- Сообщения
- Уведомления
- Задачи
Добавьте dropdownMenu() с type "messages"
- Добавьте messageItem()
- По умолчанию используется иконка icon("user")
- Можно также задать time

header <- dashboardHeader(
  title = "Analysis for FIFA world cup",
  titleWidth = 300,
  dropdownMenu(type = "messages",

    messageItem("Data division",
      "Keep up the good work!",

      time = "5 mins"

)))

Выпадающее меню с одним элементом сообщения.

Добавление выпадающего меню с несколькими сообщениями

Добавьте ещё один messageItem() в dropdownMenu() с именем "Twitter"

Выпадающее меню с двумя элементами сообщений.

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",
    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"
    ),

    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")
    )
  )
)

Добавление выпадающего меню с несколькими элементами

Можно добавлять и другие типы элементов
- messageItem()
- notificationItem()
- taskItem()
Внешний вид элементов различается
- messageItem(): иконка по умолчанию — icon("user")
- notificationItem(): иконка по умолчанию — icon("exclamation-triangle")
- taskItem(): содержит индикатор прогресса

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",

    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"),
    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")),

    notificationItem("This is a notification."
    ),

    taskItem(value = 30, color = "blue",
      "Dashboard construction")
))

Добавление выпадающего меню с несколькими элементами

Выпадающее меню с несколькими элементами

Добавление нескольких выпадающих меню

Можно добавить ещё одно выпадающее меню

Заголовок с несколькими выпадающими меню.

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,

  dropdownMenu(type = "messages",
    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"),
    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")),
    notificationItem("This is a notification."),
    taskItem(value = 30, color = "blue",
      "Dashboard construction")),

  dropdownMenu(type = "notifications",
    notificationItem(icon = icon("users"),
      "This is another notification."
)))

Боковая панель

Боковая панель задаётся с помощью dashboardSidebar()
Ширину боковой панели можно изменить, задав аргумент width.
sidebarMenu() позволяет разместить несколько страниц в shinydashboard

Боковая панель с двумя кнопками

sidebar <- dashboardSidebar()

sidebar <- dashboardSidebar(width=400)

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
        icon = icon("chart-line")),
    menuItem("Statistics", icon = icon("file-excel"), 
        tabName = "stats")
  )
)

sidebar <- dashboardSidebar(disable = TRUE)

Добавление значка

Можно также добавить значок (badge)
- Задайте badgeLabel и badgeColor

Боковая панель с дополнительными значками

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),

             badgeLabel = "New content!", 
             badgeColor = "green"),

    menuItem("Statistics", icon = icon("file-excel"), 
             tabName = "stats", 

             badgeLabel = "urgent", 
             badgeColor = "red")

  )
)

Добавление подвкладок

Подвкладки добавляются с помощью menuSubItem()
Обратите внимание: значки нельзя добавить к вкладке, содержащей подвкладки

Боковая панель с подвкладками

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", 
             badgeColor = "green"),
    menuItem("Statistics", icon = icon("file-excel"), 
            tabName = "stats", 
            menuSubItem("Team 1", tabName = "team1", 
                     icon=icon("user")),
            menuSubItem("Team 2", tabName = "team2", 
                     icon=icon("user")))
  )
)

Добавление элементов ввода и вывода в боковую панель

В боковую панель можно добавлять элементы ввода и вывода
Элементы ввода и вывода также необходимо определить в server

Боковая панель с элементом checkboxGroupInput().

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", 
             badgeColor = "green"),
    menuItem("Statistics", icon = icon("file-excel"), 
            tabName = "stats", 
            menuSubItem("Team 1", tabName = "team1", 
            icon=icon("user")),
            menuSubItem("Team 2", tabName = "team2", 
            icon=icon("user"))),

    menuItem("A couple of checkboxes",  
             checkboxGroupInput("checkboxes", 
              "Day of the week", 
              choices =  c("Mon","Tue","Wed","Thu","Fri","Sat","Sun"),
              selected = c("Mon","Tue","Wed","Thu","Fri")))
  )
)

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

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