ui <- fluidPage(
# Application title
titlePanel("FRED Data App"),
fluidRow(
# 12 columns on one row: this panel will take 1/3 of it
column(4, wellPanel(
selectInput("indicator", "Indicator:", vars)
),
helpText("Select an indicator, choose a date range and view the trend.
The grey bars represent economic recessions.
The data for this app comes from the St. Louis Fed's
FRED database. The consumer confidence, business confidence and
lead composite indicators are OECD data downloaded through FRED.")
),
# Remaining 2/3 occupied by plot
column(8,
plotOutput("lineChart"),
sliderInput(
"range",
"",
min = start_date,
max = end_date,
value = c(start_date, end_date),
width = "100%"
)
)
)
)Module 2.2
Line Chart App UI
Prework
- Read Mastering Shiny, Chapter 6
Now we can get started on developing the UI for our app and, along the way, learn a few more aspects of Shiny app layouts that we can apply.
For this app, we are going to have a title panel and two main display elements. The first is a panel where the user can select the indicator that they want to chart and the second is a plot with a slider where users can select the years they want to view. So let’s divide the UI into two sections using the fluidRow() and column()
The fluidRow() function creates horizontal containers while the column() function is used to create vertical containers. Since we our app is going to display a single row, we will have just one fluidRow() call. Then we can divide that row into two columns using the column() function. The first argument in column()is the column width. Since column widths in Shiny are based on the Boots Bootstrap 12-wide grid system, our column widths must add up to 12. So let’s make our panel for selecting the indicator 4 units wide and the area where we will display the plot 8 units wide.
From there, we can define the panel as a wellPanel() to give it an inset look and a grey background. We include selectInput() to get our dropdown where users can select an indicator from the vars list. Let’s also use the helpText() function to display some instructions regarding how to use the app.
For the main display section, we are going to have our plot out along with the slider input. We are going to call this input “range” and leave the label blank. Then we need to define a min value, a max value and a range for the slider. For min and max, we will use start_date and end_date, which we defined earlier in the setup and the combination of these to define the range (value). Then we set width to 100% because we want the slider to expand to fit the entire width of the plot. `