From e76a129702e4ceeb51e0f4e89951a5269a43cc39 Mon Sep 17 00:00:00 2001 From: pvictor Date: Fri, 8 Jan 2021 14:17:17 +0100 Subject: [PATCH] facets: x & y axis title --- R/facets.R | 78 ++++++++++++++++++++++++++++++-- R/utils.R | 4 +- inst/htmlwidgets/apexcharter.css | 34 ++++++++++++++ vignettes/facets.Rmd | 18 +++++++- 4 files changed, 126 insertions(+), 8 deletions(-) diff --git a/R/facets.R b/R/facets.R index a86f9cf..c1a8465 100644 --- a/R/facets.R +++ b/R/facets.R @@ -119,6 +119,10 @@ build_facets <- function(chart) { chart <- remove_option(chart, "title") subtitle <- get_option(chart, "subtitle") chart <- remove_option(chart, "subtitle") + xaxis_title <- get_option(chart, "xaxis", "title") + chart <- remove_option(chart, "xaxis", "title") + yaxis_title <- get_option(chart, "yaxis", "title") + chart <- remove_option(chart, "yaxis", "title") facets_list <- get_facets( data = data, rows = chart$x$facet$facets_row, @@ -186,7 +190,9 @@ build_facets <- function(chart) { label_row = facets_list$label_row, label_col = facets_list$label_col, title = title, - subtitle = subtitle + subtitle = subtitle, + xaxis_title = xaxis_title, + yaxis_title = yaxis_title ) } @@ -285,10 +291,72 @@ ax_facet_grid <- function(ax, build_facet_tag <- function(x) { facets <- build_facets(x) + content <- facets$facets + d <- get_grid_dims(content, x$x$facet$nrow, x$x$facet$ncol) + row_after <- col_before <- NULL + if (!is.null(facets$xaxis_title)) { + if (identical(facets$type, "wrap")) { + area <- paste( + d$nrow + 1, + 1, + d$nrow + 1, + d$ncol + 2, + sep = " / " + ) + } else { + area <- paste( + (facets$nrow %||% 1) + 1 + !is.null(facets$ncol), + 1, + (facets$nrow %||% 1) + 1 + !is.null(facets$ncol), + (facets$ncol %||% 1) + 2, + sep = " / " + ) + } + TAGX <- tags$div( + class = "apexcharter-facet-xaxis-title", + facets$xaxis_title$text, + style = make_styles(facets$xaxis_title$style), + style = paste("grid-area:", area, ";") + ) + content <- c(content, list(TAGX)) + row_after <- "30px" + } + if (!is.null(facets$yaxis_title)) { + if (identical(facets$type, "wrap")) { + area <- paste( + 1, + 1, + d$nrow + 1, + 2, + sep = " / " + ) + } else { + area <- paste( + 1, + 1, + (facets$nrow %||% 1) + 1 + !is.null(facets$ncol), + 2, + sep = " / " + ) + } + TAGY <- tags$div( + class = "apexcharter-facet-yaxis-title apexcharter-facet-rotate180", + facets$yaxis_title$text, + style = make_styles(facets$yaxis_title$style), + style = paste("grid-area:", area, ";") + ) + content <- c(content, list(TAGY)) + col_before <- "30px" + } if (identical(facets$type, "wrap")) { - TAG <- build_grid(facets$facets, nrow = x$x$facet$nrow, ncol = x$x$facet$ncol) + TAG <- build_grid( + content = content, + nrow = d$nrow, + ncol = d$ncol, + row_after = row_after, + col_before = col_before + ) } else if (identical(facets$type, "grid")) { - content <- facets$facets if (!is.null(facets$nrow)) { for (i in seq_along(facets$label_row)) { content <- append( @@ -320,7 +388,9 @@ build_facet_tag <- function(x) { row_before = if (!is.null(facets$ncol)) "30px", col_after = if (!is.null(facets$nrow)) "30px", row_gap = "3px", - col_gap = "3px" + col_gap = "3px", + row_after = row_after, + col_before = col_before ) } else { stop("Facetting must be wrap or grid", call. = FALSE) diff --git a/R/utils.R b/R/utils.R index 56c2465..0dcb143 100644 --- a/R/utils.R +++ b/R/utils.R @@ -50,8 +50,8 @@ make_styles <- function(styles) { styles <- dropNulls(styles) if (length(styles) < 1) return(NULL) - styles <- sprintf("%s:%s", to_hyphen(names(styles)), unlist(styles, use.names = FALSE)) - paste(styles, collapse = ";") + styles <- sprintf("%s: %s;", to_hyphen(names(styles)), unlist(styles, use.names = FALSE)) + paste(styles, collapse = " ") } diff --git a/inst/htmlwidgets/apexcharter.css b/inst/htmlwidgets/apexcharter.css index d236a2e..814316a 100644 --- a/inst/htmlwidgets/apexcharter.css +++ b/inst/htmlwidgets/apexcharter.css @@ -37,3 +37,37 @@ margin-bottom: 5px; } +.apexcharter-facet-yaxis-title { + font-family: Helvetica, Arial, sans-serif; + text-align: center; + writing-mode: vertical-rl; + text-orientation: mixed; + line-height: 30px; + height: 100%; +} + +.apexcharter-facet-xaxis-title { + font-family: Helvetica, Arial, sans-serif; + text-align: center; + line-height: 30px; + width: 100%; +} + +.apexcharter-facet-rotate180 { + transform: rotate(180deg); + /* Legacy vendor prefixes that you probably don't need... */ + /* Safari */ + -webkit-transform: rotate(180deg); + /* Firefox */ + -moz-transform: rotate(180deg); + /* IE */ + -ms-transform: rotate(180deg); + /* Opera */ + -o-transform: rotate(180deg); + /* Internet Explorer */ + /*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/ +} + + + + diff --git a/vignettes/facets.Rmd b/vignettes/facets.Rmd index f8a175b..f0aaa49 100644 --- a/vignettes/facets.Rmd +++ b/vignettes/facets.Rmd @@ -43,12 +43,16 @@ Current limitations are : Create a grid of charts according to a variable of the data with `ax_facet_wrap()` : ```{r facet-wrap} +library(apexcharter) data("mpg", package = "ggplot2") apex(mpg, aes(displ, cty), type = "scatter") %>% + ax_xaxis(labels = list(formatter = format_num(".0f"))) %>% ax_labs( title = "Facet wrap example", - subtitle = "mpg data from ggplot2" + subtitle = "mpg data from ggplot2", + x = "engine displacement, in litres", + y = "city miles per gallon" ) %>% ax_facet_wrap(vars(drv), ncol = 2) ``` @@ -57,6 +61,7 @@ apex(mpg, aes(displ, cty), type = "scatter") %>% Synchronized line charts with free y-axis : ```{r facet-wrap-sync} +library(apexcharter) data("economics_long", package = "ggplot2") apex(economics_long, aes(date, value), type = "line", synchronize = "sync-it") %>% @@ -80,12 +85,16 @@ Don't forget to set a `minWidth` for y axis labels when synchronizing charts, ot Create a matrix of charts defined by row and column faceting variables with `ax_facet_grid()` : ```{r facet-grid} +library(apexcharter) data("mpg", package = "ggplot2") apex(mpg, aes(displ, cty), type = "scatter") %>% + ax_xaxis(labels = list(formatter = format_num(".0f"))) %>% ax_labs( title = "Facet grid example", - subtitle = "mpg data from ggplot2" + subtitle = "mpg data from ggplot2", + x = "engine displacement, in litres", + y = "city miles per gallon" ) %>% ax_facet_grid(rows = vars(drv), cols = vars(year)) ``` @@ -98,10 +107,15 @@ apex(mpg, aes(displ, cty), type = "scatter") %>% You can construct a grid of (unrelated) charts with `apex_grid()`, construct your charts independently then assemble them in the grid: ```{r apex-grid} +library(apexcharter) +data("mpg", package = "ggplot2") + +# Construct 3 charts a1 <- apex(mpg, aes(manufacturer), type = "bar") a2 <- apex(mpg, aes(trans), type = "column") a3 <- apex(mpg, aes(drv), type = "pie") +# Assemble them in a grid apex_grid( a1, a2, a3, grid_area = c("1 / 1 / 3 / 2", "1 / 2 / 2 / 4", "2 / 2 / 3 / 4"),