Advanced Carding

It’s cards all the way down.

Outline

• Advanced carding (6)
• Your turn: breakout exercise (4)

Advanced card features

Card with a sidebar layout

For a card with a sidebar, you can nest a layout_sidebar() directly inside a card(). bslib does the rest of the work for you.

#| standalone: true
#| components: [editor, viewer]
#| viewerHeight: 500px
## file: ui.R
library(shiny)
library(bslib)
library(plotly)
library(collegeScorecard)

school_degrees <- levels(school$deg_predominant)
school_degrees <- setdiff(school_degrees, "Graduate")

input_deg_predmoninant <-
  selectInput(
    "deg_predominant",
    "Predominant Degree Type",
    choices = school_degrees,
    selected = "Bachelor"
  )


page_fillable(
  input_deg_predmoninant,
  plotlyOutput("plot_rate_admissions")
)


## file: server.R
function(input, output, session) {
  r_scorecard <- reactive({
    school_filter <- school

    school_filter <- school_filter[
      school_filter$deg_predominant == input$deg_predominant,
    ]

    scorecard[scorecard$id %in% school_filter$id, ]
  })

  plotly_cleaner <- function(x) {
    x |>
      config(displayModeBar = FALSE) |>
      layout(margin = list(l = 0, r = 0, b = 0))
  }

  filter_recent_complete_year <- function(scorecard, column) {
    academic_year <- scorecard[!is.na(scorecard[[column]]), ]$academic_year
    scorecard[scorecard$academic_year == max(academic_year), ]
  }

  output$plot_rate_admissions <- renderPlotly({
    r_scorecard() |>
      filter_recent_complete_year("rate_admissions") |>
      (\(x) x[!is.na(x$rate_admissions), ])() |>
      plot_ly(x = ~rate_admissions, type = "histogram") |>
      layout(xaxis = list(title = "Rate")) |>
      plotly_cleaner()
  })
}

Navset cards

Navset cards are similar to page_navbar() or the navset_*() function variants. They all follow the same pattern of navset_card_{type}:

#| standalone: true
#| components: [editor, viewer]
library(shiny)
library(bslib)

ui <- page_fillable(
  navset_card_tab(
    nav_panel(
        "First tab name",
        "... first tab content"
    ),
    nav_panel(
        "Second tab name",
        "... second tab content"
    )
  )
)

shinyApp(ui, \(...) { })

Navset cards with sidebars

With navset cards, you have two sidebar choices:

• For local sidebars in one of the nav panels, nest layout_sidebar() inside the nav_panel().
• For global sidebars, use the sidebar argument.

#| standalone: true
#| components: [editor, viewer]
library(shiny)
library(bslib)

ui <- page_fillable(
  navset_card_tab(
    nav_panel(
        "First tab name",
        "... first tab content"
    ),
    nav_panel(
        "Second tab name",
        "... second tab content"
    )
  )
)

shinyApp(ui, \(...) { })

🧑‍💻 Your Turn

exercises/06_app.R

Exercise Code

exercises/06_app.R

library(shiny)
library(bslib)
library(dplyr)
library(plotly)
library(collegeScorecard)


# UI ----------------------------------------------------------------------

ui <- page_fillable(
  title = "06 - Navset Cards",
  "Campus Setting",
  plotlyOutput("plot_cost_earnings_by_locale_type"),
  "Highest Degree",
  plotlyOutput("plot_cost_earnings_by_deg_highest"),
  "Testing Requirements",
  plotlyOutput("plot_cost_earnings_by_adm_req_test")
)


shinyApp(ui, source("06_server.R")$value)

The app in exercises/06_app.R contains three variations of the same plot of yearly costs vs median earnings. (You might recognize this plot from the second exercise.)

Use a navset card to improve the organization and usability of the plots.