facets: x & y axis title

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)

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 = " ")
 }
 
 

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);*/
+}
+
+
+
+

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"),