From 552675f0a2e08d191fde733c38185d94f478eef8 Mon Sep 17 00:00:00 2001 From: pvictor Date: Fri, 8 Jan 2021 15:51:12 +0100 Subject: [PATCH] rebuild pkgdown --- docs/articles/apexcharter.html | 78 +++++++-------- .../apexcharter-css-0.1.0/apexcharter.css | 57 +++++++++-- .../articles/advanced-configuration.html | 16 ++-- .../apexcharter-css-0.1.0/apexcharter.css | 57 +++++++++-- docs/articles/chart-options.html | 72 +++++++------- .../apexcharter-css-0.1.0/apexcharter.css | 57 +++++++++-- docs/articles/facets.html | 96 ++++++++++++------- .../apexcharter-css-0.1.0/apexcharter.css | 57 +++++++++-- docs/articles/shiny-integration.html | 24 ++--- .../apexcharter-css-0.1.0/apexcharter.css | 57 +++++++++-- docs/articles/spark-box.html | 8 +- .../apexcharter-css-0.1.0/apexcharter.css | 57 +++++++++-- docs/articles/sync-charts.html | 12 +-- .../apexcharter-css-0.1.0/apexcharter.css | 57 +++++++++-- docs/index.html | 2 +- docs/news/index.html | 11 +++ docs/pkgdown.yml | 2 +- docs/reference/apex-facets.html | 19 +++- 18 files changed, 556 insertions(+), 183 deletions(-) diff --git a/docs/articles/apexcharter.html b/docs/articles/apexcharter.html index f87a192..e743288 100644 --- a/docs/articles/apexcharter.html +++ b/docs/articles/apexcharter.html @@ -162,7 +162,7 @@

Starting with ApexCharts

Victor Perrier

-

2021-01-06

+

2021-01-08

Source: vignettes/apexcharter.Rmd @@ -187,23 +187,23 @@ n_manufac <- count(mpg, manufacturer) apex(data = n_manufac, type = "column", mapping = aes(x = manufacturer, y = n)) -
-

Flipping coordinates can be done by using type = "bar":

+
+

Flipping coordinates can be done by using type = "bar":

 apex(data = n_manufac, type = "bar", mapping = aes(x = manufacturer, y = n))
-
-

To create a dodge bar charts, use aesthetic fill :

+
+

To create a dodge bar charts, use aesthetic fill :

 n_manufac_year <- count(mpg, manufacturer, year)
 
 apex(data = n_manufac_year, type = "column", mapping = aes(x = manufacturer, y = n, fill = year))
-
-

For stacked bar charts, specify option stacked in ax_chart :

+
+

For stacked bar charts, specify option stacked in ax_chart :

 apex(data = n_manufac_year, type = "column", mapping = aes(x = manufacturer, y = n, fill = year)) %>% 
   ax_chart(stacked = TRUE)
-
- +
+

@@ -214,8 +214,8 @@ economics <- tail(economics, 100) apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed))

-
-

To represent several lines, use a data.frame in long format and the group aesthetic:

+
+

To represent several lines, use a data.frame in long format and the group aesthetic:

 data("economics_long")
 economics_long <- economics_long %>% 
@@ -224,15 +224,15 @@
 
 apex(data = economics_long, type = "line", mapping = aes(x = date, y = value01, group = variable)) %>% 
   ax_yaxis(decimalsInFloat = 2) # number of decimals to keep
-
-

Create area charts with type = "area":

+
+

Create area charts with type = "area":

 apex(data = economics_long, type = "area", mapping = aes(x = date, y = value01, fill = variable)) %>% 
   ax_yaxis(decimalsInFloat = 2) %>% # number of decimals to keep
   ax_chart(stacked = TRUE) %>%
   ax_yaxis(max = 4, tickAmount = 4)
-
- +
+

@@ -240,16 +240,16 @@

Simple bar charts can be created with:

 apex(data = mtcars, type = "scatter", mapping = aes(x = wt, y = mpg))
-
-

Color points according to a third variable:

+
+

Color points according to a third variable:

 apex(data = mtcars, type = "scatter", mapping = aes(x = wt, y = mpg, fill = cyl))
-
-

And change point size using z aesthetics:

