Git Product home page Git Product logo

summarybox's Introduction

summaryBox

The objective of this package is to add value / info boxes in shiny and Rmarkdown (bootstrap 4). 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. See the complete documentation of summaryBox.

Installation

You can install the released version of summaryBox from Github with:

# install.packages("remotes")
remotes::install_github("deepanshu88/summaryBox")

Example

This is a basic example which shows you how to solve a common problem:

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)
#> 
#> Listening on http://127.0.0.1:3921

summarybox's People

Contributors

deepanshu88 avatar

Stargazers

Jimmy Briggs avatar AFRICANO BYAMUGISHA avatar Nevin Thomas avatar AW avatar  avatar  avatar Aaron Gorman avatar  avatar Victor Nugraha avatar Thiago Pires avatar

Watchers

 avatar Aaron Gorman avatar

summarybox's Issues

font-awesome-5.13.0

Thanks for the beautiful widget. would you help me with this error:

Couldn't normalize path in addResourcePath, with arguments: prefix = 'font-awesome-5.13.0'; directoryPath = ''

Please could we publish this package to CRAN

Hello Deepanshu,

This package is fantastic!!! It is exactly what I am looking for my project!!! Just wondering please could we publish it in CRAN. Therefore it will allow me to use this package in the organization instead of my personal PC.

Many thank and look forward to your reply!

openBinaryFile missing after updates

Thank you for this library, i like using it short rmd output.

Ive recently updated a lot of libraries and now im getting an error when i run the summaryBox() function:

pandoc: /home/jan/R/x86_64-pc-linux-gnu-library/4.1/fontawesome/fontawesome/css/../webfonts/fa-v4compatibility.woff2: openBinaryFile: does not exist (No such file or directory)
Error: pandoc document conversion failed with error 1

Please see system info below:

sessionInfo()
R version 4.1.0 (2021-05-18)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 18.04.5 LTS

Matrix products: default
BLAS: /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.7.1
LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.7.1

locale:
[1] LC_CTYPE=C.UTF-8 LC_NUMERIC=C LC_TIME=C.UTF-8 LC_COLLATE=C.UTF-8 LC_MONETARY=C.UTF-8 LC_MESSAGES=C.UTF-8 LC_PAPER=C.UTF-8
[8] LC_NAME=C LC_ADDRESS=C LC_TELEPHONE=C LC_MEASUREMENT=C.UTF-8 LC_IDENTIFICATION=C

attached base packages:
[1] stats graphics grDevices utils datasets methods base

other attached packages:
[1] summaryBox_0.1.0

loaded via a namespace (and not attached):
[1] compiler_4.1.0 fastmap_1.1.0 cli_3.4.1 htmltools_0.5.3 tools_4.1.0 rstudioapi_0.14 yaml_2.3.6 rmarkdown_2.18.1 knitr_1.41
[10] xfun_0.35 digest_0.6.30 rlang_1.0.6 evaluate_0.18

Can you please advise if there is something i need to install or download?

Regards
Jan

rmarkdown 3 summary boxes in a row

How can I arrange the summary boxes in a row in rmarkdown html file?

#| echo: false
#| label: "Summary boxes"
 
#Get values
totalTransaction <- all_monthly_plotData %>%
  filter(YearMonth == as.Date(format(Sys.Date() - months(1), "%Y-%m-01"))) %>%
  pull(Total_12M_rolling)

digitalTransaction <- all_monthly_plotData %>%
  filter(YearMonth == as.Date(format(Sys.Date() - months(1), "%Y-%m-01"))) %>%
  pull(Digital_12M_rolling)

digitalUptakePercent <- all_monthly_plotData %>%
  filter(YearMonth == as.Date(format(Sys.Date() - months(1), "%Y-%m-01"))) %>%
  pull(`Digital Uptake %`)

#Render summary box
grid.arrange(
   summaryBox("Total Transaction", totalTransaction, width = 3, icon = "fas fa-percent", style = "info"),
   summaryBox("Digital Transaction", digitalTransaction, width = 3, icon = "fas fa-percent", style = "info"),
   summaryBox("Digital Uptake %", digitalUptakePercent, width = 3, icon = "fas fa-percent", style = "info"),
   ncol=3
 )

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.