diff --git a/NAMESPACE b/NAMESPACE index eb9ca97..6ea5f48 100644 --- a/NAMESPACE +++ b/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) diff --git a/R/facets.R b/R/facets.R index 82513dc..1595419 100644 --- a/R/facets.R +++ b/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. diff --git a/R/grid.R b/R/grid.R index 08e69b9..1aa9eb7 100644 --- a/R/grid.R +++ b/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 ----------------------------------------------------------- diff --git a/R/onLoad.R b/R/onLoad.R index 0352089..a5bafda 100644 --- a/R/onLoad.R +++ b/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") } diff --git a/examples/apex_grid.R b/examples/apex_grid.R index 9a0647e..79ece32 100644 --- a/examples/apex_grid.R +++ b/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, diff --git a/examples/facet-shiny.R b/examples/facet-shiny.R index 04c4614..8c3f1a7 100644 --- a/examples/facet-shiny.R +++ b/examples/facet-shiny.R @@ -1,6 +1,5 @@ library(shiny) -library(htmltools) library(apexcharter) data("unhcr_ts") diff --git a/examples/grid-shiny.R b/examples/grid-shiny.R new file mode 100644 index 0000000..9540d17 --- /dev/null +++ b/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) diff --git a/man/apex_grid.Rd b/man/apex_grid.Rd index 821da01..01841f4 100644 --- a/man/apex_grid.Rd +++ b/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, diff --git a/man/apexcharter-shiny-facets.Rd b/man/apexcharter-shiny-facets.Rd index dddd3df..da03a46 100644 --- a/man/apexcharter-shiny-facets.Rd +++ b/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") diff --git a/man/apexcharter-shiny-grid.Rd b/man/apexcharter-shiny-grid.Rd new file mode 100644 index 0000000..aeaeea4 --- /dev/null +++ b/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) +} diff --git a/vignettes/facets.Rmd b/vignettes/facets.Rmd index 0072d70..d51af83 100644 --- a/vignettes/facets.Rmd +++ b/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/). + + +