Badan

Membangun Dashboard dengan shinydashboard

Png Kee Seng

Researcher

Gambaran umum

Inti UI shinydashboard
Biasanya input dan output ditempatkan di sini
- Ibarat hidangan dan pesanan di restoran
- Server membantu komunikasi
Badan didefinisikan oleh dashboardBody() dan lazim disimpan sebagai body

body <- dashboardBody(...)

Wireframing

Lakukan wireframing
- Susun struktur sebelum menambah konten
Di shinydashboard, tentukan posisi objek terlebih dahulu

Wireframe sebuah zeppelin.

¹ Brett Jordan, Flickr

Menambah baris dan kotak: kotak kosong

Tambah baris dengan fluidRow()
Tambah kotak dengan box()

Dasbor dengan dua baris, masing-masing dua kotak kosong.

body <- dashboardBody(

  fluidRow(

           box("Baris 1, kotak 1"), 
           box("Baris 1, kotak 2")

           ),
  fluidRow(

           box("Baris 2, kotak 1"), 
           box("Baris 2, kotak 2")

           )

)

Menambah baris dan kotak: konten dalam kotak

Badan dengan empat kotak dan konten di beberapa kotak.

body <- dashboardBody(
  fluidRow(box("Baris 1, kotak 1", 

               plotOutput('plot')),

           box("Baris 1, kotak 2")),
  fluidRow(box("Baris 2, kotak 1"), 
           box("Baris 2, kotak 2", 

               selectInput("select", 
                           "Pilih nomor tim:", 
                           choices = c(1,2))))

)

Cegah kotak meluber

Tiap kotak default-nya memakai 6 dari 12 unit lebar
Untuk mencegah overflow, setel width
- Pada contoh ini: 3, 5, dan 4
Menambahkan box() sangat dianjurkan

Lebih banyak kotak di badan

body <- dashboardBody(
  fluidRow(box("Baris 1, kotak 1"), 
           box("Baris 1, kotak 2"),
           box("Baris 1, kotak 3")),
  fluidRow(box("Baris 2, kotak 1"), 
           box("Baris 2, kotak 2"))
)

body <- dashboardBody(
  fluidRow(box("Baris 1, kotak 1", width = 3), 
           box("Baris 1, kotak 2", width = 5),
           box("Baris 1, kotak 3", width = 4)),
  fluidRow(box("Baris 2, kotak 1"), 
           box("Baris 2, kotak 2"))
)

valueBox dan infoBox

Ada juga kotak untuk info ringkas
- valueBox()
- infoBox()

valueBox dan infoBox di badan.

body <- dashboardBody(
  fluidRow(valueBox(value = 3, 
                    subtitle = "Total kartu merah", 
                    icon = icon("user"),
                    color = "red"),

           infoBox(value = 158, 
                   title = "Total gol", 
                   icon = icon("futbol"))
           ))

valueBoxOutput dan infoBoxOutput

Variasi valueBox() dan infoBox(): valueBoxOutput() dan infoBoxOutput()
Ini adalah fungsi output
Ada juga renderValueBox() dan renderInfoBox()
valueBox() dan infoBox() tetap diperlukan

valueBoxOutput dan infoBoxOutput di badan. Dashboard yang dirender identik dengan sebelumnya.

body <- dashboardBody(
  fluidRow(valueBoxOutput(outputId = "valuebox1"),
           infoBoxOutput(outputId = "infobox1")
           ))

server <- function(input, output){
  output$valuebox1 <- renderValueBox(
    valueBox(3, "Total kartu merah",
                icon = icon("user"), color = "red"))
  output$infobox1 <- renderInfoBox(
    infoBox(158, 
                   title = "Total gol", 
                   icon = icon("futbol")))
}

Analogi antara valueBoxOutput dan plotOutput

plotOutput():
- Ditempatkan di UI
- Menentukan posisi di shinydashboard
renderPlot():
- Ditempatkan di server()
- Berisi objek ggplot()

valueBoxOutput():
- Ditempatkan di UI
- Menentukan posisi di shinydashboard
renderValueBox():
- Ditempatkan di server()
- Berisi objek valueBox()

Menautkan sidebar dan badan

Ingat sidebar dengan dua tombol: "charts" dan "statistics"
Untuk menautkan ke badan, tambahkan tabItems()
- Tiap halaman ditentukan oleh tabItem()
- Label pada tiap pasangan menuItem()-tabItem() harus sama

Badan dan sidebar kini tertaut

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",
      "Grafik ditampilkan di sini."
    ),
    tabItem("statistics",
      "Statistik ditampilkan di sini."
)))

Tab di dalam badan

Dalam shinyApp, tab juga bisa dibuat dengan tabsetPanel()
- Tiap tab dibuat dengan tabPanel()
Jangan keliru dengan tabItems() dan tabItem()

Menambahkan tabset di dalam badan

body <- dashboardBody(tabsetPanel(

    tabPanel("Distributions", 
             box(plotOutput("dist"))),
    tabPanel("Statistics", 
             dateInput("matchdate", 
                       "Masukkan tanggal pertandingan:", 
                       value = "2022-11-20"),
             valueBoxOutput("red"), 
             valueBoxOutput("yellow")),
    tabPanel("Data", "Data ditampilkan di sini.", 
             tableOutput("data"))

))

server <- function(input, output){
  output$red <- renderValueBox(valueBox(0, "Kartu merah"))
  output$yellow <- renderValueBox(valueBox(6, "Kartu kuning"))
}

Ayo berlatih!

Membangun Dashboard dengan shinydashboard