สถานะ สี และธีม

การสร้างแดชบอร์ดด้วย shinydashboard

Png Kee Seng

Researcher

การตกแต่งร้านอาหาร

การปรับแต่งแดชบอร์ดก็เหมือนกับการตกแต่งร้านอาหาร
มีคำกล่าวว่าเรารับประทานด้วยสายตาก่อน
แดชบอร์ดที่ดูดีย่อมสร้างประสบการณ์ที่ดีขึ้นให้ผู้ใช้
มาเริ่มต้นด้วยการเปลี่ยนสีของบางองค์ประกอบกัน

ร้านอาหารที่ตกแต่งสวยงามพร้อมอาหารที่น่ารับประทาน

¹ Image by Freepik

สถานะใน shinydashboard

ออบเจกต์บางส่วนใน shinydashboard มีพรอพเพอร์ตี้ status
กำหนดสถานะได้โดยระบุอาร์กิวเมนต์ status
```
<object>(status = <status>, ...)
```

สถานะใน shinydashboard

สถานะใน notificationItems

เพิ่ม notification item สองรายการในส่วนหัว
- กำหนด buy alert เป็นข้อความ success
- กำหนด sell alert เป็นข้อความ danger
สถานะเริ่มต้นของ notificationItem() คือ "success"

สถานะ success และ danger ของ notificationItem

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

       notificationItem("Sell alert",

       status = "danger"

       ),

       notificationItem("Buy alert",

       status = "success"

       )

))
...

สถานะใน boxes

หากไม่กำหนด status กล่องจะไม่มีสี
กำหนด status เป็น "info"
กำหนดชื่อหัวข้อ
กำหนด solidHeader = TRUE

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

        title="Stock name title",

        width = 6,

        status = "info",

        solidHeader = TRUE)),

...

กล่องที่มีสถานะ info

กล่องที่มีสถานะ info และชื่อหัวข้อ

กล่องที่มีสถานะ info ชื่อหัวข้อ และพื้นหลังทึบ

การเพิ่มสีใน shinydashboard

ออบเจกต์บางส่วนใน shinydashboard รองรับการกำหนด color
สมมติว่าราคา close ลดลง 2% จากเมื่อวาน
- แสดง valueBox() ด้วยสีแดงเพื่อแจ้งเตือน Sally

การกำหนดสีให้ valueBox()

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

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

            color = "red"

            ),

    ...)
...

สีเพิ่มเติม

สีที่ใช้ได้ใน shinydashboard:

สีที่มีให้ใช้ใน shinydashboard

ตรวจสอบสถานะและสีที่รองรับได้ด้วย ?validStatuses และ ?validColors

ธีมใน shinydashboard

shinydashboard มีธีมสีสำเร็จรูปให้เลือกใช้
กำหนดได้โดยระบุอาร์กิวเมนต์ skin ใน dashboardPage()

dashboardPage(skin = <color>)

สีที่รองรับมีดังนี้

"blue" (ค่าเริ่มต้น)
"black"
"purple"
"green"
"red"
"yellow"

ทดลองใช้ธีมต่างๆ

กำหนดสีเป็นสีม่วงเพื่อทดลอง
กำหนดสีเป็นสีดำเพื่อดูความแตกต่าง

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

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

ธีมสีม่วง

ธีมสีดำ

มาฝึกกันเถอะ!

การสร้างแดชบอร์ดด้วย shinydashboard