bslib

As we mentioned earlier, the bslib package provides a modern UI toolkit for Shiny, R Markdown, and Quarto based on Bootstrap. It provides,

• Custom theming of Shiny apps and R Markdown documents

• Switch between different versions of Bootstrap

• Modern UI components like cards, value boxes, sidebars, and more.

We will now take a look at the first two of these features.

Bootswatch

Due to the ubiquity of Bootstrap a large amount of community effort has gone into developing custom themes - a large free collection of these are available at bootswatch.com/.

bs_theme()

Provides a high level interface to adjusting the theme for an entire Shiny app,

• Change bootstrap version via version argument

• Pick a bootswatch theme via bootswatch argument

• Adjust basic color palette (bg, fg, primary, secondary, etc.)

• Adjust fonts (base_font, code_font, heading_font, font_scale)

• and more

The object returned by bs_theme() can be passed to the theme argument of fluidPage() and similar page UI functions.

Demo 11 - Dynamic theming

library(tidyverse)
library(shiny)
library(bslib)

d = readr::read_csv(here::here("data/weather.csv"))

d_vars = c("Average temp" = "temp_avg",
           "Min temp" = "temp_min",
           "Max temp" = "temp_max",
           "Total precip" = "precip",
           "Snow depth" = "snow",
           "Wind direction" = "wind_direction",
           "Wind speed" = "wind_speed",
           "Air pressure" = "air_press")

ui = page_sidebar(
  theme = bs_theme(),
  title = "Weather Data",
  sidebar = sidebar(
    selectInput(
      "region", "Select a region", 
      choices = c("West", "Midwest", "Northeast", "South")
    ),
    selectInput(
      "name", "Select an airport", choices = c()
    )
  ),
  card(
    card_header(
      textOutput("title"),
    ),
    card_body(
      plotOutput("plot")
    )
  ),
  uiOutput("valueboxes")
)

