1. Statuses, colors and skins
Let's now beautify the dashboard.
2. Beautifying a restaurant
If a shinydashboard is like a restaurant, then customizing the dashboard is like beautifying the restaurant.
We can definitely have a plain and simple restaurant – that certainly has its own charm!
Nonetheless, we may want to design the restaurant in our own way, and serve not just great-tasting food but also visually appealing food.
After all, it is said that we first eat with our eyes.
In the same way, a more visually appealing dashboard also makes for a better user experience.
In this lesson, we will explain how we can customize the design of the shinydashboard, while keeping some good UI/UX principles in mind.
In particular, let us focus on changing the colors of some elements.
3. Statuses in shinydashboard
First, let's talk about statuses in shinydashboard.
Some shinydashboard objects have a property called status that can be altered.
These statuses can be set by specifying the status argument as one of the following. As expected, a success message is denoted by green and a danger message is denoted by red.
4. Statuses in notificationItems
For instance, this can be done for notificationItem. To demonstrate this, let's add two notification items in the header, one called "Sell alert" and one called "Buy alert" which are prompting Sally to either buy or sell a stock.
Let's set the buy alert to be a success message, since Sally is given the "green light" to buy a stock. Likewise, we can set the sell alert to be a danger message to remind Sally to sell off a stock as quickly as possible.
It should also be noted that the default status for a notificationItem is "success".
5. Statuses in boxes
Let's look at the box function. As we can see, leaving status alone means that the box will be uncolored.
If we set the status of a box, to say, "info", a colored line will be rendered at its top edge.
Let's also set the title for this box. This will then produce the title underneath the colored line.
Finally, we can set the solidHeader argument to TRUE, which further adds a colored border around the box and fills up the title.
6. Adding color to shinydashboard
In some shinydashboard objects like valueBox and infoBox, we can set the color argument.
Suppose the close price has fallen by 2% since yesterday.
We can render valueBox with a red coloration to warn Sally about this.
We achieve this by setting color to "red".
7. More colors
More colors are available in shinydashboard.
In fact, we can check the available statuses and colors by running ?validStatuses and ?validColors.
8. Skins in a shinydashboard
There are predefined differently colored skins in shinydashboard that can be used. These skins can be applied by setting the skin argument in the dashboardPage function, with the following syntax.
The possible colors are the following.
If the skin argument is left empty, the default skin will be blue, which is what we have seen so far.
9. Trying different skins
Let's set the color to purple to try this out.
See that while the header bar is now purple, the rest of the dashboard looks about the same.
Let's now choose the black skin to see if there will be any significant difference.
The header bar is now white, and the sidebar is now a darker shade of black. Furthermore, the notification icons have also changed from white to black. In short, these skins provide a quick way to change some colors in the dashboard, but this is also quite limiting.
10. Let's practice!
We will learn to customize the dashboard with greater control in the next video. For now, let's practice what we just learned!