+
+

And change point size using z aesthetics:

 apex(data = mtcars, type = "scatter", mapping = aes(x = wt, y = mpg, z = scales::rescale(qsec)))
-
- +
+

@@ -262,8 +262,8 @@ ) apex(data = poll, type = "pie", mapping = aes(x = answer, y = n))

-
- +
+

@@ -271,8 +271,8 @@

Simple radial charts can be created with (here we pass values directly in aes, but you can use a data.frame) :

 apex(data = NULL, type = "radialBar", mapping = aes(x = "My value", y = 65))
-
-

Multi radial chart (more than one value):

+
+

Multi radial chart (more than one value):

 fruits <- data.frame(
   name = c('Apples', 'Oranges', 'Bananas', 'Berries'),
@@ -280,8 +280,8 @@
 )
 
 apex(data = fruits, type = "radialBar", mapping = aes(x = name, y = value))
-
- +
+

@@ -291,8 +291,8 @@ mtcars$model <- rownames(mtcars) apex(data = head(mtcars), type = "radar", mapping = aes(x = model, y = qsec))

-
-

With a grouping variable:

+
+

With a grouping variable:

 # extremely complicated reshaping
 new_mtcars <- reshape(
@@ -306,8 +306,8 @@
 )
 
 apex(data = new_mtcars, type = "radar", mapping = aes(x = model, y = value, group = time))
-
- +
+

@@ -320,8 +320,8 @@ ax_fill(opacity = 1) %>% ax_stroke(width = 0) %>% ax_tooltip(fillSeriesColor = FALSE)

-
- +
+

@@ -339,8 +339,8 @@ ) %>% ax_dataLabels(enabled = FALSE) %>% ax_colors("#008FFB")

-
- +
+

@@ -351,8 +351,8 @@ n_manufac <- dplyr::count(mpg, manufacturer) apex(n_manufac, aes(x = manufacturer, y = n), "treemap")

-
- +
+

@@ -365,8 +365,8 @@ aes(x = datetime, open = open, close = close, low = low, high = high), type = "candlestick" )

-
- +
+ diff --git a/docs/articles/apexcharter_files/apexcharter-css-0.1.0/apexcharter.css b/docs/articles/apexcharter_files/apexcharter-css-0.1.0/apexcharter.css index a9ba20b..814316a 100644 --- a/docs/articles/apexcharter_files/apexcharter-css-0.1.0/apexcharter.css +++ b/docs/articles/apexcharter_files/apexcharter-css-0.1.0/apexcharter.css @@ -11,18 +11,63 @@ } .apexcharter-facet-col-label { - background:#E6E6E6; + background:#E6E6E6; text-align: center; - font-weight: bold; + font-weight: bold; line-height: 30px; } .apexcharter-facet-row-label { - background:#E6E6E6; - text-align: center; + background:#E6E6E6; + text-align: center; font-weight: bold; - writing-mode: vertical-rl; - text-orientation: mixed; + writing-mode: vertical-rl; + text-orientation: mixed; line-height: 30px; } + +.apexcharter-facet-subtitle { + font-family: Helvetica, Arial, sans-serif; + margin-bottom: 5px; +} + +.apexcharter-facet-title { + font-family: Helvetica, Arial, sans-serif; + 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/docs/articles/articles/advanced-configuration.html b/docs/articles/articles/advanced-configuration.html index e9f42d8..8cda341 100644 --- a/docs/articles/articles/advanced-configuration.html +++ b/docs/articles/articles/advanced-configuration.html @@ -231,8 +231,8 @@

Final result looks like :

 bars
-
-

View full code

+
+

View full code

 data("mpg", package = "ggplot2")
 
@@ -351,8 +351,8 @@
 
Final result looks like :

 
 lines

-

-
View full code

+

+
View full code

 
 data("unhcr_ts")
 
@@ -523,8 +523,8 @@
 
Final result looks like :

 
 scatter

-

-
View full code

+

+
View full code

 
 data("gapminder", package = "gapminder")
 
@@ -740,8 +740,8 @@
 
Final result looks like :

 
 heatmap

-

-
View full code

+

+
View full code

 
 data("vaccines", package = "highcharter")
 
diff --git a/docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/apexcharter.css b/docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/apexcharter.css
index a9ba20b..814316a 100644
--- a/docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/apexcharter.css
+++ b/docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/apexcharter.css
@@ -11,18 +11,63 @@
 }
 
 .apexcharter-facet-col-label {
-  background:#E6E6E6; 
+  background:#E6E6E6;
   text-align: center;
-  font-weight: bold; 
+  font-weight: bold;
   line-height: 30px;
 }
 
 .apexcharter-facet-row-label {
-  background:#E6E6E6; 
-  text-align: center; 
+  background:#E6E6E6;
+  text-align: center;
   font-weight: bold;
-  writing-mode: vertical-rl; 
-  text-orientation: mixed; 
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
   line-height: 30px;
 }
 