server = function(input, output, session) {
  bslib::bs_themer()
  
  observe({
    updateSelectInput(
      session, "name",
      choices = d |>
        distinct(region, name) |>
        filter(region == input$region) |>
        pull(name)
    )
  })
  
  output$valueboxes = renderUI({
    clean = function(x) {
      round(x,1) |> paste("°C")
    }
    
    layout_columns(
      value_box(
        title = "Average Temp",
        value = mean(d_city()$temp_avg, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-half"),
        theme = "success"
      ),
      value_box(
        title = "Minimum Temp",
        value = min(d_city()$temp_min, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-snow"),
        theme = "primary"
      ),
      value_box(
        title = "Maximum Temp",
        value = max(d_city()$temp_max, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-sun"),
        theme = "danger"
      )
    )
  })
  
  output$title = renderText({
    names(d_vars)[d_vars==input$var]
  })
  
  d_city = reactive({
    req(input$name)
    d |>
      filter(name %in% input$name)
  })
  
  output$plot = renderPlot({
    d_city() |>
      ggplot(aes(x=date, y=.data[[input$var]])) +
      geom_line() +
      theme_minimal()
  })
}

shinyApp(ui = ui, server = server)

thematic

thematic is an R package that:

Simplified theming of ggplot2, lattice, and {base} R graphics. In addition to providing a centralized approach to styling R graphics, thematic also enables automatic styling of R plots in Shiny, R Markdown, and RStudio.

In the case of our Shiny app, to get dynamic theming of our plot as well as our UI all we need to do is to include a call to thematic_shiny() before the app is loaded.

Demo 12 - Full dynamic theming

library(tidyverse)
library(shiny)
library(bslib)

d = readr::read_csv(here::here("data/weather.csv"))

d_vars = c("Average temp" = "temp_avg",
           "Min temp" = "temp_min",
           "Max temp" = "temp_max",
           "Total precip" = "precip",
           "Snow depth" = "snow",
           "Wind direction" = "wind_direction",
           "Wind speed" = "wind_speed",
           "Air pressure" = "air_press")

ui = page_sidebar(
  theme = bs_theme(),
  title = "Weather Data",
  sidebar = sidebar(
    selectInput(
      "region", "Select a region", 
      choices = c("West", "Midwest", "Northeast", "South")
    ),
    selectInput(
      "name", "Select an airport", choices = c()
    )
  ),
  card(
    card_header(
      textOutput("title")
    ),
    card_body(
      plotOutput("plot")
    )
  ),
  uiOutput("valueboxes")
)

server = function(input, output, session) {
  bslib::bs_themer()
  
  observe({
    updateSelectInput(
      session, "name",
      choices = d |>
        distinct(region, name) |>
        filter(region == input$region) |>
        pull(name)
    )
  })
  
  output$valueboxes = renderUI({
    clean = function(x) {
      round(x,1) |> paste("°C")
    }
    
    layout_columns(
      value_box(
        title = "Average Temp",
        value = mean(d_city()$temp_avg, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-half"),
        theme = "success"
      ),
      value_box(
        title = "Minimum Temp",
        value = min(d_city()$temp_min, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-snow"),
        theme = "primary"
      ),
      value_box(
        title = "Maximum Temp",
        value = max(d_city()$temp_max, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-sun"),
        theme = "danger"
      )
    )
  })
  
  output$title = renderText({
    names(d_vars)[d_vars==input$var]
  })
  
  d_city = reactive({
    req(input$name)
    d |>
      filter(name %in% input$name)
  })
  
  output$plot = renderPlot({
    d_city() |>
      ggplot(aes(x=date, y=.data[[input$var]])) +
      geom_line()
  })
}

thematic::thematic_shiny()

shinyApp(ui = ui, server = server)

Your turn - Exercise 06

Using code provided in exercises/ex06.R (which is the same as demo09) experiment with bslib’s themer tool to explore different themes .

• Try changing the main theme as well as the foreground and background colors

• Try changing one or more of the accent colors

• Try the fonts being used (e.g. Prompt, roboto, Oswald, Fira Sans) and changing the base font size

• Based on the output in your console, update the bs_theme() call in the script to reflect the changes you made

Your turn - Exercise 07 - Part 1

Go to shinyapps.io and sign up for an account if you don’t have one already.

• You can create a new account via email & a password

• or via o-auth through Google or GitHub.

If asked to pick a plan, use the Free option (more than sufficient for our needs here)

Organizing your app

For deployment generally apps will be organized as a single folder that contains all the necessary components (R script, data files, other static content).

• Pay attention to the nature of any paths used in your code

  • Absolute paths are almost certainly going to break

  • Relative paths should be to the root of the app folder

• Static files (e.g. css, js, etc.) generally are placed in the www/ subfolder

• Your script does not need to be named app.R or ui.R/server.R

• Check / think about package dependencies

Your turn - Exercise 07 - Part 2

Now we will publish our app to shinyapps.io (you will need to have completed Exercise 7 - Part 1)

1. Package up ex07.R as an app in exercises/ex07app (you will need to create this folder)

   • Make sure to copy the data (weather.csv) into this folder
   • and adjust any paths if necessary

2. Open the script file in exercises/ex08app and click the Publish Document button in the upper right of the pane

   • You should be presented with the “Publish to server” dialog, click on the Add New Account link in the upper right

   • Select shinyapps.io and follow the instructions to connect

Your turn - Exercise 07 - Part 2 (cont.)

3. Once authenticated you should be back at the “Publish to server” dialog, use this to select which files to include (select your script and data file)

4. Your Shiny app should now be deploying and should open on shinyapps.io once live - check to see if everything works, if not go back and check Steps 1 and 3.

5. Once you have successfully deployed your app, share the links with your neighbour(s) and see if you can run their deployed app.

Demo 13 - shinylive

One of the really exciting developments in the last couple of years is the ability to run R (and Python) inside a web browser using webasm. shinylive is a package that lets you bundle your shiny app as a static website that can be hosted anywhere you can host static html.

shinylive::export("demos/demo13","demos/demo13/site")

httpuv::runStaticServer("demos/demo13/site")

Other publishing options

• For other R users - you can share your script(s) and data directly

  • or better yet, bundle them into an R package

• Run a local instance of shiny server

• Use shinyapps.io (public) or posit.cloud (within team)

• Use Posit Connect

Mastering Shiny

Shiny user showcase

The Shiny User Showcase is comprised of contributions from the Shiny app developer community. The apps are categorized into application areas and presented with a brief description, tags, and for many, the source code. Note that many of these apps are winners and honorable mentions of our annual Shiny contest!

Shiny contest winners blog posts:

• 1st contest winners

• 2nd contest winners

• 3rd contest winners

• 4th contest is ongoing - deadline for submission is Sunday September 15th

shinyjs

Easily improve the user experience of your Shiny apps in seconds

• Hide (or show) an element

• Disable (or enable) an input

• Reset an input back to its original value

• Delay code execution

• Easily call your own JavaScript functions from R

DT

The R package DT provides an R interface to the JavaScript library DataTables. R data objects (matrices or data frames) can be displayed as tables on HTML pages, and DataTables provides filtering, pagination, sorting, and many other features in the tables.

• Interactive tables

• Tables as inputs

• Editable tables

reactable

Interactive data tables for R, based on the React Table library and made with reactR.

• Sorting, filtering, pagination
• Grouping and aggregation
• Built-in column formatting
• Custom rendering via R or JavaScript
• Expandable rows and nested tables
• Conditional styling

htmlwidgets

The htmlwidgets package provides a framework for easily creating R bindings to JavaScript libraries. Widgets created using the framework can be:

• Used at the R console for data analysis just like conventional R plots (via RStudio Viewer).
• Seamlessly embedded within R Markdown documents and Shiny web applications.
• Saved as standalone web pages for ad-hoc sharing via email, Dropbox, etc.

pool

The goal of the pool package is to abstract away the logic of connection management and the performance cost of fetching a new connection from a remote database. These concerns are especially prominent in interactive contexts, like Shiny apps (which connect to a remote database) or even at the R console.

See articles available at shiny.rstudio.com/articles/#data

Awesome Shiny Extensions

A curated list of awesome R packages that offer extended UI or server components for the R web framework Shiny.

Workshop Survey

Thank you!