Statuses, colors and skins

Building Dashboards with shinydashboard

Png Kee Seng

Researcher

Beautifying a restaurant

Customizing the dashboard will be like beautifying the restaurant
It is said that we first eat with our eyes
A more visually appealing dashboard also makes for a better user experience
Let us focus on changing the colors of some elements

A beautified restaurant with visually appealing food.

¹ Image by Freepik

Statuses in shinydashboard

Some shinydashboard objects have a status property
These status can be set by specifying the status argument
```
<object>(status = <status>, ...)
```

Statuses in a shinydashboard

Statuses in notificationItems

Let's add two notification items in the header
- Set buy alert to be a success message
- Set sell alert to be a danger message
Default status for notificationItem() is "success"

Success and danger statuses for notificationItem.

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

       notificationItem("Sell alert",

       status = "danger"

       ),

       notificationItem("Buy alert",

       status = "success"

       )

))
...

Statuses in boxes

Leaving status untouched means an uncolored box
Set status to "info"
Set title
Set the solidHeader = TRUE

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

        title="Stock name title",

        width = 6,

        status = "info",

        solidHeader = TRUE)),

...

Box with info status.

Box with info status and title.

Box with info status, title, and solid filling.

Adding color to shinydashboard

In some shinydashboard objects, we can set color
Suppose close price has fallen by 2% since yesterday
- Render valueBox() with a red coloration to warn Sally

We can color a valueBox().

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

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

            color = "red"

            ),

    ...)
...

More colors

Available colors in shinydashboard:

Colors available in shinydashboard.

Can check the available statuses and colors with ?validStatuses and ?validColors

Skins in a shinydashboard

There are predefined skins in the shinydashboard
Can be applied by setting the skin argument in dashboardPage()

dashboardPage(skin = <color>)

These are the possible colors

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

Trying different skins

Set the color to purple to try this out
Set the color to black to look for differences

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

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

Purple skin.

Black skin

Let's practice!

Building Dashboards with shinydashboard