Dashboard sangat sering digunakan dalam laporan/report bisnis. Dashboard berfungsi untuk meng-highlight summary dan poin-poin penting dalam suatu laporan. Memahami dan merespons informasi dengan cepat adalah kunci untuk kesuksesan, dan di sinilah peran penting dashboard datang ke permukaan.

Artikel ini akan mengajak Anda untuk memahami konsep dasar dari dashboard. Bersama-sama, mari kita mulai menjelajahi dunia yang menarik dari dashboard dan mengungkap potensinya yang tak terbatas dalam mengubah cara kita berinteraksi dengan data dan membuat keputusan yang lebih baik.

Flexdashboard

What if you want to construct a dashboard-style presentation without much hassle? Library flexdashboard pada R Studio memberikan kemudahan pengguna untuk menyiapkan dashboard dengan mudah tanpa harus menggunakan pengembangan front-end dengan code yang panjang.

Tahapan Instalasi flexdashboard

Sebelum membuat dashboard menggunakan flex dashboard, penting untuk melakukan tahap instalasi terlebih dahulu. Instalasi dapat digunakan dengan code berikut pada bagian source code ataupun console:

install.packages("flexdashboard")

atau menggunakan tahapan manual dengan menu berikut:

Step by Step membuat Template Flexdashboard

Langkah membuat file Rmd dengan template flexdashboard:

  • Pastikan sudah menginstall library flexdashboard
  • Pilih Menu File > New File > R Markdown
  • Pada bagian “From Template”, pilih “Flex Dashboard”
  • Klik tombol “OK”
  • Simpan file Rmd dan beri nama file (bisa dengan shortcut CTRL + S)

Dokumentasi lengkap tentang flexdashboard dapat ditemukan di https://rmarkdown.rstudio.com/flexdashboard/

Pengaturan YAML

Untuk pengaturan tampilan flexdashboard ke dokumen R Markdown Anda, Anda cukup menentukan tema yang diinginkan di header YAML (YAML Ain’t Markup Language) di awal dokumen Anda. Header YAML adalah bagian di mana Anda dapat mengatur berbagai opsi dan konfigurasi untuk dokumen Anda, termasuk tampilannya.

Berikut adalah tampilan YAML pada flexdashboard:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    theme: complex
---

vertical_layout

Dalam YAML Flexdashboard, vertical_layout adalah salah satu parameter yang digunakan untuk mengontrol tampilan dari dashboard yang akan dibuat. Apakah dalam bentuk full screen ataukah dalam bentuk dashboard yang bisa di scroll.

Berikut beberapa pengaturan yang dapat dipilih:

  • fill (default) : mengisi dashboard dalam satu layar penuh (full screen)
knitr::include_graphics("assets/fill.png")

  • scroll: dashboard bisa di-scroll secara vertikal (lebih fleksibel tinggi plotnya)

orientation

Dalam konteks YAML di Flexdashboard, orientation mengacu pada pengaturan tata letak atau orientasi dashboard. Ini memungkinkan Anda untuk mengatur apakah dasbor akan ditampilkan dalam mode portrait (vertikal) atau landscape (horizontal).

Berikut beberapa pengaturan yang dapat dipilih:

  • columns (default): menyusun panel dalam orientasi kolom

  • rows: menyusun panel dalam orientasi baris

theme

Pada bagian theme dapat diisi dengan pilihan dari beberapa referensi web berikut:

Default theme yang dipakai oleh flexdashboard adalah berwarna biru

Berikut contoh theme yang dicustomisasi dengan code sebagai berikut pada pengaturan YAML:

title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    **theme: united**

Hasilnya nanti akan menjadi tampilan berikut:

