Building Shiny App Exercises (part-9)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.
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.
R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.