https://github.com/JohnCoene/countup

⏱️ countup.js R htmlwidget
https://github.com/JohnCoene/countup

countup htlmwidgets r rmarkdown rstats

Last synced: 27 days ago
JSON representation

⏱️ countup.js R htmlwidget

• Host: GitHub
• URL: https://github.com/JohnCoene/countup
• Owner: JohnCoene
• License: other
• Created: 2017-02-12T08:49:55.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2020-08-16T09:01:25.000Z (over 4 years ago)
• Last Synced: 2024-05-01T15:29:22.749Z (7 months ago)
• Topics: countup, htlmwidgets, r, rmarkdown, rstats
• Language: R
• Homepage:
• Size: 973 KB
• Stars: 37
• Watchers: 4
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.Rmd
  • License: LICENSE

Awesome Lists containing this project

• awesome-shiny-extensions - countup - R htmlwidget that animates a numerical value by counting to it with CountUp.js. (UI Components / Animation Effects)
• jimsghstars - JohnCoene/countup - ⏱️ countup.js R htmlwidget (R)

README

        
---

output: 

  github_document:

    html_preview: false

---

```{r, echo = FALSE}

knitr::opts_chunk$set(

  collapse = TRUE,

  comment = "#>",

  fig.path = "README-"

)

```

[![Travis build status](https://travis-ci.org/JohnCoene/countup.svg?branch=master)](https://travis-ci.org/JohnCoene/countup)

![](./man/figures/logo.png)

The underlying JavaScript libraries are [CountUp.js](https://github.com/inorganik/CountUp.js), and [Odometer](https://github.hubspot.com/odometer/docs/welcome/).

## Install

Install from Github with `remotes`:

```{r, eval=FALSE}

# install.packages("remotes")

remotes::install_github("JohnCoene/countup")

```

## News

Since version `0.1.1` the package also includes the [odometer](https://github.hubspot.com/odometer/docs/welcome/) widget.

## Examples

In the R console or R markdown.

```{r, eval=FALSE}

library(countup)

countup(25)

opts = list(

  useEasing = TRUE, 

  useGrouping = TRUE, 

  separator = ',', 

  decimal = '.', 

  prefix = 'US$', 

  suffix = ' bejillion' 

)

countup(count = 1729, start = 10, options = opts)

```

In Shiny (since version `0.1.0`), there are methods to programatically interact with the counter.

```r

library(shiny)

library(countup)

ui <- fluidPage(

  h1(countupOutput("cnt")),

  actionButton("start", "start"),

  actionButton("pause", "pause / resume"),

  numericInput("value", "update to:", min = 1, max = 1000, value = 24)

)

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

  output$cnt <- renderCountup({

    countup(1000, duration = 10, start = FALSE)

  })

  observeEvent(input$start, {

    countupProxy("cnt") %>% 

      countup_start()

  })

  observeEvent(input$value, {

    countupProxy("cnt") %>% 

      countup_update(input$value)

  })

  observeEvent(input$pause, {

    countupProxy("cnt") %>% 

      countup_pause_resume()

  })

}

shinyApp(ui, server)

```