grid: shiny & markdown method

NAMESPACE

@@ -20,6 +20,7 @@ export(apexchart)
 export(apexchartOutput)
 export(apexchartProxy)
 export(apexfacetOutput)
+export(apexgridOutput)
 export(ax_annotations)
 export(ax_chart)
 export(ax_colors)
@@ -63,6 +64,7 @@ export(pie_opts)
 export(radialBar_opts)
 export(renderApexchart)
 export(renderApexfacet)
+export(renderApexgrid)
 export(renderSparkBox)
 export(run_demo_input)
 export(run_demo_sparkbox)

R/facets.R

@@ -219,7 +219,7 @@ apexfacetOutput <- function(outputId) {
   )
 }
 
-#' @param expr An expression that generates a apexcharter
+#' @param expr An expression that generates a apexcharter facet.
 #' @param env The environment in which to evaluate \code{expr}.
 #' @param quoted Is \code{expr} a quoted expression (with \code{quote()})? This
 #'   is useful if you want to save an expression in a variable.

R/grid.R

@@ -98,6 +98,82 @@ apex_grid <- function(...,
 
 
 
+# Shiny -------------------------------------------------------------------
+
+
+#' @title Shiny bindings for grid with apexcharter
+#'
+#' @description Output and render functions for using apexcharter grid within Shiny
+#' applications and interactive Rmd documents.
+#'
+#' @param outputId output variable to read from
+#'
+#' @return An Apexcharts output that can be included in the application UI.
+#' @export
+#' 
+#' @name apexcharter-shiny-grid
+#' 
+#' @importFrom htmltools tagList
+#' @importFrom shiny uiOutput
+#' @importFrom htmlwidgets getDependency
+#'
+#' @example examples/grid-shiny.R
+apexgridOutput <- function(outputId) {
+  tagList(
+    uiOutput(outputId = outputId),
+    getDependency(name = "apexcharter", package = "apexcharter")
+  )
+}
+
+#' @param expr An expression that generates a apexcharter grid.
+#' @param env The environment in which to evaluate \code{expr}.
+#' @param quoted Is \code{expr} a quoted expression (with \code{quote()})? This
+#'   is useful if you want to save an expression in a variable.
+#' 
+#' @export
+#' 
+#' @rdname apexcharter-shiny-grid
+#' 
+#' @importFrom shiny exprToFunction createRenderFunction createWebDependency
+#' @importFrom htmltools renderTags resolveDependencies
+renderApexgrid <- function(expr, env = parent.frame(), quoted = FALSE) {
+  func <- exprToFunction(expr, env, quoted)
+  createRenderFunction(
+    func = func,
+    transform = function(result, shinysession, name, ...) {
+      if (is.null(result) || length(result) == 0)
+        return(NULL)
+      if (!inherits(result, "apex_grid")) {
+        stop(
+          "renderApexgrid: 'expr' must return an apexcharter grid object.",
+          call. = FALSE
+        )
+      }
+      TAG <- build_grid(
+        result$content,
+        nrow = result$nrow,
+        ncol = result$ncol, 
+        col_gap = result$col_gap,
+        row_gap = result$row_gap,
+        height = result$height,
+        width = result$width
+      )
+      rendered <- renderTags(TAG)
+      deps <- lapply(
+        X = resolveDependencies(rendered$dependencies),
+        FUN = createWebDependency
+      )
+      list(
+        html = rendered$html,
+        deps = deps
+      )
+    }, apexgridOutput, list()
+  )
+}
+
+
+
+
 
 # Print methods -----------------------------------------------------------
 

R/onLoad.R

@@ -36,4 +36,5 @@
     }
   }, force = TRUE)
   register_s3_method("knitr", "knit_print", "apex_facet")
+  register_s3_method("knitr", "knit_print", "apex_grid")
 }

examples/apex_grid.R

@@ -2,21 +2,15 @@ library(apexcharter)
 data("mpg", package = "ggplot2")
 
 # Two chart side-by-side 
-a1 <- mpg %>% 
-  dplyr::count(manufacturer) %>%
-  apex(aes(manufacturer, n), type = "bar")
+a1 <- apex(mpg, aes(manufacturer), type = "bar")
 
-a2 <- mpg %>% 
-  dplyr::count(trans) %>%
-  apex(aes(trans, n), type = "column")
+a2 <- apex(mpg, aes(trans), type = "column")
 
 apex_grid(a1, a2, height = "400px")
 
 
 # More complex layout:
-a3 <- mpg %>% 
-  dplyr::count(drv) %>%
-  apex(aes(drv, n), type = "pie")
+a3 <- apex(mpg, aes(drv), type = "pie")
 
 apex_grid(
   a1, a2, a3, 

examples/facet-shiny.R

@@ -1,6 +1,5 @@
 
 library(shiny)
-library(htmltools)
 library(apexcharter)
 
 data("unhcr_ts")

examples/grid-shiny.R

@@ -0,0 +1,32 @@
+
+library(shiny)
+library(apexcharter)
+
+ui <- fluidPage(
+  
+  tags$h2("Apexcharts Grid Example"),
+  
+  apexgridOutput("myfacet")
+  
+)
+
+server <- function(input, output, session) {
+  
+  output$myfacet <- renderApexgrid({
+    a1 <- apex(mpg, aes(manufacturer), type = "bar")
+    a2 <- apex(mpg, aes(trans), type = "column")
+    a3 <- apex(mpg, aes(drv), type = "pie")
+    
+    apex_grid(
+      a1, a2, a3, 
+      grid_area = c("1 / 1 / 3 / 2", "1 / 2 / 2 / 4", "2 / 2 / 3 / 4"),
+      ncol = 3, 
+      nrow = 2,
+      height = "600px"
+    )
+  })
+  
+}
+
+if (interactive())
+  shinyApp(ui, server)

man/apex_grid.Rd

@@ -44,21 +44,15 @@ library(apexcharter)
 data("mpg", package = "ggplot2")
 
 # Two chart side-by-side 
-a1 <- mpg \%>\% 
-  dplyr::count(manufacturer) \%>\%
-  apex(aes(manufacturer, n), type = "bar")
+a1 <- apex(mpg, aes(manufacturer), type = "bar")
 
-a2 <- mpg \%>\% 
-  dplyr::count(trans) \%>\%
-  apex(aes(trans, n), type = "column")
+a2 <- apex(mpg, aes(trans), type = "column")
 
 apex_grid(a1, a2, height = "400px")
 
 
 # More complex layout:
-a3 <- mpg \%>\% 
-  dplyr::count(drv) \%>\%
-  apex(aes(drv, n), type = "pie")
+a3 <- apex(mpg, aes(drv), type = "pie")
 
 apex_grid(
   a1, a2, a3, 

man/apexcharter-shiny-facets.Rd

@@ -13,7 +13,7 @@ renderApexfacet(expr, env = parent.frame(), quoted = FALSE)
 \arguments{
 \item{outputId}{output variable to read from}
 
-\item{expr}{An expression that generates a apexcharter}
+\item{expr}{An expression that generates a apexcharter facet.}
 
 \item{env}{The environment in which to evaluate \code{expr}.}
 
@@ -30,7 +30,6 @@ applications and interactive Rmd documents.
 \examples{
 
 library(shiny)
-library(htmltools)
 library(apexcharter)
 
 data("unhcr_ts")

man/apexcharter-shiny-grid.Rd

@@ -0,0 +1,63 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/grid.R
+\name{apexcharter-shiny-grid}
+\alias{apexcharter-shiny-grid}
+\alias{apexgridOutput}
+\alias{renderApexgrid}
+\title{Shiny bindings for grid with apexcharter}
+\usage{
+apexgridOutput(outputId)
+
+renderApexgrid(expr, env = parent.frame(), quoted = FALSE)
+}
+\arguments{
+\item{outputId}{output variable to read from}
+
+\item{expr}{An expression that generates a apexcharter grid.}
+
+\item{env}{The environment in which to evaluate \code{expr}.}
+
+\item{quoted}{Is \code{expr} a quoted expression (with \code{quote()})? This
+is useful if you want to save an expression in a variable.}
+}
+\value{
+An Apexcharts output that can be included in the application UI.
+}
+\description{
+Output and render functions for using apexcharter grid within Shiny
+applications and interactive Rmd documents.
+}
+\examples{
+
+library(shiny)
+library(apexcharter)
+
+ui <- fluidPage(
+  
+  tags$h2("Apexcharts Grid Example"),
+  
+  apexgridOutput("myfacet")
+  
+)
+
+server <- function(input, output, session) {
+  
+  output$myfacet <- renderApexgrid({
+    a1 <- apex(mpg, aes(manufacturer), type = "bar")
+    a2 <- apex(mpg, aes(trans), type = "column")
+    a3 <- apex(mpg, aes(drv), type = "pie")
+    
+    apex_grid(
+      a1, a2, a3, 
+      grid_area = c("1 / 1 / 3 / 2", "1 / 2 / 2 / 4", "2 / 2 / 3 / 4"),
+      ncol = 3, 
+      nrow = 2,
+      height = "600px"
+    )
+  })
+  
+}
+
+if (interactive())
+  shinyApp(ui, server)
+}

vignettes/facets.Rmd

@@ -65,5 +65,28 @@ apex(refugees, aes(date, n), type = "line", synchronize = "sync-it") %>%
 
 
 
+## Grid
+
+You can construct a grid of (unrelated) charts with `apex_grid()`, construct your charts independently then assemble them in the grid:
+
+```{r}
+a1 <- apex(mpg, aes(manufacturer), type = "bar")
+a2 <- apex(mpg, aes(trans), type = "column")
+a3 <- apex(mpg, aes(drv), type = "pie")
+
+apex_grid(
+  a1, a2, a3, 
+  grid_area = c("1 / 1 / 3 / 2", "1 / 2 / 2 / 4", "2 / 2 / 3 / 4"),
+  ncol = 3, 
+  nrow = 2,
+  height = "600px"
+)
+```
+
+
+`grid_area` argument allow to specify space occupied by each chart, you can generate interactively your grid template [here](https://cssgrid-generator.netlify.app/).
+
+
+