+
+.apexcharter-facet-subtitle {
+  font-family: Helvetica, Arial, sans-serif;
+  margin-bottom: 5px;
+}
+
+.apexcharter-facet-title {
+  font-family: Helvetica, Arial, sans-serif;
+  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/docs/articles/chart-options.html b/docs/articles/chart-options.html
index 1a9c715..902bb92 100644
--- a/docs/articles/chart-options.html
+++ b/docs/articles/chart-options.html
@@ -191,8 +191,8 @@
     x = "Cut",
     y = "Count"
   )

-

-
If you more control (font size, alignment, …), you can use ax_title(), ax_subtitle(), ax_xaxis() and ax_yaxis(), as described below.

+

+
If you more control (font size, alignment, …), you can use ax_title(), ax_subtitle(), ax_xaxis() and ax_yaxis(), as described below.

 

 

 

@@ -200,8 +200,8 @@
 
 apex(data = n_cut, type = "column", mapping = aes(x = cut, y = n)) %>% 
   ax_title(text = "Cut distribution")

-

-
You can set some options, for example:

+

+
You can set some options, for example:

 
 apex(data = n_cut, type = "column", mapping = aes(x = cut, y = n)) %>% 
   ax_title(
@@ -209,8 +209,8 @@
     align = "center",
     style = list(fontSize = "22px", fontWeight = 700)
   )

-

-
Full list of parameters is available here : https://apexcharts.com/docs/options/title/

+

+
Full list of parameters is available here : https://apexcharts.com/docs/options/title/

 

 

 

@@ -219,8 +219,8 @@
 apex(data = n_cut, type = "column", mapping = aes(x = cut, y = n)) %>% 
   ax_title(text = "Cut distribution") %>% 
   ax_subtitle(text = "Data from ggplot2")

-

-
With same options than for title:

+

+
With same options than for title:

 
 apex(data = n_cut, type = "column", mapping = aes(x = cut, y = n)) %>% 
   ax_title(
@@ -233,8 +233,8 @@
     align = "center",
     style = list(fontSize = "16px", fontWeight = 400, color = "#BDBDBD")
   )

-

-
Full list of parameters is available here : https://apexcharts.com/docs/options/subtitle/

+

+
Full list of parameters is available here : https://apexcharts.com/docs/options/subtitle/

@@ -243,8 +243,8 @@ apex(data = n_cut, type = "column", mapping = aes(x = cut, y = n)) %>% ax_yaxis(title = list(text = "Count")) %>% ax_xaxis(title = list(text = "Cut"))

-
-

With some options:

+
+

With some options:

 apex(data = n_cut, type = "column", mapping = aes(x = cut, y = n)) %>% 
   ax_yaxis(title = list(
@@ -255,8 +255,8 @@
     text = "Cut", 
     style = list(fontSize = "14px", color = "#BDBDBD")
   ))
-
- +
+
@@ -281,18 +281,18 @@

Classic line:

 apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed))
-
-

Spline curve:

+
+

Spline curve:

 apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed)) %>% 
   ax_stroke(curve = "smooth")
-
-

Steps chart:

+
+

Steps chart:

 apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed)) %>% 
   ax_stroke(curve = "stepline")
-
- +
+

@@ -312,23 +312,23 @@ stops = c(0, 100, 100, 100) ) )

-
-

Solid area color:

+
+