Additional Customize in Flexdashboard

  • Pengaturan judul flexdashboard dapat diatur di bagian paling atas title: ...
  • Bagian Header (### Chart A) ataupun bagian yang mewakili sebuah tempat yang diperuntuhkan untuk menambahkan sebuah plot.
  • Setiap bagian bisa diatur ukuran lebar dan tingginya dengan menggunakan 2 parameter
    • {data-width=350} -> mengatur lebar
    • {data-heigh=350} -> mengatur tinggi

Contoh:

Column {data-width=400, data-height=150}
  • Jika ingin menambahkan kalimat kita dapat menggunakan simbol >

Contoh:

<h3>**Built with Flex Dashboard**</h3>
Flex Dashboard is an R package that "easily create flexible, attractive, interactive dashboards with R". We visualize the Accelerating Exploratory Data Analysis (EDA) on Powder Milk Product Segment for Toddlers in 2021 data from one of FMCG Company in Indonesia

Shiny Dashboard

shiny merupakan packages dari RStudio, yang menyediakan framework aplikasi web untuk membuat aplikasi web interaktif (visualisasi) yang disebut “Shiny apps”. Kemudahan bekerja dengan Shiny telah mempopulerkannya di antara pengguna R. Layouting dashboard menjadi lebih mudah karena sudah disediakan template oleh library tersebut. Aplikasi web ini menampilkan objek R dengan cantik (seperti plot, tabel, dll.) serta dapat di-deploy untuk memungkinkan diakses oleh siapa saja (public).

knitr::include_graphics("assets/shiny architecture.png")

🧠 Beberapa pertimbangan dalam menggunakan shiny:

  • Pro: User dapat memberikan input, output yang ditampilkan dapat langsung berubah sesuai pilihan user dan sangat mudah untuk dikustomisasi.
  • Kontra: Pembuatan dashboard lebih “menantang”. Secara sintaks, perlu lebih teliti.

Tahapan Instalasi shiny dan shinydashboard

Sebelum membuat dashboard menggunakan shiny, penting untuk melakukan tahap instalasi library terlebih dahulu. Instalasi dapat digunakan dengan code berikut pada bagian source code ataupun console:

install.packages("shiny", "shinydashboard")

atau menggunakan tahapan manual dengan menu berikut:

Step by Step membuat Template Shiny Dashboard

Langkah mempersiapkan projek shiny dashboard dengan template Shiny Web App:

  1. Pilih Menu File > New File > Shiny Web App

  1. Isi Application Name sesuai dengan nama projek yang diinginkan
  2. Pilih Application Type nya adalah Multipe File (ui.R/server.R)
  3. Pilih directory folder projek di bagian Browse (create within directory)

  1. Membuat Rproject baru dalam directory nomor 4 dengan cara:

    • Menuju kebagian File -> New Project
    • Pilih New Directory -> New Project
    • Silahkan mengisi bagian nama folder yang ingin dibuat beserta tempat penyimpanannya
    • Silahkan mencentang Open in new session, jika ingin membuka R-Projectnya pada RStudio baru

  2. Copy data input ke dalam folder nomor 4

  3. Membuat global.R dengan cara Menu File -> R Script -> Save dengan File Name = global.R

Komponen pada shiny:

  • ui.R: User Interface (UI) yaitu bagian yang berinteraksi dengan pengguna, yaitu input dan output
  • server.R: Untuk memproses input dari user dan mengubahnya menjadi output.
  • global.R: Untuk menyiapkan lingkungan aplikasi, misalnya, library, impor data dan persiapan data.

User Interface (UI) Shiny Dashboard

UI shinydashboard terdiri dari 3 komponen:

  1. dashboardHeader() untuk bagian header di pojok kiri atas dashboard.
  2. dashboardSidebar() untuk menu di bagian samping dashboard.
  3. dashboardBody() untuk konten utama dari dashboard.

Konsep Dasar Menambahkan Menu Tab pada Sidebar di UI

  • Menggunakan fungsi sidebarMenu()

  • Menambahkan banyak menu tab pada sidebar menggunakan fungsi menuItem() di dalam sidebarMenu()

    dashboardSidebar(

    # Menambahkan menu pada Sidebar
    sidebarMenu(
      # Tab menu ke-1
      menuItem("Overview",tabName = "page1", icon = icon("video")),
      # Tab menu ke-2
      menuItem("Channel Analysis", tabName = "page2", icon = icon("youtube"))
    )

  )

Konsep Dasar Mengisi Body pada UI

  • Sambungkan Body dengan Tab pada Sidebar menggunakan fungsi tabItems()

    • Misalkan kita memiliki 2 tab menu pada Sidebar maka tabItems() akan memiliki 2 tabItem() , tabName akan menjadi id yang menyambungkan Body dan Sidebar.

      dashboardBody(
    tabItems(

      # Isi body di tab menu ke-1
      tabItem(tabName = "page1", ...),

      # Isi body di tab menu ke-2
      tabItem(tabName = "page2", ...)

    ) 
  )

  • Tentukan layout orientation (row/column)

    • Misal kita memilih orientasi baris dengan dua baris maka akan ada 2 fungsi fluidRow()

      dashboardBody(
    tabItems(

      # Isi body di tab menu ke-1
      tabItem(tabName = "page1",
                          fluidRow(...)
                          ),

      # Isi body di tab menu ke-2
      tabItem(tabName = "page2",
                          fluidRow(...)
                          )
    ) 
  )

  • Isi setiap baris dengan box agar tampilan dashboard rapi

    • Misalkan kita ingin mengisi infobox pada row 1 dan box biasa pada row 2

      dashboardBody(
    tabItems(

      # Isi body di tab menu ke-1
      tabItem(tabName = "page1",
                          fluidRow(
                              infoBox(...)
                              )
                          ),

      # Isi body di tab menu ke-2
      tabItem(tabName = "page2",
                          fluidRow(
                              box(...)
                              )
                          )
    ) 
  )

Server Shiny Dashboard

Pada bagian server.R, tujuannya adalah untuk mengolah data, menghubungkan ke sumber data eksternal, dan mengatur tampilan dashboard berdasarkan input yang diberikan oleh pengguna.

Beberapa hal yang perlu diperhatikan:

  1. Gunakan tipe render yang sesuai dengan outputnya, contoh: renderPlot({})
  2. Gunakan inputId yang ditangkap oleh input dengan cara: input$inputId
  3. Definisikan outputId untuk menyambungkannya dengan UI

📌 Tips: untuk mendefinisikan/memanggil id apapun (baik input / output) penulisannya selalU dengan tanda $ dan diikuti nama idnya. Contoh: - Mendefinisikan: output$plot1_category - Memanggil: category_id == input$input_category

Global Shiny Dashboard

Pada aplikasi Shiny, file global.R digunakan untuk menginisialisasi objek atau kode yang perlu dijalankan hanya sekali selama aplikasi berjalan. File ini biasanya digunakan untuk menyiapkan variabel atau data yang akan digunakan di seluruh aplikasi Shiny, sehingga setiap bagian dari aplikasi dapat mengakses dan menggunakan informasi yang sama.

Tujuan utama dari file global.R adalah untuk memuat data atau menginisialisasi variabel yang perlu diakses oleh berbagai bagian dari aplikasi Shiny, seperti antarmuka pengguna (ui.R), logika aplikasi (server.R), dan elemen-elemen lainnya. Dengan menggunakan file global.R, Anda dapat menghindari pengulangan kode yang tidak perlu dan memastikan bahwa informasi atau variabel yang sama dapat digunakan secara konsisten di seluruh aplikasi.

Cara membuat file global.R:

  • Buat file baru di dalam proyek Anda dan beri nama global.R
  • Pilih menu *File > New File > R Script
  • Simpan dengan nama file global.R

Importance Reference

📝 Note: Perlu diperhatikan setiap function yang digunakan memiliki requirement type data.