Robot
/
apexcharter
mirror of https://github.com/dreamRs/apexcharter.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added apex_grid()

This commit is contained in:
pvictor 2020-12-30 16:16:53 +01:00
parent b17ad7b046
commit 88f926b788
6 changed files with 237 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
NAMESPACE
View File

@ -1,6 +1,7 @@
# Generated by roxygen2: do not edit by hand
S3method(print,apex_facet)
S3method(print,apex_grid)
export("%>%")
export(JS)
export(add_event)
@ -14,6 +15,7 @@ export(add_smooth_line)
export(add_vline)
export(aes)
export(apex)
export(apex_grid)
export(apexchart)
export(apexchartOutput)
export(apexchartProxy)

37
R/facets.R
View File

@ -139,24 +139,6 @@ build_facets <- function(chart) {
}
get_grid_dims <- function(content, nrow, ncol) {
n <- length(content)
if (is.null(nrow) & !is.null(ncol))
nrow <- ceiling(n / ncol)
if (!is.null(nrow) & is.null(ncol))
ncol <- ceiling(n / nrow)
if (is.null(nrow) & is.null(ncol)) {
if (n %% 3 < 1) {
ncol <- 3
nrow <- ceiling(n / ncol)
} else {
ncol <- 2
nrow <- ceiling(n / ncol)
}
}
list(nrow = nrow, ncol = ncol)
}
get_last_row <- function(mat) {
apply(X = mat, MARGIN = 2, FUN = function(x) {
x <- x[!is.na(x)]
@ -164,25 +146,6 @@ get_last_row <- function(mat) {
})
}
#' @importFrom htmltools tags
build_grid <- function(content, nrow = NULL, ncol = NULL, col_gap = "0px", row_gap = "5px") {
d <- get_grid_dims(content, nrow, ncol)
tags$div(
class = "apexcharter-facet-container",
style = "display:-ms-grid; display: grid;",
style = sprintf("-ms-grid-columns: repeat(%1$s, 1fr); grid-template-columns: repeat(%1$s, 1fr);", d$ncol),
style = sprintf("-ms-grid-rows: repeat(%1$s, 1fr); grid-template-rows: repeat(%1$s, 1fr);", d$nrow),
style = sprintf("grid-column-gap: %s;", col_gap),
style = sprintf("grid-row-gap: %s;", row_gap),
content
)
}
apex_grid <- function(..., nrow = NULL, ncol = NULL, col_gap = "0px", row_gap = "10px") {
}
#' Facet wrap for ApexCharts

139
R/grid.R Normal file
View File

@ -0,0 +1,139 @@
get_grid_dims <- function(content, nrow, ncol) {
n <- length(content)
if (is.null(nrow) & !is.null(ncol))
nrow <- ceiling(n / ncol)
if (!is.null(nrow) & is.null(ncol))
ncol <- ceiling(n / nrow)
if (is.null(nrow) & is.null(ncol)) {
if (n %% 3 < 1) {
ncol <- 3
nrow <- ceiling(n / ncol)
} else {
ncol <- 2
nrow <- ceiling(n / ncol)
}
}
list(nrow = nrow, ncol = ncol)
}
#' @importFrom htmltools tags
build_grid <- function(content,
nrow = NULL,
ncol = NULL,
col_gap = "0px",
row_gap = "5px",
height = NULL,
width = NULL) {
d <- get_grid_dims(content, nrow, ncol)
tags$div(
class = "apexcharter-grid-container",
style = if (!is.null(height)) paste0("height:", height, ";"),
style = if (!is.null(width)) paste0("width:", width, ";"),
style = "display:-ms-grid; display: grid;",
style = sprintf("-ms-grid-columns: repeat(%1$s, 1fr); grid-template-columns: repeat(%1$s, 1fr);", d$ncol),
style = sprintf("-ms-grid-rows: repeat(%1$s, 1fr); grid-template-rows: repeat(%1$s, 1fr);", d$nrow),
style = sprintf("grid-column-gap: %s;", col_gap),
style = sprintf("grid-row-gap: %s;", row_gap),
content
)
}
#' Create a grid of ApexCharts
#'
#' @param ... Several \code{apexcharts} \code{htmlwidget} objects.
#' @param nrow,ncol Number of rows and columns.
#' @param row_gap,col_gap Gap between rows and columns.
#' @param grid_area Custom grid area to make elements take more than a single
#' cell in grid, see \url{https://cssgrid-generator.netlify.app/} for examples.
#' @param height,width Height and width of the main grid.
#' @param .list A list of \code{apexcharts} \code{htmlwidget} objects.
#'
#' @return Custom \code{apex_grid} object.
#'
#' @note You have to provide either height for the grid or individual chart height to make it work.
#'
#' @export
#'
#' @importFrom htmltools tags
#'
#' @example examples/apex_grid.R
apex_grid <- function(...,
nrow = NULL,
ncol = NULL,
row_gap = "10px",
col_gap = "0px",
grid_area = NULL,
height = NULL,
width = NULL,
.list = NULL) {
content <- c(list(...), .list)
if (!is.null(grid_area)) {
stopifnot(length(grid_area) == length(content))
content <- lapply(
X = seq_along(content),
FUN = function(i) {
tags$div(
style = paste0("grid-area:", grid_area[i]),
content[i]
)
}
)
}
grid <- list(
content = content,
nrow = nrow,
ncol = ncol,
col_gap = col_gap,
row_gap = row_gap,
height = height,
width = width
)
class(grid) <- c("apex_grid", class(grid))
return(grid)
}
# Print methods -----------------------------------------------------------
#' @export
print.apex_grid <- function(x, ...) {
TAG <- build_grid(
x$content,
nrow = x$nrow,
ncol = x$ncol,
col_gap = x$col_gap,
row_gap = x$row_gap,
height = x$height,
width = x$width
)
print(htmltools::browsable(TAG))
}
knit_print.apex_grid <- function(x, ..., options = NULL) {
TAG <- build_grid(
x$content,
nrow = x$nrow,
ncol = x$ncol,
col_gap = x$col_gap,
row_gap = x$row_gap,
height = x$height,
width = x$width
)
knitr::knit_print(htmltools::browsable(TAG), options = options, ...)
}

26
examples/apex_grid.R Normal file
View File

@ -0,0 +1,26 @@
library(apexcharter)
data("mpg", package = "ggplot2")
# Two chart side-by-side
a1 <- mpg %>%
dplyr::count(manufacturer) %>%
apex(aes(manufacturer, n), type = "bar")
a2 <- mpg %>%
dplyr::count(trans) %>%
apex(aes(trans, n), type = "column")
apex_grid(a1, a2, height = "400px")
# More complex layout:
a3 <- mpg %>%
dplyr::count(drv) %>%
apex(aes(drv, n), 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"
)

2
inst/htmlwidgets/apexcharter.css
View File

@ -6,6 +6,6 @@
box-shadow: 0 1px 28px -12px #3B4252;
}
.apexcharter-facet-container > div {
.apexcharter-grid-container > div {
min-width: 0;
}

69
man/apex_grid.Rd Normal file
View File

@ -0,0 +1,69 @@
% Generated by roxygen2: do not edit by hand
% Please edit documentation in R/grid.R
\name{apex_grid}
\alias{apex_grid}
\title{Create a grid of ApexCharts}
\usage{
apex_grid(
...,
nrow = NULL,
ncol = NULL,
row_gap = "10px",
col_gap = "0px",
grid_area = NULL,
height = NULL,
width = NULL,
.list = NULL
)
}
\arguments{
\item{...}{Several \code{apexcharts} \code{htmlwidget} objects.}
\item{nrow, ncol}{Number of rows and columns.}
\item{row_gap, col_gap}{Gap between rows and columns.}
\item{grid_area}{Custom grid area to make elements take more than a single
cell in grid, see \url{https://cssgrid-generator.netlify.app/} for examples.}
\item{height, width}{Height and width of the main grid.}
\item{.list}{A list of \code{apexcharts} \code{htmlwidget} objects.}
}
\value{
Custom \code{apex_grid} object.
}
\description{
Create a grid of ApexCharts
}
\note{
You have to provide either height for the grid or individual chart height to make it work.
}
\examples{
library(apexcharter)
data("mpg", package = "ggplot2")
# Two chart side-by-side
a1 <- mpg \%>\%
dplyr::count(manufacturer) \%>\%
apex(aes(manufacturer, n), type = "bar")
a2 <- mpg \%>\%
dplyr::count(trans) \%>\%
apex(aes(trans, n), type = "column")
apex_grid(a1, a2, height = "400px")
# More complex layout:
a3 <- mpg \%>\%
dplyr::count(drv) \%>\%
apex(aes(drv, n), 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"
)
}