SHINY DASHBOARD STRUCTURE & APPEARANCE

Finally we reached in the final part of our series. At this part we will see how to improve the structure and the appearance of our dashboard even more, according to our preferences and of course make it more attractive to the user. Last but not least we will see the simplest and easiest way to deploy it.

Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!

Answers to the exercises are available here.

infoBox

There is a special kind of box that is used for displaying simple numeric or text values, with an icon.The example code below shows how to generate infoBox. The first row of infoBox uses the default setting of fill=FALSE.

Since the content of an infoBox will usually be dynamic, shinydashboard contains the helper functions infoBoxOutput and renderInfoBox for dynamic content.
#ui.R
library(shinydashboard) dashboardPage( dashboardHeader(title = "Info boxes"), dashboardSidebar(), dashboardBody( # infoBoxes with fill=FALSE fluidRow( # A static infoBox infoBox("New Orders", 10 * 2, icon = icon("credit-card")), # Dynamic infoBoxes infoBoxOutput("progressBox"), infoBoxOutput("approvalBox") )))
#server.R
shinyServer(function(input, output) { output$progressBox <- renderInfoBox({ infoBox( "Progress", paste0(25 + input$count, "%"), icon = icon("list"), color = "purple" ) }) output$approvalBox <- renderInfoBox({ infoBox( "Approval", "80%", icon = icon("thumbs-up", lib = "glyphicon"), color = "yellow" ) }) })

Exercise 1

Create three infoBox with information icons and color of your choice and put them in the tabItem “dt” under the “DATA-TABLE”.

To fill them with a color follow the example below:
#ui.R
library(shinydashboard) dashboardPage( dashboardHeader(title = "Info boxes"), dashboardSidebar(), dashboardBody( # infoBoxes with fill=FALSE fluidRow( # A static infoBox infoBox("New Orders", 10 * 2, icon = icon("credit-card"),fill = TRUE), # Dynamic infoBoxes infoBoxOutput("progressBox"), infoBoxOutput("approvalBox") ))) #server.R shinyServer(function(input, output) { output$progressBox <- renderInfoBox({ infoBox( "Progress", paste0(25 + input$count, "%"), icon = icon("list"), color = "purple",fill = TRUE ) }) output$approvalBox <- renderInfoBox({ infoBox( "Approval", "80%", icon = icon("thumbs-up", lib = "glyphicon"), color = "yellow",fill = TRUE ) }) })

Exercise 2

Fill the infoBox with the color you selected in Exercise 1. HINT: Use fill.

Exercise 3

Now enhance the appearance of your tabItem named “km” by setting height = 450 in the four box you have there.

Skins

There are a number of color themes, or skins. The default is blue, but there are also black, purple, green, red, and yellow. You can choose which theme to use with dashboardPage(skin = "blue"), dashboardPage(skin = "black"), and so on.

Exercise 4

Change skin from blue to red.

CSS

You can add custom CSS to your app by adding code in the UI of your app like this:
#ui.R
dashboardPage( dashboardHeader(title = "Custom font"), dashboardSidebar(), dashboardBody( tags$head(tags$style(HTML(' .main-header .logo { font-family: "Georgia", Times, "Times New Roman", serif; font-weight: bold; font-size: 24px; } '))) ) )

Exercise 5

Change the font of your dashboard title by adding CSS code.

Long titles

In some cases, the title that you wish to use won’t fit in the default width in the header bar. You can make the space for the title wider with the titleWidth option. In this example, we’ve increased the width for the title to 450 pixels.
#ui.R
dashboardPage( dashboardHeader( title = "Example of a long title that needs more space", titleWidth = 450 ), dashboardSidebar(), dashboardBody( ) )
#server.R
function(input, output) { }

Exercise 6

Set your titlewidth to “400” and then set it to the default value again.

Sidebar width

To change the width of the sidebar, you can use the width option. This example has a wider title and sidebar:

#ui.R
library(shinydashboard)
dashboardPage( dashboardHeader( title = "Title and sidebar 350 pixels wide", titleWidth = 350 ), dashboardSidebar( width = 350, sidebarMenu( menuItem("Menu Item") ) ), dashboardBody() )
#server.R
function(input, output) { }

Exercise 7

Set sidebar width to “400” and then return to the default one.

Icons

Icons are used liberally in shinydashboard. The icons used in shiny and shinydashboard are really just characters from special font sets, and they’re created with Shiny’s icon() function.

To create a calendar icon, you’d call:
icon("calendar")

The icons are from Font-Awesome and Glyphicons. You can see lists of all available icons here:

http://fontawesome.io/icons/
http://getbootstrap.com/components/#glyphicons

Exercise 8

Change the icon of the three menuItem of your dashboard. Select whatever you like from the two lists above.

Statuses and colors

Many shinydashboard components have a status or color argument.

The status is a property of some Bootstrap classes. It can have values like status="primary", status="success", and others.

The color argument is more straightforward. It can have values like color="red", color="black", and others.

The valid statuses and colors are also listed in ?validStatuses and ?validColors.

Exercise 9

Change the status of the three widget box in the tabItem named “km” to “info”, “success” and “danger” respectively.

Shinyapps.io

The easiest way to turn your Shiny app into a web page is to use shinyapps.io, RStudio’s hosting service for Shiny apps.

shinyapps.io lets you upload your app straight from your R session to a server hosted by RStudio. You have complete control over your app including server administration tools.

First of all you have to create an account in shinyapps.io.

Exercise 10

Publish your app through Shinyapps.io