added spark box

NAMESPACE

@@ -50,12 +50,16 @@ export(parse_df)
 export(pie_opts)
 export(radialBar_opts)
 export(renderApexchart)
+export(renderSparkBox)
 export(run_input_demo)
+export(run_sparkbox_demo)
 export(run_sync_demo)
 export(set_input_click)
 export(set_input_selection)
 export(set_input_zoom)
 export(set_tooltip_fixed)
+export(sparkBoxOutput)
+export(spark_box)
 importFrom(ggplot2,aes)
 importFrom(htmlwidgets,JS)
 importFrom(htmlwidgets,createWidget)
@@ -66,6 +70,7 @@ importFrom(jsonlite,fromJSON)
 importFrom(magrittr,"%>%")
 importFrom(rlang,as_label)
 importFrom(rlang,eval_tidy)
+importFrom(rlang,sym)
 importFrom(shiny,getDefaultReactiveDomain)
 importFrom(shiny,registerInputHandler)
 importFrom(shiny,shinyAppFile)

NEWS.md

@@ -13,7 +13,7 @@ apexcharter 0.1.5
 
 ## Bugfixes
 
-* Dark ond yaxis examplemode wasn't activated properly in `ax_theme()`.
+* Dark mode wasn't activated properly in `ax_theme()`.
 
 
 

R/apex.R