Solid area color:

 apex(data = economics, type = "area", mapping = aes(x = date, y = uempmed)) %>% 
   ax_fill(type = "solid", opacity = 1)
-
-

Line width:

+
+

Line width:

 apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed)) %>% 
   ax_stroke(width = 1)
-
-

Dotted line

+
+

Dotted line

 apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed)) %>% 
   ax_stroke(dashArray = 6)
-
- +
+

@@ -337,14 +337,14 @@ 
 apex(data = tail(economics, 20), type = "line", mapping = aes(x = date, y = uempmed)) %>% 
   ax_markers(size = 6)
-
-

Add labels over points

+
+

Add labels over points

 apex(data = tail(economics, 20), type = "line", mapping = aes(x = date, y = uempmed)) %>% 
   ax_markers(size = 6) %>% 
   ax_dataLabels(enabled = TRUE)
-
- +
+

@@ -355,13 +355,13 @@ ax_yaxis(decimalsInFloat = 2) %>% ax_markers(size = c(3, 6)) %>% ax_stroke(width = c(1, 3))

-
-
+

+
 apex(data = economics_long, type = "line", mapping = aes(x = date, y = value01, group = variable)) %>% 
   ax_yaxis(decimalsInFloat = 2) %>% 
   ax_stroke(dashArray = c(8, 5))

-

-
+

+
diff --git a/docs/articles/chart-options_files/apexcharter-css-0.1.0/apexcharter.css b/docs/articles/chart-options_files/apexcharter-css-0.1.0/apexcharter.css index a9ba20b..814316a 100644 --- a/docs/articles/chart-options_files/apexcharter-css-0.1.0/apexcharter.css +++ b/docs/articles/chart-options_files/apexcharter-css-0.1.0/apexcharter.css @@ -11,18 +11,63 @@ } .apexcharter-facet-col-label { - background:#E6E6E6; + background:#E6E6E6; text-align: center; - font-weight: bold; + font-weight: bold; line-height: 30px; } .apexcharter-facet-row-label { - background:#E6E6E6; - text-align: center; + background:#E6E6E6; + text-align: center; font-weight: bold; - writing-mode: vertical-rl; - text-orientation: mixed; + writing-mode: vertical-rl; + text-orientation: mixed; line-height: 30px; } + +.apexcharter-facet-subtitle { + font-family: Helvetica, Arial, sans-serif; + margin-bottom: 5px; +} + +.apexcharter-facet-title { + font-family: Helvetica, Arial, sans-serif; + 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/docs/articles/facets.html b/docs/articles/facets.html index 9170381..1feb81d 100644 --- a/docs/articles/facets.html +++ b/docs/articles/facets.html @@ -185,25 +185,38 @@
  • x-axis always appear for scatter and line charts
  • x-axis labels can differ between charts even with fixed scale depending on the width of the chart and the formatter applied to labels
  • when scale on an axis is fixed, the chart with the axis don’t have the exact same size than the other since the axis take space in the plotting area
    • +
  • if legend is needed, it will appear on each charts

    • Facet wrap

    Create a grid of charts according to a variable of the data with ax_facet_wrap() :

    -data("mpg", package = "ggplot2")
+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",
+    x = "engine displacement, in litres",
+    y = "city miles per gallon"
+  ) %>% 
   ax_facet_wrap(vars(drv), ncol = 2)
    -
    -
    -
    -
    - +
    Facet wrap example
    +
    mpg data from ggplot2
    +
    +
    +
    +
    +
    engine displacement, in litres
    +
    city miles per gallon

    Synchronized line charts with free y-axis :

    -data("economics_long", package = "ggplot2")
+library(apexcharter)
+data("economics_long", package = "ggplot2")
 
 apex(economics_long, aes(date, value), type = "line", synchronize = "sync-it") %>% 
   ax_yaxis(
@@ -215,13 +228,13 @@
   ) %>%
   ax_tooltip(x = list(format = "yyyy")) %>% 
   ax_facet_wrap(vars(variable), scales = "free_y")
    -
    -
    -
    -
    -
    -
    - +
    +
    +
    +
    +
    +
    +

    Don’t forget to set a minWidth for y axis labels when synchronizing charts, otherwise unexpected results can occurs.

    @@ -230,23 +243,35 @@ Facet grid

    Create a matrix of charts defined by row and column faceting variables with ax_facet_grid() :

    -data("mpg", package = "ggplot2")
