Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: ensure min/max height args on value_box() and column layouts #1016

Merged
merged 5 commits into from
Mar 18, 2024

Conversation

gadenbuie
Copy link
Member

@gadenbuie gadenbuie commented Mar 18, 2024

Fixes #973 #974

  • Adds min_height to value_box()
  • Adds min_height and max_height to layout_columns() and layout_column_wrap()

Example

Example App
library(shiny)
library(bslib)
library(ggplot2)

data(penguins, package = "palmerpenguins")

# Calculate column means for the value boxes
means <- colMeans(
  penguins[c("bill_length_mm", "bill_length_mm", "body_mass_g")],
  na.rm = TRUE
)

ui <- page_sidebar(
  title = "Penguins dashboard",
  sidebar = sidebar(
    varSelectInput(
      "color_by", "Color by",
      penguins[c("species", "island", "sex")],
      selected = "species"
    )
  ),
  layout_columns(
    fill = FALSE,
    value_box(
      title = "Average bill length",
      value = scales::unit_format(unit = "mm")(means[[1]]),
      showcase = bsicons::bs_icon("align-bottom")
    ),
    value_box(
      title = "Average bill depth",
      value = scales::unit_format(unit = "mm")(means[[2]]),
      showcase = bsicons::bs_icon("align-center"),
      theme_color = "dark"
    ),
    value_box(
      title = "Average body mass",
      value = scales::unit_format(unit = "g", big.mark = ",")(means[[3]]),
      showcase = bsicons::bs_icon("handbag"),
      theme_color = "secondary"
    )
  ),
  layout_columns(
    min_height = 300, #<<
    max_height = 400, #<<
    card(
      full_screen = TRUE,
      card_header("Bill Length"),
      plotOutput("bill_length")
    ),
    card(
      full_screen = TRUE,
      card_header("Bill depth"),
      plotOutput("bill_depth")
    )
  ),
  card(
    min_height = 400, #<<
    full_screen = TRUE,
    card_header("Body Mass"),
    plotOutput("body_mass")
  )
)

server <- function(input, output) {
  gg_plot <- reactive({
    ggplot(penguins) +
      geom_density(aes(fill = !!input$color_by), alpha = 0.2) +
      theme_bw(base_size = 16) +
      theme(axis.title = element_blank())
  })

  output$bill_length <- renderPlot(gg_plot() + aes(bill_length_mm))
  output$bill_depth <- renderPlot(gg_plot() + aes(bill_depth_mm))
  output$body_mass <- renderPlot(gg_plot() + aes(body_mass_g))
}

shinyApp(ui, server)

The example app above has three rows of elements in a fillable page_sidebar() container. Without adding min_height anywhere in the UI, at small screen heights the app looks like this:

image

Adding min_height = 300 to the layout_columns() with the two plots and min_height = 400 to the final card, we now have a layout that scrolls at small screen heights.

image

@gadenbuie gadenbuie merged commit c86d63e into main Mar 18, 2024
13 checks passed
@gadenbuie gadenbuie deleted the feat/min_height branch March 18, 2024 15:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add min_height argument to value_box()
2 participants