@@ -35,7 +35,9 @@ apex <- function(data, mapping, type = "column", ...,
                  auto_update = TRUE,
                  synchronize = NULL,
                  serie_name = NULL,
-                 width = NULL, height = NULL, elementId = NULL) {
+                 width = NULL,
+                 height = NULL, 
+                 elementId = NULL) {
   type <- match.arg(
     arg = type, 
     choices = c(

R/apexcharter.R

@@ -23,7 +23,8 @@ apexchart <- function(ax_opts = list(), auto_update = TRUE, width = NULL, height
 
   x <- list(
     ax_opts = ax_opts,
-    auto_update = auto_update
+    auto_update = auto_update,
+    sparkbox = FALSE
   )
 
   # create widget

R/shiny-input.R

@@ -216,3 +216,22 @@ run_sync_demo <- function() {
 }
 
 
+#' Run Shiny spark boxes example
+#'
+#' @export
+#' 
+#' @importFrom shiny shinyAppFile
+#'
+#' @examples
+#' if (interactive()) {
+#' 
+#'   run_sparkbox_demo()
+#' 
+#' }
+run_sparkbox_demo <- function() {
+  shiny::shinyAppFile(
+    appFile = system.file("example-spark", "app.R", package = "apexcharter"),
+    options = list("display.mode" = "showcase")
+  )
+}
+

R/spark-box.R

@@ -0,0 +1,112 @@
+
+#' Create a box with a sparkline
+#'
+#' @param data A \code{data.frame}-like object with at least two columns,
+#'  first is mapped to x-axis, second to y-axis.
+#' @param title Title to display in the box.
+#' @param subtitle Subtitle to display in the box.
+#' @param color Color of the chart.
+#' @param background Background color of the box.
+#' @param type Type of chart, currently type supported are :
+#'  \code{"area"} (default), \code{"line"}, \code{"spline"}.
+#' @param synchronize Give a common id to charts to synchronize them (tooltip and zoom).
+#' @param title_style,subtitle_style A \code{list} of named attributes to style
+#'  the title / subtitle, possible values are \code{fontSize}, 
+#'  \code{fontWeight}, \code{fontFamily}, \code{color}.
+#' @param width,height A numeric input in pixels.
+#' @param elementId Use an explicit element ID for the widget.
+#'
+#' @return An \code{apexcharts} \code{htmlwidget} object. 
+#' @export
+#' 
+#' @note In Shiny use \code{sparkBoxOutput} / \code{renderSparkBox} to render boxes, see example.
+#'  Boxes have CSS class \code{"apexcharter-spark-box"} if you need more styling.
+#' 
+#' @importFrom htmlwidgets sizingPolicy
+#' @importFrom rlang sym
+#' @importFrom ggplot2 aes
+#'
+#' @example examples/spark_box.R
+spark_box <- function(data, title = NULL, subtitle = NULL, 
+                      color = "#2E93fA", background = "#FFF",
+                      type = c("area", "line", "spline"),
+                      synchronize = NULL,
+                      title_style = NULL, 
+                      subtitle_style = NULL,
+                      width = NULL,
+                      height = NULL, 
+                      elementId = NULL) {
+  type <- match.arg(type)
+  data <- as.data.frame(data)
+  if (ncol(data) < 2)
+    stop("'data' must have at least two columns!", call. = FALSE)
+  x_var <- names(data)[1]
+  y_var <- names(data)[2]
+  spark <- apex(
+    data = data, 
+    aes(x = !!sym(x_var), y = !!sym(y_var)),
+    type = type, 
+    auto_update = config_update(update_options = TRUE)
+  )
+  spark <- ax_chart(
+    ax = spark, 
+    sparkline = list(enabled = TRUE),
+    group = synchronize
+  )
+  spark <- ax_colors(spark, color)
+  if (!is.null(title)) {
+    if (is.null(title_style))
+      title_style <- list(fontSize = "24px")
+    if (is.null(title_style$fontSize))
+      title_style$fontSize <- "24px"
+    spark <- ax_title(
+      ax = spark,
+      text = title,
+      style = title_style
+    )
+  }
+  if (!is.null(subtitle)) {
+    if (is.null(subtitle_style))
+      subtitle_style <- list(fontSize = "14px")
+    if (is.null(subtitle_style$fontSize))
+      subtitle_style$fontSize <- "14px"
+    spark <- ax_subtitle(
+      ax = spark,
+      text = subtitle,
+      style = subtitle_style
+    )
+  }
+  spark$x$sparkbox <- list(
+    color = color, background = background
+  )
+  spark$sizingPolicy <- htmlwidgets::sizingPolicy(
+    defaultWidth = "100%",
+    defaultHeight = "160px",
+    viewer.defaultHeight = "160px",
+    viewer.defaultWidth = "100%",
+    viewer.fill = FALSE,
+    knitr.figure = FALSE,
+    knitr.defaultWidth = "100%",
+    knitr.defaultHeight = "160px",
+    browser.fill = FALSE,
+    viewer.suppress = FALSE,
+    browser.external = TRUE,
+    padding = 15
+  )
+  return(spark)
+}
+
+
+#' @rdname apexcharter-shiny
+#' @export
+sparkBoxOutput <- function(outputId, width = "100%", height = "160px"){
+  htmlwidgets::shinyWidgetOutput(outputId, "apexcharter", width, height, package = "apexcharter")
+}
+
+#' @rdname apexcharter-shiny
+#' @export
+renderSparkBox <- function(expr, env = parent.frame(), quoted = FALSE) {
+  if (!quoted) { expr <- substitute(expr) } # force quoted
+  htmlwidgets::shinyRenderWidget(expr, apexchartOutput, env, quoted = TRUE)
+}
+

examples/spark_box.R

@@ -0,0 +1,21 @@
+library(apexcharter)
+
+spark_data <- data.frame(
+  date = Sys.Date() + 1:20,
+  var1 = round(rnorm(20, 50, 10)),
+  var2 = round(rnorm(20, 50, 10)),
+  var3 = round(rnorm(20, 50, 10))
+)
+
+spark_box(
+  data = spark_data,
+  title = mean(spark_data$var1), 
+  subtitle = "Variable 1"
+)
+
+
+# In Shiny
+if (interactive()) {
+  run_sparkbox_demo()
+}
+

inst/example-spark/app.R

@@ -0,0 +1,65 @@
+library(apexcharter)
+library(shiny)
+
+ui <- fluidPage(
+  tags$h2("Spark box"),
+  actionButton("update", "Update"),
+  tags$br(), tags$br(),
+  fluidRow(
+    column(
+      width = 4,
+      sparkBoxOutput("spark1")
+    ),
+    column(
+      width = 4,
+      sparkBoxOutput("spark2")
+    ),
+    column(
+      width = 4,
+      sparkBoxOutput("spark3")
+    )
+  )
+)
+
+server <- function(input, output, session) {
+  
+  r <- reactive({
+    input$update
+    data.frame(
+      date = Sys.Date() + 1:20,
+      var1 = round(rnorm(20, 50, 10)),
+      var2 = round(rnorm(20, 50, 10)),
+      var3 = round(rnorm(20, 50, 10))
+    )
+  })
+  
+  output$spark1 <- renderSparkBox({
+    spark_box(
+      data = r()[, c("date", "var1")],
+      title = mean(r()$var1), 
+      subtitle = "Variable 1"
+    )
+  })
+  
+  output$spark2 <- renderSparkBox({
+    spark_box(
+      data = r()[, c("date", "var2")],
+      title = mean(r()$var2), 
+      subtitle = "Variable 2"
+    )
+  })
+  
+  output$spark3 <- renderSparkBox({
+    spark_box(
+      data = r()[, c("date", "var3")],
+      title = mean(r()$var3), 
+      subtitle = "Variable 3",
+      color = "#FFF", background = "#2E93fA",
+      title_style = list(color = "#FFF"),
+      subtitle_style = list(color = "#FFF")
+    )
+  })
+  
+}
+
+shinyApp(ui, server)

inst/htmlwidgets/apexcharter.js

@@ -125,6 +125,13 @@ HTMLWidgets.widget({
       renderValue: function(x) {
         // Global options
         axOpts = x.ax_opts;
+        
+        if (x.sparkbox) {
+          el.style.padding = "3px 0 0 0";
+          el.style.boxShadow = "0px 1px 22px -12px #607D8B";
+          el.style.background = x.sparkbox.background;
+          el.classList.add("apexcharter-spark-box");
+        }
 
         // Sizing
         if (typeof axOpts.chart === "undefined") {

man/apexcharter-shiny.Rd

@@ -1,14 +1,20 @@
 % Generated by roxygen2: do not edit by hand
-% Please edit documentation in R/apexcharter.R
+% Please edit documentation in R/apexcharter.R, R/spark-box.R
 \name{apexcharter-shiny}
 \alias{apexcharter-shiny}
 \alias{apexchartOutput}
 \alias{renderApexchart}
+\alias{sparkBoxOutput}
+\alias{renderSparkBox}
 \title{Shiny bindings for apexcharter}
 \usage{
 apexchartOutput(outputId, width = "100\%", height = "400px")
 
 renderApexchart(expr, env = parent.frame(), quoted = FALSE)
+
+sparkBoxOutput(outputId, width = "100\%", height = "160px")
+
+renderSparkBox(expr, env = parent.frame(), quoted = FALSE)
 }
 \arguments{
 \item{outputId}{output variable to read from}

man/run_sparkbox_demo.Rd

@@ -0,0 +1,18 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/shiny-input.R
+\name{run_sparkbox_demo}
+\alias{run_sparkbox_demo}
+\title{Run Shiny spark boxes example}
+\usage{
+run_sparkbox_demo()
+}
+\description{
+Run Shiny spark boxes example
+}
+\examples{
+if (interactive()) {
+
+  run_sparkbox_demo()
+
+}
+}

man/spark_box.Rd

@@ -0,0 +1,79 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/spark-box.R
+\name{spark_box}
+\alias{spark_box}
+\title{Create a box with a sparkline}
+\usage{
+spark_box(
+  data,
+  title = NULL,
+  subtitle = NULL,
+  color = "#2E93fA",
+  background = "#FFF",
+  type = c("area", "line", "spline"),
+  synchronize = NULL,
+  title_style = NULL,
+  subtitle_style = NULL,
+  width = NULL,
+  height = NULL,
+  elementId = NULL
+)
+}
+\arguments{
+\item{data}{A \code{data.frame}-like object with at least two columns,
+first is mapped to x-axis, second to y-axis.}
+
+\item{title}{Title to display in the box.}
+
+\item{subtitle}{Subtitle to display in the box.}
+
+\item{color}{Color of the chart.}
+
+\item{background}{Background color of the box.}
+
+\item{type}{Type of chart, currently type supported are :
+\code{"area"} (default), \code{"line"}, \code{"spline"}.}
+
+\item{synchronize}{Give a common id to charts to synchronize them (tooltip and zoom).}
+
+\item{title_style, subtitle_style}{A \code{list} of named attributes to style
+the title / subtitle, possible values are \code{fontSize},
+\code{fontWeight}, \code{fontFamily}, \code{color}.}
+
+\item{width, height}{A numeric input in pixels.}
+
+\item{elementId}{Use an explicit element ID for the widget.}
+}
+\value{
+An \code{apexcharts} \code{htmlwidget} object.
+}
+\description{
+Create a box with a sparkline
+}
+\note{
+In Shiny use \code{sparkBoxOutput} / \code{renderSparkBox} to render boxes, see example.
+Boxes have CSS class \code{"apexcharter-spark-box"} if you need more styling.
+}
+\examples{
+library(apexcharter)
+
+spark_data <- data.frame(
+  date = Sys.Date() + 1:20,
+  var1 = round(rnorm(20, 50, 10)),
+  var2 = round(rnorm(20, 50, 10)),
+  var3 = round(rnorm(20, 50, 10))
+)
+
+spark_box(
+  data = spark_data,
+  title = mean(spark_data$var1), 
+  subtitle = "Variable 1"
+)
+
+
+# In Shiny
+if (interactive()) {
+  run_sparkbox_demo()
+}
+
+}

vignettes/spark-box.Rmd

@@ -0,0 +1,70 @@
+---
+title: "Spark boxes"
+output: rmarkdown::html_vignette
+vignette: >
+  %\VignetteIndexEntry{spark-box}
+  %\VignetteEngine{knitr::rmarkdown}
+  %\VignetteEncoding{UTF-8}
+---
+
+```{r, include = FALSE}
+knitr::opts_chunk$set(
+  collapse = TRUE,
+  comment = "#>"
+)
+```
+
+```{r setup}
+library(apexcharter)
+
+spark_data <- data.frame(
+  date = Sys.Date() + 1:20,
+  var1 = round(rnorm(20, 50, 10)),
+  var2 = round(rnorm(20, 50, 10)),
+  var3 = round(rnorm(20, 50, 10))
+)
+```
+
+Create boxes with a sparkline to display a specific value:
+
+```{r}
+spark_box(
+  data = spark_data,
+  title = mean(spark_data$var1), 
+  subtitle = "Variable 1"
+)
+```
+
+
+With more styles :
+
+```{r}
+spark_box(
+  data = spark_data,
+  title = mean(spark_data$var1), 
+  subtitle = "Variable 1",
+  color = "#FFF", background = "#2E93fA",
+  title_style = list(color = "#FFF"),
+  subtitle_style = list(color = "#FFF")
+)
+```
+
+
+You can also use spark boxes in Shiny application, use code to launch an example :
+
+```{r, eval=FALSE}
+run_sparkbox_demo()
+```
+
+<img src="figures/spark-box.png" alt="spark-box" style="width:100%;"/>
+
+
+
+
+
+
+
+
+
+
+