+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",
+    x = "engine displacement, in litres",
+    y = "city miles per gallon"
+  ) %>% 
   ax_facet_grid(rows = vars(drv), cols = vars(year))
    -
    +
    Facet grid example
    +
    mpg data from ggplot2
    +
    1999
    2008
    -
    -
    -
    4
    -
    -
    -
    f
    -
    -
    -
    r
    +
    +
    +
    4
    +
    +
    +
    f
    +
    +
    +
    r
    +
    engine displacement, in litres
    +
    city miles per gallon
    @@ -254,10 +279,15 @@ Grid

    You can construct a grid of (unrelated) charts with apex_grid(), construct your charts independently then assemble them in the grid:

    -a1 <- apex(mpg, aes(manufacturer), type = "bar")
+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"),
@@ -265,18 +295,18 @@
   nrow = 2,
   height = "600px"
 )
    -
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +

    grid_area argument allow to specify space occupied by each chart, you can generate interactively your grid template here.

    diff --git a/docs/articles/facets_files/apexcharter-css-0.1.0/apexcharter.css b/docs/articles/facets_files/apexcharter-css-0.1.0/apexcharter.css index a9ba20b..814316a 100644 --- a/docs/articles/facets_files/apexcharter-css-0.1.0/apexcharter.css +++ b/docs/articles/facets_files/apexcharter-css-0.1.0/apexcharter.css @@ -11,18 +11,63 @@ } .apexcharter-facet-col-label { - background:#E6E6E6; + background:#E6E6E6; text-align: center; - font-weight: bold; + font-weight: bold; line-height: 30px; } .apexcharter-facet-row-label { - background:#E6E6E6; - text-align: center; + background:#E6E6E6; + text-align: center; font-weight: bold; - writing-mode: vertical-rl; - text-orientation: mixed; + writing-mode: vertical-rl; + text-orientation: mixed; line-height: 30px; } + +.apexcharter-facet-subtitle { + font-family: Helvetica, Arial, sans-serif; + margin-bottom: 5px; +} + +.apexcharter-facet-title { + font-family: Helvetica, Arial, sans-serif; + 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/docs/articles/shiny-integration.html b/docs/articles/shiny-integration.html index afc467c..833e650 100644 --- a/docs/articles/shiny-integration.html +++ b/docs/articles/shiny-integration.html @@ -232,8 +232,8 @@ apex(aes(month, value), height = "250px") %>% ax_title("Click a bar:") %>% set_input_click("click")
    -
    -

    Value server-side will be available through input$click.

    +
    +

    Value server-side will be available through input$click.

    Depending on the type of graphic, you can retrieve :

    • @@ -258,8 +258,8 @@ multiple = TRUE, effect_value = 0.1 )
    -
    -

    More examples are available with:

    +
    +

    More examples are available with:

     run_input_demo("click")
    @@ -271,8 +271,8 @@ data("economics", package = "ggplot2") apex(economics, aes(date, psavert), type = "line", height = "250px") %>% set_input_zoom("zoom")
    -
    -

    Value server-side will be available through input$zoom under the form :

    +
    +

    Value server-side will be available through input$zoom under the form :

    #> $x
 #> $x$min
 #> [1] "1981-10-24 15:41:16 UTC"
@@ -299,8 +299,8 @@
 
     apex(economics, aes(date, psavert), type = "line", height = "250px") %>% 
   set_input_selection("selection")
    
-
    
-
    Value server-side will be available through input$selection under the form :
    
+
    
+
    Value server-side will be available through input$selection under the form :
    
 
    #> $x
 #> $x$min
 #> [1] "1981-10-24 15:41:16 UTC"
@@ -315,13 +315,13 @@
     xmin = format_date("1980-01-01"), 
     xmax = format_date("1985-01-01")
   )
    
-
    
-
    Above selection is only made possible on x-axis, but in case of scatter chart for example, you can select a rectangle (both axis):
    
+
    
