Modern Dashboards with bslib

ShinyConf 2024

Garrick Aden-Buie

2024-04-18

👋 Hi, I’m Garrick

🆕 Joined Shiny in 2023

🎨 {bslib} with Carson Sievert

shiny + bslib

library(shiny)
library(bslib)

ui <- fluidPage(
  theme = bs_theme(),
  # ...
)

rstudio.github.io/bslib

dash · board | ˈdaSHˌbôrd |

👨‍💻 Can you show me a dashboard made by humans?

🤖 …

Is this a dashboard?

It’s only a dashboard if it’s from the shinydashboard package, otherwise it’s a ✨ sparkling dashboard ✨

Is this a dashboard?

https://dribbble.com/shots/17581433-Mobile-Sales-Analytics-Figma-UI-Kit

Is this a dashboard?

Is this a dashboard?

https://www.dear-data.com/all

👨‍💻 How would a LinkedIn influencer define a dashboard?

🤖 …

A dashboard is a powerful tool for facilitating

data-driven decision-making and enhancing

business performance by visualizing key metrics

in a user-friendly and accessible format.

How to make a dashboard in 3 easy steps

How to make a dashboard in 3 easy steps

  1. 👷‍♀️ Find, clean, assemble, explore, learn, re-clean some data

  2. 📊 Summarize and present the data

  3. 🧑‍🤝‍🧑 Share with your friends

🙅 🙅‍♀️ 🙅‍♂️

How to make a dashboard in 3 easy steps

  1. 🤔 Find someone with a question

  2. 🦸 Use your data skills

  3. 🚀 Share your data powers

Photo by Kenny Eliason on Unsplash

Photo by Mike Von on Unsplash

Photo by Hill Country Camera on Unsplash

Photo by Hill Country Camera on Unsplash

bslib is the new shinydashboard

bslib is the new shinydashboard

  1. Philosophical successor, not a drop in replacement

  2. Data-driven anything, not just “dashboards”

  3. Packed with transferrable experiences

Modern Dashboards with bslib

install.packages("shiny")

install.packages(c("shiny", "bslib"))

shiny

library(shiny)


ui <- fluidPage(

)

server <- function(input, output, session) {

}

shinyApp(ui, server)

shiny + bslib

library(shiny)
library(bslib)

ui <- page_fluid(

)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Choose your page

page_sidebar()

page_navbar()

page_fillable()

Value boxes

value_box(
  title = textOutput("wday"),
  value = uiOutput("weather"),
  showcase = uiOutput("icon"),
  showcase_layout = "top right",
  theme = "bg-gradient-blue-purple"
)

value_box(
  title = textOutput("wday"),
  value = textOutput("avg_temp"),
  showcase = plotlyOutput("plot"),
  showcase_layout = "bottom",
  full_screen = TRUE
)

bslib.shinyapps.io/build-a-box

Layout columns

layout_columns(
  value_box(...),
  value_box(...),
)

or

layout_column_wrap(
  value_box(...),
  value_box(...),
)

Accordions

accordion(
  accordion_panel(
    "Settings",
    ...
  ),
  accordion_panel(
    "Theme",
    ...
  )
)

Tooltips & Popovers

tooltip(
  trigger_element,
  strong("Thursday"),
  # ...
)

popover(
  bsicons::bs_icon("three-dots"),
  title = "Adjust display..."
  input_switch("show_title", "Title"),
  # ...
)

Task Button

# instead of this...
actionButton(
  "save_location",
  "Get Forecast"
)

# use this!
input_task_button(
  "save_location",
  "Get Forecast"
)

Dark Mode!

input_dark_mode()

input_dark_mode(id = "dark_mode")
#> input$dark_mode

rstudio.github.io/bslib

Thanks!