ステータス、色、スキン

shinydashboard で作るダッシュボード

Png Kee Seng

Researcher

レストランを美しくする

ダッシュボードのカスタマイズは、レストランの見栄えを良くするのと同じ
まず見た目で判断すると言われる
視覚的に魅力的だと UX も向上
まずはいくつかの要素の色を変える

見た目を整えたレストランと魅力的な料理。

¹ Image by Freepik

shinydashboard のステータス

一部の shinydashboard オブジェクトには status プロパティがある
これらは status 引数で設定する
```
<object>(status = <status>, ...)
```

shinydashboard のステータス

notificationItem のステータス

ヘッダーに通知アイテムを 2 件追加
- Buy アラートを success に設定
- Sell アラートを danger に設定
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() を描画

valueBox() を着色できる。

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

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

            color = "red"

            ),

    ...)
...

追加の色

shinydashboard で利用可能な色:

shinydashboard で利用可能な色。

?validStatuses と ?validColors で確認可能

shinydashboard のスキン

shinydashboard には定義済みのスキンがある
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)

紫のスキン。

黒のスキン。

Passons à la pratique !

shinydashboard で作るダッシュボード