Shiny

ui.R

The ui.R is the equivalent of a website frontend. It contains all the HTML, CSS and JavaScript of a normal webpage. As such its usually easier to get to grips with.

All the most HTML tags are available using shiny::tags(), with shortcuts to the most common e.g. div()

The most minimal UI you can make looks like this:

## in ui.R
shinyUI(
  fluidPage(
    ## output functions
)

The functions shinyUI and fluidPage create the minimal HTML necessary for a Shiny app:

library(shiny)

## 
## Attaching package: 'shiny'

## The following object is masked from 'package:pander':
## 
##     p

shinyUI(fluidPage())

You will need to deal with a lot of brackets. Be stringent in knowing which closing brack refers to which function, as it can be very hard to debug. Good code style indentation helps:

library(shiny)
shinyUI(
  fluidPage(
    
  ) ## end fluidPage
) ## end shinyUI

Building a UI is then a matter of building up the structure in lots of nested UI functions.

## in ui.R
plotOutput("example")
## <div id="example" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>

## in server.R
output$example <- renderPlot({
  ## a function that creates a plot
  plot(mtcars)
})

library(shiny)

## create a slide input
sliderInput("input1", label = "A slider", min = 1, max = 10, value = 2)

# <div class="form-group shiny-input-container">
#  <label class="control-label" for="input1">A slider</label>
#  <input class="js-range-slider" id="input1" data-min="1" data-max="10" data-from="2" data-step="1" 
# data-grid="true" data-grid-num="9" data-grid-snap="false" data-prettify-separator="," data-keyboard="true" 
# data-keyboard-step="11.1111111111111" data-drag-interval="true" data-data-type="number"/>
# </div>

input$input1

## ui.R
library(shiny)

shinyUI(
  fluidPage(
    textInput("text_input", label = "input text"),
    textOutput("text_output")
  )
)

# server.R
library(shiny)

function(input, output) ({
   
  output$text_output <- renderText({
    input$text_input
  })
  
})

server.R

server.R contains the code that will change certain elements defined in the ui.R.

server.R is in fact a constantly looping function. As a user interacts with the ui.R it sends messages back to the server.R which then reacts (see, reactivity), outputs data to change and sends this back to the ui.R that renders it on the correct ID.

The looping function is around the objects we spoke about earlier - input and output. Optionally, you can also include an object called session which contains information about the general user session (such as what URL is being shown), which starts to explain how a minimal server.R file looks:

## in server.R
library(shiny)

function(input, output){

  output$plot1 <- renderPlot({
  
    ## get the data from csv
    web_data <- read.csv("gadata_example_2.csv", stringsAsFactors = FALSE)
    plot(web_data$date, web_data[[input$value1]])
  
  })

}

Exercise

1. What will this Shiny app render? Assume input$value1 is the name of a metric column of web_data

2. Make a Shiny app in a new RStudio project. (Click New > Shiny > Multiple File in RStudio interface) construct the ui.R that will alter the server.R code above. You will need to use the functions selectInput() to choose the data column you want to plot and plotOutput() to output the result.

3. What steps should we take to use highcharter instead of base plot?

Use these functions - renderHighchart, highchartOutput and to make the plot with the below:

library(highcharter)
hchart(web_data, "line", hcaes(x = date, y = sessions))

Using Reactives example

The below builds on the app below, but we now also want to display the Chi Squared value. As we will now have two UI elements we will have two server.R calls that rely on the same data.

Instead of importing the data in twice (it could be a API call) we will make a reactive object, and then when that object is ready (e.g. not NULL) pass it to the functions.

The req()function serves as a roadblock to stop the plot and text firing before the data is ready (important for API calls)

library(shiny)
library(dplyr)

function(input, output){
  
  ## all ui output rely on this data, but it is only ever called once
  raw_data <- reactive({
    
    ## get the data from csv
    read.csv("../data/gadata_example_2.csv", stringsAsFactors = FALSE)
    
  })
  
  ## transforms the raw data so it is suitable for chi square
  chi_data <- reactive({
    
    req(raw_data())
    req(input$metric)
    req(input$device)
    req(input$channel)
    
    raw_data <- raw_data()
    
    metric_data <- raw_data[, c("channelGrouping","deviceCategory", input$metric)]
    metric_data$metric <- metric_data[[input$metric]]
    
    metric_data <- metric_data[metric_data$deviceCategory %in% input$device, ]
    metric_data <- metric_data[metric_data$channelGrouping %in% input$channel, ]
    
    metric_data %>% 
      select(channelGrouping, deviceCategory, metric) %>%
      group_by(channelGrouping, deviceCategory) %>% 
      summarise(metric_sum = sum(metric)) %>% 
      tidyr::spread(channelGrouping, metric_sum)
    
  })
  
  output$table <- renderTable({
    req(chi_data())
    
    chi_data()
  })
  
  output$chi_text <- renderText({
    
    ## this is a roadblock so this function won't fire until the_Data is non-NULL
    req(chi_data())
    req(input$device)
    req(input$channel)
    
    ## do this as it make debugging a lot easier
    chi_data <- chi_data()

    chi_test <- chisq.test(chi_data[-1])
    paste("NULL hypothesis there is no relationship between ", paste(input$device, collapse = ", "), 
          " and ", 
          paste(input$channel, collapse = ", "),
          " - ",
          chi_test$method, " Chi^2: ", chi_test$statistic, " : p-value ", chi_test$p.value)
    
  })
  
}

The req(input$device) is good practice to have as the input list are not necessarily available to the function on start up - this guards against ugly red messages briefly when the app starts up.

With a ui.R adding the max text:

library(shiny)
library(highcharter)
shinyUI(
  fluidPage(
    selectInput("metric", label = "select column", choices = c("sessions",
                                                               "pageviews",
                                                               "entrances",
                                                               "bounces")),
    selectInput("device", label = "select device", choices = c("desktop", "mobile", "tablet"), multiple = TRUE),
    selectInput("channel", label = "select channel", choices = c("(Other)","Direct","Display","Email","Organic Search","Paid Search","Referral","Social","Video"), multiple = TRUE),
    tableOutput("table"),
    textOutput("chi_text"),
    br()
  )
)

Using reactive() Exercise

Add a plot to the Shiny app displaying some trend data, using the same raw_data() reactive source above. You can use some helper code shown below if you like:

library(highcharter)
library(dplyr)

## get the data from csv
plot_data <- raw_data()

## filter down to choices
plot_data <- plot_data[plot_data$channelGrouping %in% input$channel, ]
plot_data <- plot_data[plot_data$deviceCategory %in% input$device, ]

## trick to make easier to work with dplyr
plot_data$metric <- plot_data[[input$metric]]

## aggregate on metric
plot_data %>% 
  select(date, metric) %>% 
  group_by(date) %>% 
  summarise(metric_sum = sum(metric))

## create trend plot
hchart(plot_data, "line" , hcaes(x = date)) %>% hc_add_series(plot_data$metric_sum)