+
    Above selection is only made possible on x-axis, but in case of scatter chart for example, you can select a rectangle (both axis):
    
 
     apex(iris, aes(Sepal.Length, Sepal.Width), type = "scatter", height = "250px") %>% 
   set_input_selection("selection_scatter", type = "xy")
    
-
    
-
    In this case, input value will look like this:
    
+
    
+
    In this case, input value will look like this:
    
 
    #> $x
 #> $x$min
 #> [1] 5.130187
diff --git a/docs/articles/shiny-integration_files/apexcharter-css-0.1.0/apexcharter.css b/docs/articles/shiny-integration_files/apexcharter-css-0.1.0/apexcharter.css
index a9ba20b..814316a 100644
--- a/docs/articles/shiny-integration_files/apexcharter-css-0.1.0/apexcharter.css
+++ b/docs/articles/shiny-integration_files/apexcharter-css-0.1.0/apexcharter.css
@@ -11,18 +11,63 @@
 }
 
 .apexcharter-facet-col-label {
-  background:#E6E6E6; 
+  background:#E6E6E6;
   text-align: center;
-  font-weight: bold; 
+  font-weight: bold;
   line-height: 30px;
 }
 
 .apexcharter-facet-row-label {
-  background:#E6E6E6; 
-  text-align: center; 
+  background:#E6E6E6;
+  text-align: center;
   font-weight: bold;
-  writing-mode: vertical-rl; 
-  text-orientation: mixed; 
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
   line-height: 30px;
 }
 
+
+.apexcharter-facet-subtitle {
+  font-family: Helvetica, Arial, sans-serif;
+  margin-bottom: 5px;
+}
+
+.apexcharter-facet-title {
+  font-family: Helvetica, Arial, sans-serif;
+  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/docs/articles/spark-box.html b/docs/articles/spark-box.html
index 15e655d..78bc31f 100644
--- a/docs/articles/spark-box.html
+++ b/docs/articles/spark-box.html
@@ -185,8 +185,8 @@
   title = mean(spark_data$var1), 
   subtitle = "Variable 1"
 )
    
-
    
-
    With more styles :
    
+
    
+
    With more styles :
    
 
     spark_box(
   data = spark_data,
@@ -196,8 +196,8 @@
   title_style = list(color = "#FFF"),
   subtitle_style = list(color = "#FFF")
 )
    
-
    
-
    You can also use spark boxes in Shiny application, use code to launch an example :
    
+
    
+
    You can also use spark boxes in Shiny application, use code to launch an example :
    
 
     run_sparkbox_demo()
    
 
    spark-box
    
diff --git a/docs/articles/spark-box_files/apexcharter-css-0.1.0/apexcharter.css b/docs/articles/spark-box_files/apexcharter-css-0.1.0/apexcharter.css
index a9ba20b..814316a 100644
--- a/docs/articles/spark-box_files/apexcharter-css-0.1.0/apexcharter.css
+++ b/docs/articles/spark-box_files/apexcharter-css-0.1.0/apexcharter.css
@@ -11,18 +11,63 @@
 }
 
 .apexcharter-facet-col-label {
-  background:#E6E6E6; 
+  background:#E6E6E6;
   text-align: center;
-  font-weight: bold; 
+  font-weight: bold;
   line-height: 30px;
 }
 
 .apexcharter-facet-row-label {
-  background:#E6E6E6; 
-  text-align: center; 
+  background:#E6E6E6;
+  text-align: center;
   font-weight: bold;
-  writing-mode: vertical-rl; 
-  text-orientation: mixed; 
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
   line-height: 30px;
 }
 
