Заголовок і бічна панель

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

Png Kee Seng

Researcher

Заголовок

Заголовок — це як вивіска ресторану
Може містити назву дашборду
Може містити випливні меню
- Напр., повідомлення, сповіщення, завдання

Приклад простої вітрини магазину.

Заголовок — як вивіска ресторану. Він може містити інші практичні чи естетичні елементи. Ось приклад складного фронтенду.

¹ Image by upklyak on 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)

Ширину заголовка можна змінити для довгих назв.

Додавання випливного меню з повідомленням

До заголовка можна додати випливні меню
Є три типи випливних меню
- Messages
- Notifications
- Tasks
Додайте 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)

Додавання бейджа

Можна додати бейдж
- Задайте 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