Trạng thái, màu và giao diện

Xây dựng Dashboard với shinydashboard

Png Kee Seng

Researcher

Làm đẹp một nhà hàng

Tùy biến dashboard giống như làm đẹp nhà hàng
Người ta nói chúng ta ăn bằng mắt trước
Dashboard bắt mắt mang lại trải nghiệm người dùng tốt hơn
Tập trung đổi màu một số phần tử

Một nhà hàng được làm đẹp với món ăn hấp dẫn.

¹ Hình ảnh bởi Freepik

Trạng thái trong shinydashboard

Một số đối tượng shinydashboard có thuộc tính status
Có thể đặt trạng thái bằng tham số status
```
<object>(status = <status>, ...)
```

Các trạng thái trong shinydashboard

Trạng thái trong notificationItem

Hãy thêm hai thông báo ở header
- Đặt cảnh báo mua là thông điệp success
- Đặt cảnh báo bán là thông điệp danger
notificationItem() mặc định là "success"

Trạng thái success và danger cho notificationItem.

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

       notificationItem("Sell alert",

       status = "danger"

       ),

       notificationItem("Buy alert",

       status = "success"

       )

))
...

Trạng thái trong hộp

Giữ nguyên status sẽ cho hộp không màu
Đặt status thành "info"
Đặt tiêu đề
Đặt solidHeader = TRUE

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

        title="Stock name title",

        width = 6,

        status = "info",

        solidHeader = TRUE)),

...

Hộp với trạng thái info.

Hộp với trạng thái info và tiêu đề.

Hộp với trạng thái info, tiêu đề và nền đặc.

Thêm màu vào shinydashboard

Với một số đối tượng shinydashboard, có thể đặt color
Giả sử giá close giảm 2% so với hôm qua
- Render valueBox() màu đỏ để cảnh báo Sally

Ta có thể tô màu một valueBox().

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

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

            color = "red"

            ),

    ...)
...

Nhiều màu hơn

Các màu có sẵn trong shinydashboard:

Các màu có trong shinydashboard.

Có thể xem các trạng thái và màu hợp lệ với ?validStatuses và ?validColors

Giao diện trong shinydashboard

shinydashboard có sẵn các giao diện (skin)
Áp dụng bằng cách đặt tham số skin trong dashboardPage()

dashboardPage(skin = <color>)

Các màu có thể dùng

"blue" (mặc định)
"black"
"purple"
"green"
"red"
"yellow"

Thử các giao diện khác nhau

Đặt màu tím để thử
Đặt màu đen để so sánh khác biệt

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

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

Giao diện tím.

Giao diện đen

Ayo berlatih!

Xây dựng Dashboard với shinydashboard