+
+.apexcharter-facet-subtitle {
+  font-family: Helvetica, Arial, sans-serif;
+  margin-bottom: 5px;
+}
+
+.apexcharter-facet-title {
+  font-family: Helvetica, Arial, sans-serif;
+  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/docs/articles/sync-charts.html b/docs/articles/sync-charts.html
index 0792adf..e0c57f1 100644
--- a/docs/articles/sync-charts.html
+++ b/docs/articles/sync-charts.html
@@ -207,9 +207,9 @@
   ) %>%
   ax_tooltip(x = list(format = "yyyy"))

    -
    -
    -

    Note that you have to set a common minWidth for y axis labels. Different width yaxis in different charts will produce incorrect results when hovering or interacting.

    +
    +
    +

    Note that you have to set a common minWidth for y axis labels. Different width yaxis in different charts will produce incorrect results when hovering or interacting.

    For an example in Shiny, you can run:

     run_sync_demo()
    @@ -255,9 +255,9 @@ ax_xaxis(labels = list(show = FALSE)) %>% ax_yaxis(labels = list(show = FALSE))

    -
    -
    - +
    +
    + diff --git a/docs/articles/sync-charts_files/apexcharter-css-0.1.0/apexcharter.css b/docs/articles/sync-charts_files/apexcharter-css-0.1.0/apexcharter.css index a9ba20b..814316a 100644 --- a/docs/articles/sync-charts_files/apexcharter-css-0.1.0/apexcharter.css +++ b/docs/articles/sync-charts_files/apexcharter-css-0.1.0/apexcharter.css @@ -11,18 +11,63 @@ } .apexcharter-facet-col-label { - background:#E6E6E6; + background:#E6E6E6; text-align: center; - font-weight: bold; + font-weight: bold; line-height: 30px; } .apexcharter-facet-row-label { - background:#E6E6E6; - text-align: center; + background:#E6E6E6; + text-align: center; font-weight: bold; - writing-mode: vertical-rl; - text-orientation: mixed; + writing-mode: vertical-rl; + text-orientation: mixed; line-height: 30px; } + +.apexcharter-facet-subtitle { + font-family: Helvetica, Arial, sans-serif; + margin-bottom: 5px; +} + +.apexcharter-facet-title { + font-family: Helvetica, Arial, sans-serif; + 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/docs/index.html b/docs/index.html index 9ea529f..8cab1cd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -165,7 +165,7 @@

    Htmlwidget for apexcharts.js : A modern JavaScript charting library to build interactive charts and visualizations with simple API. See the online demo for examples.

    -

    version cran checks Travis build status Lifecycle: maturing R build status

    +

    version cran checks Lifecycle: maturing R build status Codecov test coverage

    ⚠️ Use RStudio >= 1.2 to properly display charts

    diff --git a/docs/news/index.html b/docs/news/index.html index 176b03e..f711f9c 100644 --- a/docs/news/index.html +++ b/docs/news/index.html @@ -226,6 +226,16 @@ Source: NEWS.md

    +
    +

    +apexcharter 0.2.0 Unreleased +

    + +

    apexcharter 0.1.8 2020-11-18 @@ -344,6 +354,7 @@

    Contents

      +
    • 0.2.0
    • 0.1.8
    • 0.1.7
    • 0.1.6
      • diff --git a/docs/pkgdown.yml b/docs/pkgdown.yml index e31e014..c8c9405 100644 --- a/docs/pkgdown.yml +++ b/docs/pkgdown.yml @@ -9,5 +9,5 @@ articles: shiny-integration: shiny-integration.html spark-box: spark-box.html sync-charts: sync-charts.html -last_built: 2021-01-06T09:44Z +last_built: 2021-01-08T14:47Z diff --git a/docs/reference/apex-facets.html b/docs/reference/apex-facets.html index 0f35919..b5a2b22 100644 --- a/docs/reference/apex-facets.html +++ b/docs/reference/apex-facets.html @@ -324,9 +324,16 @@ free ("free"), or free in one dimension ("free_x", } ) +# Title and subtitle are treated as global +apex(mpg, aes(displ, cty), type = "scatter") %>% + ax_labs( + title = "Facet wrap example", + subtitle = "mpg data from ggplot2" + ) %>% + ax_facet_wrap(vars(drv), ncol = 2) + # Multiple variables - apex(mpg, aes(displ, cty), type = "scatter") %>% ax_facet_wrap(vars(year, drv)) @@ -423,6 +430,16 @@ free ("free"), or free in one dimension ("free_x", } ) + +# Title and subtitle are treated as global +apex(mpg, aes(displ, cty), type = "scatter") %>% + ax_labs( + title = "Facet grid example", + subtitle = "mpg data from ggplot2" + ) %>% + ax_facet_grid(rows = vars(drv), cols = vars(year)) + +