Header dan sidebar

Membangun Dashboard dengan shinydashboard

Png Kee Seng

Researcher

Header

Header seperti papan nama restoran
Dapat memuat judul dashboard
Dapat memuat menu dropdown
- Mis.: pesan, notifikasi, tugas

Berikut contoh etalase toko sederhana.

Header seperti papan nama restoran. Dapat memuat elemen praktis atau estetis lain. Berikut contoh tampilan front-end yang kompleks.

¹ Gambar oleh upklyak di Freepik

Judul shinydashboard

Header didefinisikan oleh dashboardHeader()
Bagaimana jika judul terlalu panjang?
- Atur argumen titleWidth
- Default 230 piksel

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

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

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

Lebar header dapat disesuaikan untuk judul panjang.

Menambahkan dropdown dengan pesan

Menu dropdown dapat ditambahkan ke header
Tiga jenis menu dropdown
- Pesan
- Notifikasi
- Tugas
Tambahkan dropdownMenu() bertipe "messages"
- Tambahkan messageItem()
- Ikon default adalah icon("user")
- Kita juga bisa set 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"

)))

Dropdown menu dengan satu item pesan.

Menambahkan dropdown dengan beberapa pesan

Tambahkan satu messageItem() lagi di dalam dropdownMenu() bernama "Twitter"

Sebuah menu dropdown dengan dua item pesan.

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

Menambahkan dropdown dengan beberapa item

Kita juga dapat menambahkan jenis item lain
- messageItem()
- notificationItem()
- taskItem()
Ada perbedaan tampilan
- messageItem(): Ikon default icon("user")
- notificationItem(): Ikon default icon("exclamation-triangle")
- taskItem(): Memiliki progress bar

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

Menambahkan dropdown dengan beberapa item

Menu dropdown dengan beberapa item

Menambahkan lebih banyak dropdown

Kita juga dapat menambahkan dropdown lain

Header dengan lebih dari satu menu dropdown.

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

Sidebar

Sidebar didefinisikan oleh dashboardSidebar()
Lebar sidebar dapat diatur dengan width.
sidebarMenu() memungkinkan menaruh beberapa halaman di shinydashboard

Sidebar dengan dua tombol

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)

Menambahkan badge

Lencana (badge) juga bisa ditambahkan
- Atur badgeLabel dan badgeColor

Sidebar dengan lencana tambahan

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

  )
)

Menambahkan subtab

Subtab dapat ditambahkan dengan menuSubItem()
Perhatikan: badge tidak bisa ditambahkan ke tab yang punya subtab

Sidebar dengan subtab

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

Menambahkan input dan output di sidebar

Input dan output bisa ditambahkan ke sidebar
Kita juga harus mendefinisikannya di server

Sidebar dengan 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")))
  )
)

Ayo berlatih!

Membangun Dashboard dengan shinydashboard