Use of this document

This is a study note for using \(shiny\) package for user interface. For more details on the study material see:

Prerequisites

# essential
library(shiny)

1. Overview

\(shiny\) is built on the idea of reactive programming that outputs automatically update whenever an input value changes. Reactive expressions keep track of what values they read and what values they change. If those values become “out of date”, they know their return value is out of date and will automatically recalculate. Reactivity automaticaly occurs whenever you use an input value to render an output object:

\[UI: XXXInput(inputId) \Rightarrow Server: renderXXX(\{R\ code\}) \Rightarrow UI: XXXOutput(ouputId)\]

The Architecture for a Shiny App

The Architecture for a Shiny App

2. Architecture

Shiny apps let users interact with data and analysis. And do it all with R. It also can be used to host standalone apps on a webpage or embed them in R Markdown documents or build dashboards. \(Shiny\) is an R package that makes it easy to build interactive web apps straight from R.

2.1 A simplified shiny app template

library(shiny)
ui <- fluidPage(
  # XXXInput(inputId_1) 
  # XXXOutput(outputId_1) 
)
server <- function(input, output) {
  output$outputId_1 <- renderXXX({
    # R code chunk for the object type XXX depended on some inputId
    # Fun_1(input$inputId_1)
  })
}
shinyApp(ui, server)

2.2 A shiny app template with mulitple tap and

library(shiny)
# additional pkg

# steady data

ui <- fluidPage(
  navbarPage("ggfun",
             # tap 1
             tabPanel("inputId_1",
                      sidebarLayout(
                        sidebarPanel(
                          h3("header"),
                          #XXXInput(inputId_1)  
                        ),
                        mainPanel(
                          plotOutput("outputId_1"), 
                          height="auto"
                        )
                      ))
             # tap 2
             tabPanel("inputId_2",
                      sidebarLayout(
                        sidebarPanel(
                          h3("header"),
                          XXXInput(inputId_2) 
                        ),
                        mainPanel(
                          plotOutput("outputId_2"), 
                          height="auto"
                        )
                      ))

               )
)

# Define server logic required to draw a histogram
server <- function(input, output,session) {
  
  output$outputId_1 <- renderPlot({
    # R code chunk for the object type XXX depended on some inputId
    # Fun_1(input$inputId_1)
  }, 
  
  height = function() {
    session$clientData$outputId_1 * 2/3
  })

    output$outputId_2 <- renderPlot({
    # R code chunk for the object type XXX depended on some inputId
    # Fun_2(input$inputId_2)
  }, 
  
  height = function() {
    session$clientData$outputId_2 * 2/3
  })
}

# Run the application
shinyApp(ui = ui, server = server)

2.1 UI

Add elements to the shiny app as argument to:

ui <- fluidPage(
  # XXXInput(inputId_1) 
  # XXXOutput(outputId_1) 
)

2.1.1 Input function

The elements of the user interface are called widgets. Input widgets have a similar structure:

  • xxxInput (inputId, label, value) where:
    • xxx: is the name of the widget
    • inputId: is the (unique) name you give to the widget (object name)
    • label: the text that appears with the widget in interface
    • value: all widgets have a value. Often time, it is the default of the input.
    • ...: other parameters are widget-specific

The option of Input function (Widgets) are:

  • actionButton() and submitButtion(): creates a clickable button
  • checkboxInput() and checkboxGroupInput(): check box/boxes
  • dateInput(): calendar to select a date
  • dateRangeInput(): select a range of dates
  • fileInput(): upload a file
  • numericInput(): input a numeric value
  • radioButtons(): select one or more items
  • sliderInput(): slide along a range of values
  • textInput(): input a string
  • selectInput: multiple select input box
The Input function and the Widgets visualization

The Input function and the Widgets visualization

Reference: Shiny Widgets Gallery

2.1.1 Output function

  • xxxOutput(outputId) where:
    • xxx: the type of output object to display
    • outputId: the name to give to the output object
    • ...: other parameters are output-specific

The option of Output function are:

  • htmlOutput(), imageOutput(), plotOutput(), tableOutput(), textOutput(): creates what the names says.
  • uiOutput(): raw HTML
  • verbatimTextOutput(): text

2.2 Server

save object to display to output$ by building the object to display with renderXXX() use the input values with input$

server <- function(input, output) {
  output$outputId_1 <- renderXXX({
    # R code chunk for the object type XXX depended on some inputId
    Fun_1(input$inputId_1)
  })
}

2.2.1 Render function

The option of render function are:

  • renderTable(): output an HTML table
  • renderDataTable(): outputs an interactive, sortable data table, from a data frame, matrix, or other table-like structure
  • renderPlot(): output an R plot
  • renderImage(): print an image to the page
  • renderText(): output text from R
  • renderPrint(): output text from print() in R
  • renderUI(): output a custom part of the user interface
  • htmlOutput(): output html elements

3. Sharing apps

3.1 Wrapping apps

  • One directory with every file the app needs
    • R script (must use these exact names)
      • One file app: app.R
      • Two file app: ui.R, server.R
    • datasets, images, css, helper scripts,etc

3.2 Launch apps

Rstudio can recognize there is a shiny app in the app.r file

  • click Run app in the source editor in Rstudio.

3.3 shiny server