狀態、色彩與介面外觀

使用 shinydashboard 建立儀表板

Png Kee Seng

Researcher

美化餐廳

客製化儀表板就像把餐廳變漂亮
常說人是先用眼睛品嚐
更吸睛的儀表板也能提升使用體驗
我們先專注調整部分元素的色彩

更美化的餐廳與賞心悅目的餐點。

¹ Image by Freepik

shinydashboard 的狀態

部分 shinydashboard 物件有 status 屬性
可以透過 status 參數設定狀態
```
<object>(status = <status>, ...)
```

shinydashboard 中的狀態

notificationItem 的狀態

在頁首加入兩個通知項目
- 將買進警示設為成功訊息
- 將賣出警示設為危險訊息
notificationItem() 的預設狀態是 "success"

notificationItem 的 success 與 danger 狀態。

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

       notificationItem("Sell alert",

       status = "danger"

       ),

       notificationItem("Buy alert",

       status = "success"

       )

))
...

方塊中的狀態

不設定 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 的介面外觀（Skin）

shinydashboard 提供預設介面外觀（skins）
在 dashboardPage() 中設定 skin 參數即可套用

dashboardPage(skin = <color>)

可用的色彩如下

"blue"（預設）
"black"
"purple"
"green"
"red"
"yellow"

嘗試不同外觀

先將色彩設為紫色試試
再設為黑色比較差異

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

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

紫色外觀。

黑色外觀

一起來練習吧！