Add Value and Info Box in Shiny and Rmarkdown

Introduction
This post explains how you can add value and info boxes in shiny and Rmarkdown. Value and Info Boxes are very popular to display insights in colorful boxes, they are available in shinydashboard package but not in shiny and Rmarkdown. There are many times when you don't want to use shinydashboard template but want to include value and info boxes to make your shiny app visually appealing.
Value / Info Box in Shiny and Rmarkdown
Installation
I am glad to release R package named summaryBox for this. You can install it from github. It is not available in CRAN yet.
remotes::install_github("deepanshu88/summaryBox")
Basic Example
This is a basic example for demonstration purpose. This package is based on Bootstrap 4 so it's important you enable Bootstrap 4 in shiny using bslib library as shiny by default uses Bootstrap 3. Latest version of Shiny (1.6) started supporting Bootstrap 4 so it does not work with prior versions of shiny (< 1.6.0). Bootstrap 4 is the future in upcoming versions of shiny. Bootstrap 3 is very old and was launched in the year of 2013. Bootstrap 4 is also 3.5 years old but has a lot of pros over Bootstrap 3. Bootstrap 4 supports SASS for styling, it also uses rem instead of px which can scale elements up and down without getting stuck with a fixed size.
library(shiny)
library(summaryBox)

# Bootstrap 4
theme <- bslib::bs_theme(version = 4)

# UI
ui <- fluidPage(

  theme = theme,

  br(),

  fluidRow(

    summaryBox("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info"),
    summaryBox("Earnings (Annual)", "9332", width = 3, icon = "fas fa-dollar-sign", style = "success"),
    summaryBox("Tasks", "346", width = 3, icon = "fas fa-clipboard-list", style = "danger"),
    summaryBox("Pending Requests", "346", width = 3, icon = "fas fa-comments", style = "primary")

  ),

  fluidRow(

    summaryBox("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info", border = "bottom"),
    summaryBox("Earnings (Annual)", "9332", width = 3, icon = "fas fa-dollar-sign", style = "success", border = "bottom"),
    summaryBox("Tasks", "346", width = 3, icon = "fas fa-clipboard-list", style = "danger", border = "bottom"),
    summaryBox("Pending Requests", "346", width = 3, icon = "fas fa-comments", style = "primary", border = "bottom")

  ),


  fluidRow(
    summaryBox2("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info"),
    summaryBox2("Earnings (Annual)", "9332", width = 3, icon = "fas fa-dollar-sign", style = "success"),
    summaryBox2("Tasks", "346", width = 3, icon = "fas fa-clipboard-list", style = "danger"),
    summaryBox2("Pending Requests", "346", width = 3, icon = "fas fa-comments", style = "primary")
  ),

  br(),

  # Info Box
  fluidRow(
    summaryBox3("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info"),
    summaryBox3("Earnings (Annual)", "9332", width = 3, icon = "fas fa-dollar-sign", style = "success"),
    summaryBox3("Tasks", "346", width = 3, icon = "fas fa-clipboard-list", style = "danger"),
    summaryBox3("Pending Requests", "346", width = 3, icon = "fas fa-comments", style = "primary")
  )

)

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


}

# Run App
shinyApp(ui = ui, server = server)
In this package, there are 3 functions for value and info boxes.
  • summaryBox( )
  • summaryBox2( )
  • summaryBox3( )
summaryBox3( )
Syntax
Syntax of summaryBox( ) along with its variable definition is as follows.
summaryBox(
  title,
  value,
  width = 4,
  icon = "fas fa-chart-bar",
  style = "info",
  border = "left"
)

Arguments
title    Text to be shown in the box
value   Value to be shown in the box
width   Width of Box. width = 4 means 3 boxes can be fitted (12 / 4)
icon     Font Awesome 5 icons. E.g. "fas fa-chart-bar"
style    Either "primary", "secondary", "info", "success", "danger", "warning"
border  Either "left", "bottom"
summaryBox2( ) function also supports "light" and "dark" styles in addition to these styles "primary", "secondary", "info", "success", "danger", "warning"
Render Box in Server
You can use renderUI( ) for communicating it with reactives which makes it dynamic. See the example below.
library(shiny)
library(summaryBox)

# Bootstrap 4
theme <- bslib::bs_theme(version = 4)

# UI
ui <- fluidPage(

  theme = theme,
  br(),
  uiOutput("summarybox")

)

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

  output$summarybox <- renderUI({

    fluidRow(
      summaryBox("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info"),
      summaryBox("Earnings (Annual)", "9332", width = 3, icon = "fas fa-dollar-sign", style = "success"),
      summaryBox("Tasks", "346", width = 3, icon = "fas fa-clipboard-list", style = "danger"),
      summaryBox("Pending Requests", "346", width = 3, icon = "fas fa-comments", style = "primary")
    )

  })

}

# Run App
shinyApp(ui = ui, server = server)
How to add value and info box in Rmarkdown
As stated before it works with Bootstrap 4 only so you need to specify it in Rmarkdown. This option is available only in version 2.7 or higher.
---
title: "Summary Box"
output:
  html_document:
    theme:
      version: 4
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(summaryBox)
```

```{r box}
summaryBox("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info")
```
Spread the Word!
Share
Related Posts
About Author:

Deepanshu founded ListenData with a simple objective - Make analytics easy to understand and follow. He has over 10 years of experience in data science. During his tenure, he has worked with global clients in various domains like Banking, Insurance, Private Equity, Telecom and Human Resource.

0 Response to "Add Value and Info Box in Shiny and Rmarkdown"

Post a Comment

Next → ← Prev
Love this post? Support Us!
Buy Me A Coffee