Shiny Dashboard Overview

In this part we will “dig deeper” to discover the amazing capabilities that a Shiny Dasboard provides.
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.

The dashboardPage function expects three components: a header, sidebar, and body:
#ui.R
dashboardPage( dashboardHeader(), dashboardSidebar(), dashboardBody() )

For more complicated apps, splitting app into pieces can make it more readable:

header <- dashboardHeader() sidebar <- dashboardSidebar() body <- dashboardBody() dashboardPage(header, sidebar, body)

Now we’ll look at each of the three main components of a shinydashboard.

HEADER

A header can have a title and dropdown menus. The dropdown menus are generated by the dropdownMenu function. There are three types of menus – messages, notifications, and tasks – and each one must be populated with a corresponding type of item.

Message menus

A messageItem contained in a message menu needs values for from and message. You can also control the icon and a notification time string. By default, the icon is a silhouette of a person. The time string can be any text. For example, it could be a relative date/time like “5 minutes”, “today”, or “12:30pm yesterday”, or an absolute time, like “2014-12-01 13:45”.
#ui.R
dropdownMenu(type = "messages", messageItem( from = "Sales Dept", message = "Sales are steady this month." ), messageItem( from = "New User", message = "How do I register?", icon = icon("question"), time = "13:45" ), messageItem( from = "Support", message = "The new server is ready.", icon = icon("life-ring"), time = "2014-12-01" ) )

Exercise 1

Create a dropdownMenu in your dashboardHeader as the example above. Put date, time and generally text of your choice.

Dynamic content

In most cases, you’ll want to make the content dynamic. That means that the HTML content is generated on the server side and sent to the client for rendering. In the UI code, you’d use dropdownMenuOutput like this:

dashboardHeader(dropdownMenuOutput("messageMenu"))

Exercise 2

Replace dropdownMenu with dropdownMenuOutput and the three messageItem with messageMenu.

The next step is to create some messages for this example.The code below does this work for us.
# Example message data in a data frame
messageData <- data.frame( from = c("Admininstrator", "New User", "Support"), message = c( "Sales are steady this month.", "How do I register?", "The new server is ready." ), stringsAsFactors = FALSE )

Exercise 3

Put messageData inside your server.r but outside of the shinyServer function.

And on the server side, you’d generate the entire menu in a renderMenu, like this:
output$messageMenu <- renderMenu({ # Code to generate each of the messageItems here, in a list. messageData # is a data frame with two columns, 'from' and 'message'. # Also add on slider value to the message content, so that messages update. msgs <- apply(messageData, 1, function(row) { messageItem( from = row[["from"]], message = paste(row[["message"]], input$slider) ) }) dropdownMenu(type = "messages", .list = msgs) })

Exercise 4

Put the code above(output$messageMenu) in the shinyServer of server.R.

Hopefully you have understood by now the logic behind the dynamic content of your Menu. Now let’s return to the static one in order to describe it a little bit more. So make the proper changes to your code in order to return exactly to the point we were after exercise 1.

Notification menus

A notificationItem contained in a notification contains a text notification. You can also control the icon and the status color. The code below gives an example.
#ui.r
dropdownMenu(type = "notifications", notificationItem( text = "20 new users today", icon("users") ), notificationItem( text = "14 items delivered", icon("truck"), status = "success" ), notificationItem( text = "Server load at 84%", icon = icon("exclamation-triangle"), status = "warning" ) )

Exercise 5

Create a dropdownMenu for your notifications like the example. Use text of your choice. Be careful of the type and the notificationItem.

Task menus

Task items have a progress bar and a text label. You can also specify the color of the bar. Valid colors are listed in ?validColors. Take a look at the example below.
#ui.r
dropdownMenu(type = "tasks", badgeStatus = "success", taskItem(value = 90, color = "green", "Documentation" ), taskItem(value = 17, color = "aqua", "Project X" ), taskItem(value = 75, color = "yellow", "Server deployment" ), taskItem(value = 80, color = "red", "Overall project" ) )

Exercise 6

Create a dropdownMenu for your tasks like the example above. Use text of your choice and create as many taskItem as you want. Be carefull of the type and the taskItem.

Disabling the header

If you don’t want to show a header bar, you can disable it with:

dashboardHeader(disable = TRUE)

Exercise 7

Disable the header.

Now enable it again.

Body

The body of a dashboard page can contain any regular Shiny content. However, if you’re creating a dashboard you’ll likely want to make something that’s more structured. The basic building block of most dashboards is a box. Boxes in turn can contain any content.

Boxes

Boxes are the main building blocks of dashboard pages. A basic box can be created with the box function, and the contents of the box can be (most) any Shiny UI content. We have already created some boxes in part 8 so lets enhance theis appearance a little bit.
Boxes can have titles and header bar colors with the title and status options. Look at the examples below.

box(title = "Histogram", status = "primary",solidHeader = TRUE, plotOutput("plot2", height = 250)), box( title = "Inputs", status = "warning", "Box content here", br(), "More box content", sliderInput("slider", "Slider input:", 1, 100, 50), textInput("text", "Text input:") )

Exercise 8

Give a title of your choice to all the box you have created in your dashboard except of the three widgets’ box.

Exercise 9

Change the status of the first three box to “primary” and the last three to “warning”.

Exercise 10

Transform the headers of your first three box to solid headers.