Status, warna, dan skin

Membangun Dashboard dengan shinydashboard

Png Kee Seng

Researcher

Mempercantik restoran

Menyesuaikan dashboard ibarat mempercantik restoran
Katanya, kita pertama makan dengan mata
Dashboard yang lebih menarik memberi pengalaman pengguna lebih baik
Fokus mengganti warna beberapa elemen

Restoran yang dipercantik dengan makanan menarik.

¹ Gambar oleh Freepik

Status di shinydashboard

Beberapa objek shinydashboard memiliki properti status
Status ini diatur dengan argumen status
```
<object>(status = <status>, ...)
```

Status di shinydashboard

Status pada notificationItem

Tambahkan dua notifikasi di header
- Jadikan peringatan beli sebagai pesan success
- Jadikan peringatan jual sebagai pesan danger
Status default untuk notificationItem() adalah "success"

Status success dan danger untuk notificationItem.

header <- dashboardHeader(
  ...
  dropdownMenu(type = "notifications",

       notificationItem("Sell alert",

       status = "danger"

       ),

       notificationItem("Buy alert",

       status = "success"

       )

))
...

Status pada box

Membiarkan status kosong menghasilkan kotak tanpa warna
Atur status ke "info"
Atur judul
Atur solidHeader = TRUE

...
body <- dashboardBody(...,
        box("Stock name",

        title="Stock name title",

        width = 6,

        status = "info",

        solidHeader = TRUE)),

...

Kotak dengan status info.

Kotak dengan status info dan judul.

Kotak dengan status info, judul, dan isian solid.

Menambahkan warna ke shinydashboard

Pada beberapa objek shinydashboard, kita bisa mengatur color
Misal harga close turun 2% sejak kemarin
- Render valueBox() berwarna merah untuk memperingatkan Sally

Kita bisa memberi warna pada valueBox().

...
body <- dashboardBody(...,

    valueBox("Close (%)", 
            "-2%", 
            width = 2,

            color = "red"

            ),

    ...)
...

Lebih banyak warna

Warna yang tersedia di shinydashboard:

Warna yang tersedia di shinydashboard.

Lihat status dan warna yang tersedia dengan ?validStatuses dan ?validColors

Skin di shinydashboard

Ada skin bawaan di shinydashboard
Terapkan dengan argumen skin di dashboardPage()

dashboardPage(skin = <color>)

Ini pilihan warnanya

"blue" (default)
"black"
"purple"
"green"
"red"
"yellow"

Mencoba berbagai skin

Atur warna ke ungu untuk mencoba
Atur warna ke hitam untuk melihat perbedaannya

ui <- dashboardPage(skin = "purple",
                    header, sidebar, body)

ui <- dashboardPage(skin = "black",
                    header, sidebar, body)

Skin ungu.

Skin hitam

Ayo berlatih!

Membangun Dashboard dengan shinydashboard