From a05d2db20d4ee2d417de76ff698e8586b3814c10 Mon Sep 17 00:00:00 2001 From: pvictor Date: Tue, 11 May 2021 14:40:27 +0200 Subject: [PATCH] prepare for cran --- DESCRIPTION | 2 +- NEWS.md | 2 +- docs/404.html | 4 +- docs/LICENSE-text.html | 4 +- docs/LICENSE.html | 4 +- docs/articles/apexcharter.html | 82 ++-- .../apexcharter-binding-0.2.0/apexcharter.js | 356 ++++++++++++++++++ .../articles/advanced-configuration.html | 22 +- .../apexcharter-binding-0.2.0/apexcharter.js | 356 ++++++++++++++++++ docs/articles/chart-options.html | 78 ++-- .../apexcharter-binding-0.2.0/apexcharter.js | 356 ++++++++++++++++++ docs/articles/facets.html | 56 +-- .../apexcharter-binding-0.2.0/apexcharter.js | 356 ++++++++++++++++++ docs/articles/index.html | 4 +- docs/articles/shiny-integration.html | 30 +- .../apexcharter-binding-0.2.0/apexcharter.js | 356 ++++++++++++++++++ docs/articles/spark-box.html | 14 +- .../apexcharter-binding-0.2.0/apexcharter.js | 356 ++++++++++++++++++ docs/articles/sync-charts.html | 18 +- .../apexcharter-binding-0.2.0/apexcharter.js | 356 ++++++++++++++++++ docs/authors.html | 4 +- docs/index.html | 4 +- docs/news/index.html | 6 +- docs/pkgdown.yml | 2 +- docs/reference/add-line.html | 4 +- docs/reference/add-shade.html | 4 +- docs/reference/add-vh-lines.html | 4 +- docs/reference/add_event.html | 4 +- docs/reference/add_event_marker.html | 4 +- docs/reference/add_point.html | 4 +- docs/reference/apex-facets.html | 4 +- docs/reference/apex.html | 4 +- docs/reference/apex_grid.html | 4 +- docs/reference/apexchart.html | 4 +- docs/reference/apexchartProxy.html | 4 +- docs/reference/apexcharter-exports.html | 4 +- docs/reference/apexcharter-package.html | 4 +- docs/reference/apexcharter-shiny-facets.html | 4 +- docs/reference/apexcharter-shiny-grid.html | 4 +- docs/reference/apexcharter-shiny.html | 4 +- docs/reference/ax-series.html | 4 +- docs/reference/ax_annotations.html | 4 +- docs/reference/ax_chart.html | 4 +- docs/reference/ax_colors.html | 4 +- docs/reference/ax_colors_manual.html | 4 +- docs/reference/ax_dataLabels.html | 4 +- docs/reference/ax_fill.html | 4 +- docs/reference/ax_grid.html | 4 +- docs/reference/ax_labels.html | 4 +- docs/reference/ax_labs.html | 4 +- docs/reference/ax_legend.html | 4 +- docs/reference/ax_markers.html | 4 +- docs/reference/ax_nodata.html | 4 +- docs/reference/ax_plotOptions.html | 4 +- docs/reference/ax_proxy_options.html | 4 +- docs/reference/ax_proxy_series.html | 4 +- docs/reference/ax_responsive.html | 4 +- docs/reference/ax_states.html | 4 +- docs/reference/ax_stroke.html | 4 +- docs/reference/ax_subtitle.html | 4 +- docs/reference/ax_theme.html | 4 +- docs/reference/ax_title.html | 4 +- docs/reference/ax_tooltip.html | 4 +- docs/reference/ax_xaxis.html | 4 +- docs/reference/ax_yaxis.html | 4 +- docs/reference/ax_yaxis2.html | 4 +- docs/reference/bar_opts.html | 4 +- docs/reference/bubble_opts.html | 4 +- docs/reference/candles.html | 4 +- docs/reference/climate_paris.html | 4 +- docs/reference/config_update.html | 4 +- docs/reference/consumption.html | 4 +- docs/reference/events_opts.html | 4 +- docs/reference/format_date.html | 4 +- docs/reference/format_num.html | 4 +- docs/reference/heatmap_opts.html | 4 +- docs/reference/index.html | 4 +- docs/reference/label.html | 4 +- docs/reference/parse_df.html | 4 +- docs/reference/pie_opts.html | 4 +- docs/reference/radialBar_opts.html | 4 +- docs/reference/run_demo_input.html | 4 +- docs/reference/run_demo_sparkbox.html | 4 +- docs/reference/run_demo_sync.html | 4 +- docs/reference/set_input_click.html | 4 +- docs/reference/set_input_export.html | 4 +- docs/reference/set_input_selection.html | 4 +- docs/reference/set_input_zoom.html | 4 +- docs/reference/set_tooltip_fixed.html | 4 +- docs/reference/spark_box.html | 4 +- docs/reference/unhcr_popstats_2017.html | 4 +- docs/reference/unhcr_ts.html | 4 +- revdep/.gitignore | 7 - revdep/README.md | 24 -- revdep/cran.md | 7 - revdep/failures.md | 1 - revdep/problems.md | 1 - 97 files changed, 2796 insertions(+), 344 deletions(-) create mode 100644 docs/articles/apexcharter_files/apexcharter-binding-0.2.0/apexcharter.js create mode 100644 docs/articles/articles/advanced-configuration_files/apexcharter-binding-0.2.0/apexcharter.js create mode 100644 docs/articles/chart-options_files/apexcharter-binding-0.2.0/apexcharter.js create mode 100644 docs/articles/facets_files/apexcharter-binding-0.2.0/apexcharter.js create mode 100644 docs/articles/shiny-integration_files/apexcharter-binding-0.2.0/apexcharter.js create mode 100644 docs/articles/spark-box_files/apexcharter-binding-0.2.0/apexcharter.js create mode 100644 docs/articles/sync-charts_files/apexcharter-binding-0.2.0/apexcharter.js delete mode 100644 revdep/.gitignore delete mode 100644 revdep/README.md delete mode 100644 revdep/cran.md delete mode 100644 revdep/failures.md delete mode 100644 revdep/problems.md diff --git a/DESCRIPTION b/DESCRIPTION index ded51c6..ac9d5ad 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,5 +1,5 @@ Package: apexcharter -Version: 0.1.8.9500 +Version: 0.2.0 Title: Create Interactive Chart with the JavaScript 'ApexCharts' Library Description: Provides an 'htmlwidgets' interface to 'apexcharts.js'. 'Apexcharts' is a modern JavaScript charting library to build interactive charts and visualizations with simple API. diff --git a/NEWS.md b/NEWS.md index b6720ae..e79c1cd 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,7 +1,7 @@ apexcharter 0.2.0 ================== -* Updated ApexCharts.js to 3.26.1 +* Updated ApexCharts.js to 3.26.2 * New functions `ax_facet_wrap()` and `ax_facet_grid()` to create faceting charts. * New function `apex_grid()` to combine several charts in a grid. diff --git a/docs/404.html b/docs/404.html index d4ba6b8..4b151fd 100644 --- a/docs/404.html +++ b/docs/404.html @@ -149,11 +149,11 @@ diff --git a/docs/LICENSE-text.html b/docs/LICENSE-text.html index 094e056..92d570f 100644 --- a/docs/LICENSE-text.html +++ b/docs/LICENSE-text.html @@ -149,11 +149,11 @@ diff --git a/docs/LICENSE.html b/docs/LICENSE.html index b5a757d..923721e 100644 --- a/docs/LICENSE.html +++ b/docs/LICENSE.html @@ -149,11 +149,11 @@ diff --git a/docs/articles/apexcharter.html b/docs/articles/apexcharter.html index 952bebc..2fb29ff 100644 --- a/docs/articles/apexcharter.html +++ b/docs/articles/apexcharter.html @@ -84,11 +84,11 @@ @@ -155,7 +155,7 @@ -
+

Starting with ApexCharts

@@ -184,21 +184,21 @@ data("mpg") apex(data = mpg, type = "column", mapping = aes(x = manufacturer))
-
-

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

+
+

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

 apex(data = mpg, type = "bar", mapping = aes(x = manufacturer))
-
-

To create a dodge bar charts, use aesthetic fill :

+
+

To create a dodge bar charts, use aesthetic fill :

 apex(data = mpg, type = "column", mapping = aes(x = manufacturer, fill = year))
-
-

For stacked bar charts, specify option stacked in ax_chart :

+
+

For stacked bar charts, specify option stacked in ax_chart :

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

@@ -208,22 +208,22 @@ data("economics") 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")
 
 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)
-
- +
+

@@ -231,16 +231,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)))
-
- +
+

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

-
- +
+

@@ -262,8 +262,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'),
@@ -271,8 +271,8 @@
 )
 
 apex(data = fruits, type = "radialBar", mapping = aes(x = name, y = value))
-
- +
+

@@ -282,8 +282,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(
@@ -297,8 +297,8 @@
 )
 
 apex(data = new_mtcars, type = "radar", mapping = aes(x = model, y = value, group = time))
-
- +
+

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

-
- +
+

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

-
- +
+

@@ -341,8 +341,8 @@ data("mpg", package = "ggplot2") apex(mpg, aes(x = manufacturer), "treemap")

-
- +
+

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

-
- +
+ diff --git a/docs/articles/apexcharter_files/apexcharter-binding-0.2.0/apexcharter.js b/docs/articles/apexcharter_files/apexcharter-binding-0.2.0/apexcharter.js new file mode 100644 index 0000000..7548d5e --- /dev/null +++ b/docs/articles/apexcharter_files/apexcharter-binding-0.2.0/apexcharter.js @@ -0,0 +1,356 @@ +/*! + * + * htmlwidgets bindings for ApexCharts + * https://github.com/dreamRs/apexcharter + * + */ + +/*global HTMLWidgets, ApexCharts, Shiny */ + +/// Functions + +// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd) +var apexcharter = { + getWidget: function(id) { + var htmlWidgetsObj = HTMLWidgets.find("#" + id); + var widgetObj; + if (typeof htmlWidgetsObj !== "undefined") { + widgetObj = htmlWidgetsObj.getChart(); + } + return widgetObj; + }, + + isSingleSerie: function(options) { + var typeLabels = ["pie", "radialBar", "donut"]; + var lab = typeLabels.indexOf(options.w.config.chart.type) > -1; + var single = options.w.config.series.length === 1; + return lab | single; + }, + + isDatetimeAxis: function(chartContext) { + if ( + chartContext.hasOwnProperty("w") && + chartContext.w.hasOwnProperty("config") && + chartContext.w.config.hasOwnProperty("xaxis") && + chartContext.w.config.xaxis.hasOwnProperty("type") + ) { + return chartContext.w.config.xaxis.type == "datetime"; + } else { + return false; + } + }, + + getSelection: function(chartContext, selectedDataPoints, serieIndex) { + var typeLabels = ["pie", "radialBar", "donut"]; + var typeXY = ["scatter", "bubble"]; + var selected; + if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) { + var labels = chartContext.opts.labels; + selected = selectedDataPoints[serieIndex].map(function(index) { + return labels[index]; + }); + } else { + var data = chartContext.opts.series[serieIndex].data; + selected = selectedDataPoints[serieIndex].map(function(index) { + var val = data[index]; + if (typeXY.indexOf(chartContext.opts.chart.type) < 0) { + if (val.hasOwnProperty("x")) { + val = val.x; + } else { + val = val[0]; + } + } + return val; + }); + } + //console.log(selected); + if (typeXY.indexOf(chartContext.opts.chart.type) > -1) { + selected = { + x: selected.map(function(obj) { + return obj.x; + }), + y: selected.map(function(obj) { + return obj.y; + }) + }; + } + if (typeof selected == "undefined") { + selected = null; + } + return selected; + }, + + getYaxis: function(axis) { + var yzoom = { min: null, max: null }; + if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) { + var y_axis; + if (axis.yaxis.hasOwnProperty("min")) { + y_axis = axis.yaxis; + } else { + y_axis = axis.yaxis[0]; + } + if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") { + yzoom.min = y_axis.min; + } + if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") { + yzoom.max = y_axis.max; + } + } + return yzoom; + }, + + getXaxis: function(axis) { + var xzoom = { min: null, max: null }; + if (typeof axis.xaxis !== "undefined") { + var x_axis = axis.xaxis; + if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") { + xzoom.min = x_axis.min; + } + if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") { + xzoom.max = x_axis.max; + } + } + return xzoom; + }, + + exportChart: function(x, chart) { + if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) { + if (x.shinyEvents.hasOwnProperty("export")) { + setTimeout(function() { + chart.dataURI().then(function(imgURI) { + Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI); + }); + }, 1000); + } + } + } +}; + +/// Widget + +HTMLWidgets.widget({ + name: "apexcharter", + + type: "output", + + factory: function(el, width, height) { + var axOpts; + var apexchart = null; + + return { + renderValue: function(x) { + // Global options + axOpts = x.ax_opts; + + if (x.sparkbox) { + el.style.background = x.sparkbox.background; + el.classList.add("apexcharter-spark-box"); + } + + // Sizing + if (typeof axOpts.chart === "undefined") { + axOpts.chart = {}; + } + axOpts.chart.width = el.clientWidth; + axOpts.chart.height = el.clientHeight; + if (!axOpts.chart.hasOwnProperty("id")) { + axOpts.chart.id = el.id; + } + if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) { + axOpts.chart.parentHeightOffset = 0; + } + + // added events to remove minheight container + if (!axOpts.chart.hasOwnProperty("events")) { + axOpts.chart.events = {}; + } + if (!axOpts.chart.events.hasOwnProperty("mounted")) { + axOpts.chart.events.mounted = function(chartContext, config) { + el.style.minHeight = 0; + }; + } + if (!axOpts.chart.events.hasOwnProperty("updated")) { + axOpts.chart.events.updated = function(chartContext, config) { + el.style.minHeight = 0; + }; + } + + if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) { + if (!axOpts.hasOwnProperty("chart")) { + axOpts.chart = {}; + } + if (!axOpts.chart.hasOwnProperty("events")) { + axOpts.chart.events = {}; + } + if (x.shinyEvents.hasOwnProperty("click")) { + axOpts.chart.events.dataPointSelection = function( + event, + chartContext, + opts + ) { + var options = opts; + var nonEmpty = opts.selectedDataPoints.filter(function(el) { + return el !== null && el.length > 0; + }); + if (nonEmpty.length > 0) { + var select = {}; + for (var i = 0; i < opts.selectedDataPoints.length; i++) { + if (typeof opts.selectedDataPoints[i] === "undefined") { + continue; + } + var selection = apexcharter.getSelection( + chartContext, + options.selectedDataPoints, + i + ); + if (selection !== null) { + if (opts.w.config.series[i].hasOwnProperty("name")) { + var name = opts.w.config.series[i].name; + select[name] = selection; + } else { + select[i] = selection; + } + } + } + if (apexcharter.isSingleSerie(options)) { + select = select[Object.keys(select)[0]]; + } + Shiny.setInputValue( + x.shinyEvents.click.inputId + ":apex_click", + { value: select, datetime: apexcharter.isDatetimeAxis(chartContext) } + ); + } else { + Shiny.setInputValue(x.shinyEvents.click.inputId, null); + } + }; + } + if (x.shinyEvents.hasOwnProperty("zoomed")) { + axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) { + var id = x.shinyEvents.zoomed.inputId; + if (apexcharter.isDatetimeAxis(chartContext)) { + id = id + ":apex_datetime"; + } + Shiny.setInputValue(id, { + x: apexcharter.getXaxis(xaxis), + y: apexcharter.getYaxis(xaxis) + }); + }; + } + if (x.shinyEvents.hasOwnProperty("selection")) { + axOpts.chart.events.selection = function( + chartContext, + xaxis, + yaxis + ) { + var id = x.shinyEvents.selection.inputId; + if (apexcharter.isDatetimeAxis(chartContext)) { + id = id + ":apex_datetime"; + } + var selectionValue; + if (x.shinyEvents.selection.type === "x") { + selectionValue = { x: xaxis.xaxis }; + } else if (x.shinyEvents.selection.type === "xy") { + selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) }; + } else if (x.shinyEvents.selection.type === "y") { + selectionValue = { y: apexcharter.getYaxis(xaxis) }; + } + Shiny.setInputValue(id, selectionValue); + }; + } + } + + // Generate or update chart + if (apexchart === null) { + apexchart = new ApexCharts(el, axOpts); + apexchart.render().then(function() { + apexcharter.exportChart(x, apexchart); + }); + } else { + if (x.auto_update) { + //console.log(x.auto_update); + if (x.auto_update.update_options) { + var options = Object.assign({}, axOpts); + delete options.series; + delete options.chart.width; + delete options.chart.height; + apexchart + .updateOptions( + options, + x.auto_update.options_redrawPaths, + x.auto_update.options_animate, + x.auto_update.update_synced_charts + ); + } + apexchart + .updateSeries(axOpts.series, x.auto_update.series_animate) + .then(function(chart) { + apexcharter.exportChart(x, chart); + }); + } else { + apexchart.destroy(); + apexchart = new ApexCharts(el, axOpts); + apexchart.render().then(function() { + apexcharter.exportChart(x, apexchart); + }); + } + } + }, + + getChart: function() { + return apexchart; + }, + + resize: function(width, height) { + apexchart.updateOptions({ + chart: { + width: width, + height: height + } + }); + } + }; + } +}); + +if (HTMLWidgets.shinyMode) { + // update serie + Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + chart.updateSeries( + [ + { + data: obj.data.newSeries + } + ], + obj.data.animate + ); + } + }); + + // update options + Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + var options = obj.data.options; + var evals = obj.data.evals; + if (!(evals instanceof Array)) evals = [evals]; + for (var k = 0; evals && k < evals.length; k++) { + window.HTMLWidgets.evaluateStringMember(options, evals[k]); + } + chart.updateOptions(options); + } + }); + + // toggle series + Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + var seriesName = obj.data.seriesName; + for(var i = 0; i < seriesName.length; i++) { + chart.toggleSeries(seriesName[i]); + } + } + }); +} + diff --git a/docs/articles/articles/advanced-configuration.html b/docs/articles/articles/advanced-configuration.html index 7fbddbe..ce28442 100644 --- a/docs/articles/articles/advanced-configuration.html +++ b/docs/articles/articles/advanced-configuration.html @@ -84,11 +84,11 @@ @@ -155,7 +155,7 @@ -
+

Advanced configuration examples

@@ -230,8 +230,8 @@

Final result looks like :

 bars
-
-

View full code

+
+

View full code

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

 
 lines

-

-
View full code

+

+
View full code

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

 
 scatter

-

-
View full code

+

+
View full code

 
 data("gapminder", package = "gapminder")
 
@@ -739,8 +739,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-binding-0.2.0/apexcharter.js b/docs/articles/articles/advanced-configuration_files/apexcharter-binding-0.2.0/apexcharter.js
new file mode 100644
index 0000000..7548d5e
--- /dev/null
+++ b/docs/articles/articles/advanced-configuration_files/apexcharter-binding-0.2.0/apexcharter.js
@@ -0,0 +1,356 @@
+/*!
+ *
+ * htmlwidgets bindings for ApexCharts
+ * https://github.com/dreamRs/apexcharter
+ *
+ */
+
+/*global HTMLWidgets, ApexCharts, Shiny */
+
+/// Functions
+
+// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
+var apexcharter = {
+  getWidget: function(id) {
+    var htmlWidgetsObj = HTMLWidgets.find("#" + id);
+    var widgetObj;
+    if (typeof htmlWidgetsObj !== "undefined") {
+      widgetObj = htmlWidgetsObj.getChart();
+    }
+    return widgetObj;
+  },
+
+  isSingleSerie: function(options) {
+    var typeLabels = ["pie", "radialBar", "donut"];
+    var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
+    var single = options.w.config.series.length === 1;
+    return lab | single;
+  },
+
+  isDatetimeAxis: function(chartContext) {
+    if (
+      chartContext.hasOwnProperty("w") &&
+      chartContext.w.hasOwnProperty("config") &&
+      chartContext.w.config.hasOwnProperty("xaxis") &&
+      chartContext.w.config.xaxis.hasOwnProperty("type")
+    ) {
+      return chartContext.w.config.xaxis.type == "datetime";
+    } else {
+      return false;
+    }
+  },
+
+  getSelection: function(chartContext, selectedDataPoints, serieIndex) {
+    var typeLabels = ["pie", "radialBar", "donut"];
+    var typeXY = ["scatter", "bubble"];
+    var selected;
+    if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
+      var labels = chartContext.opts.labels;
+      selected = selectedDataPoints[serieIndex].map(function(index) {
+        return labels[index];
+      });
+    } else {
+      var data = chartContext.opts.series[serieIndex].data;
+      selected = selectedDataPoints[serieIndex].map(function(index) {
+        var val = data[index];
+        if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
+          if (val.hasOwnProperty("x")) {
+            val = val.x;
+          } else {
+            val = val[0];
+          }
+        }
+        return val;
+      });
+    }
+    //console.log(selected);
+    if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
+      selected = {
+        x: selected.map(function(obj) {
+          return obj.x;
+        }),
+        y: selected.map(function(obj) {
+          return obj.y;
+        })
+      };
+    }
+    if (typeof selected == "undefined") {
+      selected = null;
+    }
+    return selected;
+  },
+
+  getYaxis: function(axis) {
+    var yzoom = { min: null, max: null };
+    if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
+      var y_axis;
+      if (axis.yaxis.hasOwnProperty("min")) {
+        y_axis = axis.yaxis;
+      } else {
+        y_axis = axis.yaxis[0];
+      }
+      if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
+        yzoom.min = y_axis.min;
+      }
+      if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
+        yzoom.max = y_axis.max;
+      }
+    }
+    return yzoom;
+  },
+
+  getXaxis: function(axis) {
+    var xzoom = { min: null, max: null };
+    if (typeof axis.xaxis !== "undefined") {
+      var x_axis = axis.xaxis;
+      if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
+        xzoom.min = x_axis.min;
+      }
+      if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
+        xzoom.max = x_axis.max;
+      }
+    }
+    return xzoom;
+  },
+
+  exportChart: function(x, chart) {
+    if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
+      if (x.shinyEvents.hasOwnProperty("export")) {
+        setTimeout(function() {
+          chart.dataURI().then(function(imgURI) {
+            Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
+          });
+        }, 1000);
+      }
+    }
+  }
+};
+
+/// Widget
+
+HTMLWidgets.widget({
+  name: "apexcharter",
+
+  type: "output",
+
+  factory: function(el, width, height) {
+    var axOpts;
+    var apexchart = null;
+
+    return {
+      renderValue: function(x) {
+        // Global options
+        axOpts = x.ax_opts;
+
+        if (x.sparkbox) {
+          el.style.background = x.sparkbox.background;
+          el.classList.add("apexcharter-spark-box");
+        }
+
+        // Sizing
+        if (typeof axOpts.chart === "undefined") {
+          axOpts.chart = {};
+        }
+        axOpts.chart.width = el.clientWidth;
+        axOpts.chart.height = el.clientHeight;
+        if (!axOpts.chart.hasOwnProperty("id")) {
+          axOpts.chart.id = el.id;
+        }
+        if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) {
+          axOpts.chart.parentHeightOffset = 0;
+        }
+
+        // added events to remove minheight container
+        if (!axOpts.chart.hasOwnProperty("events")) {
+          axOpts.chart.events = {};
+        }
+        if (!axOpts.chart.events.hasOwnProperty("mounted")) {
+          axOpts.chart.events.mounted = function(chartContext, config) {
+            el.style.minHeight = 0;
+          };
+        }
+        if (!axOpts.chart.events.hasOwnProperty("updated")) {
+          axOpts.chart.events.updated = function(chartContext, config) {
+            el.style.minHeight = 0;
+          };
+        }
+
+        if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
+          if (!axOpts.hasOwnProperty("chart")) {
+            axOpts.chart = {};
+          }
+          if (!axOpts.chart.hasOwnProperty("events")) {
+            axOpts.chart.events = {};
+          }
+          if (x.shinyEvents.hasOwnProperty("click")) {
+            axOpts.chart.events.dataPointSelection = function(
+              event,
+              chartContext,
+              opts
+            ) {
+              var options = opts;
+              var nonEmpty = opts.selectedDataPoints.filter(function(el) {
+                return el !== null && el.length > 0;
+              });
+              if (nonEmpty.length > 0) {
+                var select = {};
+                for (var i = 0; i < opts.selectedDataPoints.length; i++) {
+                  if (typeof opts.selectedDataPoints[i] === "undefined") {
+                    continue;
+                  }
+                  var selection = apexcharter.getSelection(
+                    chartContext,
+                    options.selectedDataPoints,
+                    i
+                  );
+                  if (selection !== null) {
+                    if (opts.w.config.series[i].hasOwnProperty("name")) {
+                      var name = opts.w.config.series[i].name;
+                      select[name] = selection;
+                    } else {
+                      select[i] = selection;
+                    }
+                  }
+                }
+                if (apexcharter.isSingleSerie(options)) {
+                  select = select[Object.keys(select)[0]];
+                }
+                Shiny.setInputValue(
+                  x.shinyEvents.click.inputId + ":apex_click",
+                  { value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
+                );
+              } else {
+                Shiny.setInputValue(x.shinyEvents.click.inputId, null);
+              }
+            };
+          }
+          if (x.shinyEvents.hasOwnProperty("zoomed")) {
+            axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
+              var id = x.shinyEvents.zoomed.inputId;
+              if (apexcharter.isDatetimeAxis(chartContext)) {
+                id = id + ":apex_datetime";
+              }
+              Shiny.setInputValue(id, {
+                x: apexcharter.getXaxis(xaxis),
+                y: apexcharter.getYaxis(xaxis)
+              });
+            };
+          }
+          if (x.shinyEvents.hasOwnProperty("selection")) {
+            axOpts.chart.events.selection = function(
+              chartContext,
+              xaxis,
+              yaxis
+            ) {
+              var id = x.shinyEvents.selection.inputId;
+              if (apexcharter.isDatetimeAxis(chartContext)) {
+                id = id + ":apex_datetime";
+              }
+              var selectionValue;
+              if (x.shinyEvents.selection.type === "x") {
+                selectionValue = { x: xaxis.xaxis };
+              } else if (x.shinyEvents.selection.type === "xy") {
+                selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
+              } else if (x.shinyEvents.selection.type === "y") {
+                selectionValue = { y: apexcharter.getYaxis(xaxis) };
+              }
+              Shiny.setInputValue(id, selectionValue);
+            };
+          }
+        }
+
+        // Generate or update chart
+        if (apexchart === null) {
+          apexchart = new ApexCharts(el, axOpts);
+          apexchart.render().then(function() {
+            apexcharter.exportChart(x, apexchart);
+          });
+        } else {
+          if (x.auto_update) {
+            //console.log(x.auto_update);
+            if (x.auto_update.update_options) {
+              var options = Object.assign({}, axOpts);
+              delete options.series;
+              delete options.chart.width;
+              delete options.chart.height;
+              apexchart
+                .updateOptions(
+                  options,
+                  x.auto_update.options_redrawPaths,
+                  x.auto_update.options_animate,
+                  x.auto_update.update_synced_charts
+                );
+            }
+            apexchart
+              .updateSeries(axOpts.series, x.auto_update.series_animate)
+              .then(function(chart) {
+                apexcharter.exportChart(x, chart);
+              });
+          } else {
+            apexchart.destroy();
+            apexchart = new ApexCharts(el, axOpts);
+            apexchart.render().then(function() {
+              apexcharter.exportChart(x, apexchart);
+            });
+          }
+        }
+      },
+
+      getChart: function() {
+        return apexchart;
+      },
+
+      resize: function(width, height) {
+        apexchart.updateOptions({
+          chart: {
+            width: width,
+            height: height
+          }
+        });
+      }
+    };
+  }
+});
+
+if (HTMLWidgets.shinyMode) {
+  // update serie
+  Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
+    var chart = apexcharter.getWidget(obj.id);
+    if (typeof chart != "undefined") {
+      chart.updateSeries(
+        [
+          {
+            data: obj.data.newSeries
+          }
+        ],
+        obj.data.animate
+      );
+    }
+  });
+
+  // update options
+  Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
+    var chart = apexcharter.getWidget(obj.id);
+    if (typeof chart != "undefined") {
+      var options = obj.data.options;
+      var evals = obj.data.evals;
+      if (!(evals instanceof Array)) evals = [evals];
+      for (var k = 0; evals && k < evals.length; k++) {
+          window.HTMLWidgets.evaluateStringMember(options, evals[k]);
+      }
+      chart.updateOptions(options);
+    }
+  });
+
+  // toggle series
+  Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
+    var chart = apexcharter.getWidget(obj.id);
+    if (typeof chart != "undefined") {
+      var seriesName = obj.data.seriesName;
+      for(var i = 0; i < seriesName.length; i++) {
+        chart.toggleSeries(seriesName[i]);
+      }
+    }
+  });
+}
+
diff --git a/docs/articles/chart-options.html b/docs/articles/chart-options.html
index 1107a45..19b4397 100644
--- a/docs/articles/chart-options.html
+++ b/docs/articles/chart-options.html
@@ -84,11 +84,11 @@
       
       
       
     

 
@@ -155,7 +155,7 @@
       
 
       
-

+

   

     

       
Chart options

@@ -188,8 +188,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.

 

 

 

@@ -197,8 +197,8 @@
 
 apex(data = diamonds, type = "column", mapping = aes(x = cut)) %>% 
   ax_title(text = "Cut distribution")

-

-
You can set some options, for example:

+

+
You can set some options, for example:

 
 apex(data = diamonds, type = "column", mapping = aes(x = cut)) %>% 
   ax_title(
@@ -206,8 +206,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/

 

 

 

@@ -216,8 +216,8 @@
 apex(data = diamonds, type = "column", mapping = aes(x = cut)) %>% 
   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 = diamonds, type = "column", mapping = aes(x = cut)) %>% 
   ax_title(
@@ -230,8 +230,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/

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

-
-

With some options:

+
+

With some options:

 apex(data = diamonds, type = "column", mapping = aes(x = cut)) %>% 
   ax_yaxis(title = list(
@@ -252,8 +252,8 @@
     text = "Cut", 
     style = list(fontSize = "14px", color = "#BDBDBD")
   ))
-
- +
+
@@ -273,18 +273,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")
-
- +
+

@@ -304,23 +304,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)
-
- +
+

@@ -329,14 +329,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)
-
- +
+

@@ -347,13 +347,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-binding-0.2.0/apexcharter.js b/docs/articles/chart-options_files/apexcharter-binding-0.2.0/apexcharter.js new file mode 100644 index 0000000..7548d5e --- /dev/null +++ b/docs/articles/chart-options_files/apexcharter-binding-0.2.0/apexcharter.js @@ -0,0 +1,356 @@ +/*! + * + * htmlwidgets bindings for ApexCharts + * https://github.com/dreamRs/apexcharter + * + */ + +/*global HTMLWidgets, ApexCharts, Shiny */ + +/// Functions + +// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd) +var apexcharter = { + getWidget: function(id) { + var htmlWidgetsObj = HTMLWidgets.find("#" + id); + var widgetObj; + if (typeof htmlWidgetsObj !== "undefined") { + widgetObj = htmlWidgetsObj.getChart(); + } + return widgetObj; + }, + + isSingleSerie: function(options) { + var typeLabels = ["pie", "radialBar", "donut"]; + var lab = typeLabels.indexOf(options.w.config.chart.type) > -1; + var single = options.w.config.series.length === 1; + return lab | single; + }, + + isDatetimeAxis: function(chartContext) { + if ( + chartContext.hasOwnProperty("w") && + chartContext.w.hasOwnProperty("config") && + chartContext.w.config.hasOwnProperty("xaxis") && + chartContext.w.config.xaxis.hasOwnProperty("type") + ) { + return chartContext.w.config.xaxis.type == "datetime"; + } else { + return false; + } + }, + + getSelection: function(chartContext, selectedDataPoints, serieIndex) { + var typeLabels = ["pie", "radialBar", "donut"]; + var typeXY = ["scatter", "bubble"]; + var selected; + if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) { + var labels = chartContext.opts.labels; + selected = selectedDataPoints[serieIndex].map(function(index) { + return labels[index]; + }); + } else { + var data = chartContext.opts.series[serieIndex].data; + selected = selectedDataPoints[serieIndex].map(function(index) { + var val = data[index]; + if (typeXY.indexOf(chartContext.opts.chart.type) < 0) { + if (val.hasOwnProperty("x")) { + val = val.x; + } else { + val = val[0]; + } + } + return val; + }); + } + //console.log(selected); + if (typeXY.indexOf(chartContext.opts.chart.type) > -1) { + selected = { + x: selected.map(function(obj) { + return obj.x; + }), + y: selected.map(function(obj) { + return obj.y; + }) + }; + } + if (typeof selected == "undefined") { + selected = null; + } + return selected; + }, + + getYaxis: function(axis) { + var yzoom = { min: null, max: null }; + if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) { + var y_axis; + if (axis.yaxis.hasOwnProperty("min")) { + y_axis = axis.yaxis; + } else { + y_axis = axis.yaxis[0]; + } + if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") { + yzoom.min = y_axis.min; + } + if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") { + yzoom.max = y_axis.max; + } + } + return yzoom; + }, + + getXaxis: function(axis) { + var xzoom = { min: null, max: null }; + if (typeof axis.xaxis !== "undefined") { + var x_axis = axis.xaxis; + if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") { + xzoom.min = x_axis.min; + } + if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") { + xzoom.max = x_axis.max; + } + } + return xzoom; + }, + + exportChart: function(x, chart) { + if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) { + if (x.shinyEvents.hasOwnProperty("export")) { + setTimeout(function() { + chart.dataURI().then(function(imgURI) { + Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI); + }); + }, 1000); + } + } + } +}; + +/// Widget + +HTMLWidgets.widget({ + name: "apexcharter", + + type: "output", + + factory: function(el, width, height) { + var axOpts; + var apexchart = null; + + return { + renderValue: function(x) { + // Global options + axOpts = x.ax_opts; + + if (x.sparkbox) { + el.style.background = x.sparkbox.background; + el.classList.add("apexcharter-spark-box"); + } + + // Sizing + if (typeof axOpts.chart === "undefined") { + axOpts.chart = {}; + } + axOpts.chart.width = el.clientWidth; + axOpts.chart.height = el.clientHeight; + if (!axOpts.chart.hasOwnProperty("id")) { + axOpts.chart.id = el.id; + } + if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) { + axOpts.chart.parentHeightOffset = 0; + } + + // added events to remove minheight container + if (!axOpts.chart.hasOwnProperty("events")) { + axOpts.chart.events = {}; + } + if (!axOpts.chart.events.hasOwnProperty("mounted")) { + axOpts.chart.events.mounted = function(chartContext, config) { + el.style.minHeight = 0; + }; + } + if (!axOpts.chart.events.hasOwnProperty("updated")) { + axOpts.chart.events.updated = function(chartContext, config) { + el.style.minHeight = 0; + }; + } + + if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) { + if (!axOpts.hasOwnProperty("chart")) { + axOpts.chart = {}; + } + if (!axOpts.chart.hasOwnProperty("events")) { + axOpts.chart.events = {}; + } + if (x.shinyEvents.hasOwnProperty("click")) { + axOpts.chart.events.dataPointSelection = function( + event, + chartContext, + opts + ) { + var options = opts; + var nonEmpty = opts.selectedDataPoints.filter(function(el) { + return el !== null && el.length > 0; + }); + if (nonEmpty.length > 0) { + var select = {}; + for (var i = 0; i < opts.selectedDataPoints.length; i++) { + if (typeof opts.selectedDataPoints[i] === "undefined") { + continue; + } + var selection = apexcharter.getSelection( + chartContext, + options.selectedDataPoints, + i + ); + if (selection !== null) { + if (opts.w.config.series[i].hasOwnProperty("name")) { + var name = opts.w.config.series[i].name; + select[name] = selection; + } else { + select[i] = selection; + } + } + } + if (apexcharter.isSingleSerie(options)) { + select = select[Object.keys(select)[0]]; + } + Shiny.setInputValue( + x.shinyEvents.click.inputId + ":apex_click", + { value: select, datetime: apexcharter.isDatetimeAxis(chartContext) } + ); + } else { + Shiny.setInputValue(x.shinyEvents.click.inputId, null); + } + }; + } + if (x.shinyEvents.hasOwnProperty("zoomed")) { + axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) { + var id = x.shinyEvents.zoomed.inputId; + if (apexcharter.isDatetimeAxis(chartContext)) { + id = id + ":apex_datetime"; + } + Shiny.setInputValue(id, { + x: apexcharter.getXaxis(xaxis), + y: apexcharter.getYaxis(xaxis) + }); + }; + } + if (x.shinyEvents.hasOwnProperty("selection")) { + axOpts.chart.events.selection = function( + chartContext, + xaxis, + yaxis + ) { + var id = x.shinyEvents.selection.inputId; + if (apexcharter.isDatetimeAxis(chartContext)) { + id = id + ":apex_datetime"; + } + var selectionValue; + if (x.shinyEvents.selection.type === "x") { + selectionValue = { x: xaxis.xaxis }; + } else if (x.shinyEvents.selection.type === "xy") { + selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) }; + } else if (x.shinyEvents.selection.type === "y") { + selectionValue = { y: apexcharter.getYaxis(xaxis) }; + } + Shiny.setInputValue(id, selectionValue); + }; + } + } + + // Generate or update chart + if (apexchart === null) { + apexchart = new ApexCharts(el, axOpts); + apexchart.render().then(function() { + apexcharter.exportChart(x, apexchart); + }); + } else { + if (x.auto_update) { + //console.log(x.auto_update); + if (x.auto_update.update_options) { + var options = Object.assign({}, axOpts); + delete options.series; + delete options.chart.width; + delete options.chart.height; + apexchart + .updateOptions( + options, + x.auto_update.options_redrawPaths, + x.auto_update.options_animate, + x.auto_update.update_synced_charts + ); + } + apexchart + .updateSeries(axOpts.series, x.auto_update.series_animate) + .then(function(chart) { + apexcharter.exportChart(x, chart); + }); + } else { + apexchart.destroy(); + apexchart = new ApexCharts(el, axOpts); + apexchart.render().then(function() { + apexcharter.exportChart(x, apexchart); + }); + } + } + }, + + getChart: function() { + return apexchart; + }, + + resize: function(width, height) { + apexchart.updateOptions({ + chart: { + width: width, + height: height + } + }); + } + }; + } +}); + +if (HTMLWidgets.shinyMode) { + // update serie + Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + chart.updateSeries( + [ + { + data: obj.data.newSeries + } + ], + obj.data.animate + ); + } + }); + + // update options + Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + var options = obj.data.options; + var evals = obj.data.evals; + if (!(evals instanceof Array)) evals = [evals]; + for (var k = 0; evals && k < evals.length; k++) { + window.HTMLWidgets.evaluateStringMember(options, evals[k]); + } + chart.updateOptions(options); + } + }); + + // toggle series + Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + var seriesName = obj.data.seriesName; + for(var i = 0; i < seriesName.length; i++) { + chart.toggleSeries(seriesName[i]); + } + } + }); +} + diff --git a/docs/articles/facets.html b/docs/articles/facets.html index 75eec36..65771fa 100644 --- a/docs/articles/facets.html +++ b/docs/articles/facets.html @@ -84,11 +84,11 @@ @@ -155,7 +155,7 @@ -
+

Facets: grid of charts

@@ -205,10 +205,10 @@
Facet wrap example
mpg data from ggplot2
-
-
-
-
engine displacement, in litres
+
+
+
+
engine displacement, in litres
city miles per gallon

Synchronized line charts with free y-axis :

@@ -227,12 +227,12 @@ 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.

@@ -259,15 +259,15 @@
1999
2008
-
-
-
4
-
-
-
f
-
-
-
r
+
+
+
4
+
+
+
f
+
+
+
r
engine displacement, in litres
city miles per gallon
@@ -295,16 +295,16 @@ )
-
- +
+
-
- +
+
-
- +
+

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-binding-0.2.0/apexcharter.js b/docs/articles/facets_files/apexcharter-binding-0.2.0/apexcharter.js new file mode 100644 index 0000000..7548d5e --- /dev/null +++ b/docs/articles/facets_files/apexcharter-binding-0.2.0/apexcharter.js @@ -0,0 +1,356 @@ +/*! + * + * htmlwidgets bindings for ApexCharts + * https://github.com/dreamRs/apexcharter + * + */ + +/*global HTMLWidgets, ApexCharts, Shiny */ + +/// Functions + +// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd) +var apexcharter = { + getWidget: function(id) { + var htmlWidgetsObj = HTMLWidgets.find("#" + id); + var widgetObj; + if (typeof htmlWidgetsObj !== "undefined") { + widgetObj = htmlWidgetsObj.getChart(); + } + return widgetObj; + }, + + isSingleSerie: function(options) { + var typeLabels = ["pie", "radialBar", "donut"]; + var lab = typeLabels.indexOf(options.w.config.chart.type) > -1; + var single = options.w.config.series.length === 1; + return lab | single; + }, + + isDatetimeAxis: function(chartContext) { + if ( + chartContext.hasOwnProperty("w") && + chartContext.w.hasOwnProperty("config") && + chartContext.w.config.hasOwnProperty("xaxis") && + chartContext.w.config.xaxis.hasOwnProperty("type") + ) { + return chartContext.w.config.xaxis.type == "datetime"; + } else { + return false; + } + }, + + getSelection: function(chartContext, selectedDataPoints, serieIndex) { + var typeLabels = ["pie", "radialBar", "donut"]; + var typeXY = ["scatter", "bubble"]; + var selected; + if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) { + var labels = chartContext.opts.labels; + selected = selectedDataPoints[serieIndex].map(function(index) { + return labels[index]; + }); + } else { + var data = chartContext.opts.series[serieIndex].data; + selected = selectedDataPoints[serieIndex].map(function(index) { + var val = data[index]; + if (typeXY.indexOf(chartContext.opts.chart.type) < 0) { + if (val.hasOwnProperty("x")) { + val = val.x; + } else { + val = val[0]; + } + } + return val; + }); + } + //console.log(selected); + if (typeXY.indexOf(chartContext.opts.chart.type) > -1) { + selected = { + x: selected.map(function(obj) { + return obj.x; + }), + y: selected.map(function(obj) { + return obj.y; + }) + }; + } + if (typeof selected == "undefined") { + selected = null; + } + return selected; + }, + + getYaxis: function(axis) { + var yzoom = { min: null, max: null }; + if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) { + var y_axis; + if (axis.yaxis.hasOwnProperty("min")) { + y_axis = axis.yaxis; + } else { + y_axis = axis.yaxis[0]; + } + if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") { + yzoom.min = y_axis.min; + } + if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") { + yzoom.max = y_axis.max; + } + } + return yzoom; + }, + + getXaxis: function(axis) { + var xzoom = { min: null, max: null }; + if (typeof axis.xaxis !== "undefined") { + var x_axis = axis.xaxis; + if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") { + xzoom.min = x_axis.min; + } + if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") { + xzoom.max = x_axis.max; + } + } + return xzoom; + }, + + exportChart: function(x, chart) { + if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) { + if (x.shinyEvents.hasOwnProperty("export")) { + setTimeout(function() { + chart.dataURI().then(function(imgURI) { + Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI); + }); + }, 1000); + } + } + } +}; + +/// Widget + +HTMLWidgets.widget({ + name: "apexcharter", + + type: "output", + + factory: function(el, width, height) { + var axOpts; + var apexchart = null; + + return { + renderValue: function(x) { + // Global options + axOpts = x.ax_opts; + + if (x.sparkbox) { + el.style.background = x.sparkbox.background; + el.classList.add("apexcharter-spark-box"); + } + + // Sizing + if (typeof axOpts.chart === "undefined") { + axOpts.chart = {}; + } + axOpts.chart.width = el.clientWidth; + axOpts.chart.height = el.clientHeight; + if (!axOpts.chart.hasOwnProperty("id")) { + axOpts.chart.id = el.id; + } + if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) { + axOpts.chart.parentHeightOffset = 0; + } + + // added events to remove minheight container + if (!axOpts.chart.hasOwnProperty("events")) { + axOpts.chart.events = {}; + } + if (!axOpts.chart.events.hasOwnProperty("mounted")) { + axOpts.chart.events.mounted = function(chartContext, config) { + el.style.minHeight = 0; + }; + } + if (!axOpts.chart.events.hasOwnProperty("updated")) { + axOpts.chart.events.updated = function(chartContext, config) { + el.style.minHeight = 0; + }; + } + + if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) { + if (!axOpts.hasOwnProperty("chart")) { + axOpts.chart = {}; + } + if (!axOpts.chart.hasOwnProperty("events")) { + axOpts.chart.events = {}; + } + if (x.shinyEvents.hasOwnProperty("click")) { + axOpts.chart.events.dataPointSelection = function( + event, + chartContext, + opts + ) { + var options = opts; + var nonEmpty = opts.selectedDataPoints.filter(function(el) { + return el !== null && el.length > 0; + }); + if (nonEmpty.length > 0) { + var select = {}; + for (var i = 0; i < opts.selectedDataPoints.length; i++) { + if (typeof opts.selectedDataPoints[i] === "undefined") { + continue; + } + var selection = apexcharter.getSelection( + chartContext, + options.selectedDataPoints, + i + ); + if (selection !== null) { + if (opts.w.config.series[i].hasOwnProperty("name")) { + var name = opts.w.config.series[i].name; + select[name] = selection; + } else { + select[i] = selection; + } + } + } + if (apexcharter.isSingleSerie(options)) { + select = select[Object.keys(select)[0]]; + } + Shiny.setInputValue( + x.shinyEvents.click.inputId + ":apex_click", + { value: select, datetime: apexcharter.isDatetimeAxis(chartContext) } + ); + } else { + Shiny.setInputValue(x.shinyEvents.click.inputId, null); + } + }; + } + if (x.shinyEvents.hasOwnProperty("zoomed")) { + axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) { + var id = x.shinyEvents.zoomed.inputId; + if (apexcharter.isDatetimeAxis(chartContext)) { + id = id + ":apex_datetime"; + } + Shiny.setInputValue(id, { + x: apexcharter.getXaxis(xaxis), + y: apexcharter.getYaxis(xaxis) + }); + }; + } + if (x.shinyEvents.hasOwnProperty("selection")) { + axOpts.chart.events.selection = function( + chartContext, + xaxis, + yaxis + ) { + var id = x.shinyEvents.selection.inputId; + if (apexcharter.isDatetimeAxis(chartContext)) { + id = id + ":apex_datetime"; + } + var selectionValue; + if (x.shinyEvents.selection.type === "x") { + selectionValue = { x: xaxis.xaxis }; + } else if (x.shinyEvents.selection.type === "xy") { + selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) }; + } else if (x.shinyEvents.selection.type === "y") { + selectionValue = { y: apexcharter.getYaxis(xaxis) }; + } + Shiny.setInputValue(id, selectionValue); + }; + } + } + + // Generate or update chart + if (apexchart === null) { + apexchart = new ApexCharts(el, axOpts); + apexchart.render().then(function() { + apexcharter.exportChart(x, apexchart); + }); + } else { + if (x.auto_update) { + //console.log(x.auto_update); + if (x.auto_update.update_options) { + var options = Object.assign({}, axOpts); + delete options.series; + delete options.chart.width; + delete options.chart.height; + apexchart + .updateOptions( + options, + x.auto_update.options_redrawPaths, + x.auto_update.options_animate, + x.auto_update.update_synced_charts + ); + } + apexchart + .updateSeries(axOpts.series, x.auto_update.series_animate) + .then(function(chart) { + apexcharter.exportChart(x, chart); + }); + } else { + apexchart.destroy(); + apexchart = new ApexCharts(el, axOpts); + apexchart.render().then(function() { + apexcharter.exportChart(x, apexchart); + }); + } + } + }, + + getChart: function() { + return apexchart; + }, + + resize: function(width, height) { + apexchart.updateOptions({ + chart: { + width: width, + height: height + } + }); + } + }; + } +}); + +if (HTMLWidgets.shinyMode) { + // update serie + Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + chart.updateSeries( + [ + { + data: obj.data.newSeries + } + ], + obj.data.animate + ); + } + }); + + // update options + Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + var options = obj.data.options; + var evals = obj.data.evals; + if (!(evals instanceof Array)) evals = [evals]; + for (var k = 0; evals && k < evals.length; k++) { + window.HTMLWidgets.evaluateStringMember(options, evals[k]); + } + chart.updateOptions(options); + } + }); + + // toggle series + Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + var seriesName = obj.data.seriesName; + for(var i = 0; i < seriesName.length; i++) { + chart.toggleSeries(seriesName[i]); + } + } + }); +} + diff --git a/docs/articles/index.html b/docs/articles/index.html index b92168c..0e8b7e0 100644 --- a/docs/articles/index.html +++ b/docs/articles/index.html @@ -149,11 +149,11 @@ diff --git a/docs/articles/shiny-integration.html b/docs/articles/shiny-integration.html index 7e09a51..3300598 100644 --- a/docs/articles/shiny-integration.html +++ b/docs/articles/shiny-integration.html @@ -84,11 +84,11 @@ @@ -155,7 +155,7 @@ -
+

Shiny integration

@@ -231,8 +231,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 :

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

More examples are available with:

+
+

More examples are available with:

 run_input_demo("click")
@@ -270,8 +270,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"
@@ -298,8 +298,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"
@@ -314,13 +314,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-binding-0.2.0/apexcharter.js b/docs/articles/shiny-integration_files/apexcharter-binding-0.2.0/apexcharter.js
new file mode 100644
index 0000000..7548d5e
--- /dev/null
+++ b/docs/articles/shiny-integration_files/apexcharter-binding-0.2.0/apexcharter.js
@@ -0,0 +1,356 @@
+/*!
+ *
+ * htmlwidgets bindings for ApexCharts
+ * https://github.com/dreamRs/apexcharter
+ *
+ */
+
+/*global HTMLWidgets, ApexCharts, Shiny */
+
+/// Functions
+
+// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
+var apexcharter = {
+  getWidget: function(id) {
+    var htmlWidgetsObj = HTMLWidgets.find("#" + id);
+    var widgetObj;
+    if (typeof htmlWidgetsObj !== "undefined") {
+      widgetObj = htmlWidgetsObj.getChart();
+    }
+    return widgetObj;
+  },
+
+  isSingleSerie: function(options) {
+    var typeLabels = ["pie", "radialBar", "donut"];
+    var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
+    var single = options.w.config.series.length === 1;
+    return lab | single;
+  },
+
+  isDatetimeAxis: function(chartContext) {
+    if (
+      chartContext.hasOwnProperty("w") &&
+      chartContext.w.hasOwnProperty("config") &&
+      chartContext.w.config.hasOwnProperty("xaxis") &&
+      chartContext.w.config.xaxis.hasOwnProperty("type")
+    ) {
+      return chartContext.w.config.xaxis.type == "datetime";
+    } else {
+      return false;
+    }
+  },
+
+  getSelection: function(chartContext, selectedDataPoints, serieIndex) {
+    var typeLabels = ["pie", "radialBar", "donut"];
+    var typeXY = ["scatter", "bubble"];
+    var selected;
+    if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
+      var labels = chartContext.opts.labels;
+      selected = selectedDataPoints[serieIndex].map(function(index) {
+        return labels[index];
+      });
+    } else {
+      var data = chartContext.opts.series[serieIndex].data;
+      selected = selectedDataPoints[serieIndex].map(function(index) {
+        var val = data[index];
+        if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
+          if (val.hasOwnProperty("x")) {
+            val = val.x;
+          } else {
+            val = val[0];
+          }
+        }
+        return val;
+      });
+    }
+    //console.log(selected);
+    if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
+      selected = {
+        x: selected.map(function(obj) {
+          return obj.x;
+        }),
+        y: selected.map(function(obj) {
+          return obj.y;
+        })
+      };
+    }
+    if (typeof selected == "undefined") {
+      selected = null;
+    }
+    return selected;
+  },
+
+  getYaxis: function(axis) {
+    var yzoom = { min: null, max: null };
+    if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
+      var y_axis;
+      if (axis.yaxis.hasOwnProperty("min")) {
+        y_axis = axis.yaxis;
+      } else {
+        y_axis = axis.yaxis[0];
+      }
+      if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
+        yzoom.min = y_axis.min;
+      }
+      if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
+        yzoom.max = y_axis.max;
+      }
+    }
+    return yzoom;
+  },
+
+  getXaxis: function(axis) {
+    var xzoom = { min: null, max: null };
+    if (typeof axis.xaxis !== "undefined") {
+      var x_axis = axis.xaxis;
+      if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
+        xzoom.min = x_axis.min;
+      }
+      if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
+        xzoom.max = x_axis.max;
+      }
+    }
+    return xzoom;
+  },
+
+  exportChart: function(x, chart) {
+    if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
+      if (x.shinyEvents.hasOwnProperty("export")) {
+        setTimeout(function() {
+          chart.dataURI().then(function(imgURI) {
+            Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
+          });
+        }, 1000);
+      }
+    }
+  }
+};
+
+/// Widget
+
+HTMLWidgets.widget({
+  name: "apexcharter",
+
+  type: "output",
+
+  factory: function(el, width, height) {
+    var axOpts;
+    var apexchart = null;
+
+    return {
+      renderValue: function(x) {
+        // Global options
+        axOpts = x.ax_opts;
+
+        if (x.sparkbox) {
+          el.style.background = x.sparkbox.background;
+          el.classList.add("apexcharter-spark-box");
+        }
+
+        // Sizing
+        if (typeof axOpts.chart === "undefined") {
+          axOpts.chart = {};
+        }
+        axOpts.chart.width = el.clientWidth;
+        axOpts.chart.height = el.clientHeight;
+        if (!axOpts.chart.hasOwnProperty("id")) {
+          axOpts.chart.id = el.id;
+        }
+        if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) {
+          axOpts.chart.parentHeightOffset = 0;
+        }
+
+        // added events to remove minheight container
+        if (!axOpts.chart.hasOwnProperty("events")) {
+          axOpts.chart.events = {};
+        }
+        if (!axOpts.chart.events.hasOwnProperty("mounted")) {
+          axOpts.chart.events.mounted = function(chartContext, config) {
+            el.style.minHeight = 0;
+          };
+        }
+        if (!axOpts.chart.events.hasOwnProperty("updated")) {
+          axOpts.chart.events.updated = function(chartContext, config) {
+            el.style.minHeight = 0;
+          };
+        }
+
+        if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
+          if (!axOpts.hasOwnProperty("chart")) {
+            axOpts.chart = {};
+          }
+          if (!axOpts.chart.hasOwnProperty("events")) {
+            axOpts.chart.events = {};
+          }
+          if (x.shinyEvents.hasOwnProperty("click")) {
+            axOpts.chart.events.dataPointSelection = function(
+              event,
+              chartContext,
+              opts
+            ) {
+              var options = opts;
+              var nonEmpty = opts.selectedDataPoints.filter(function(el) {
+                return el !== null && el.length > 0;
+              });
+              if (nonEmpty.length > 0) {
+                var select = {};
+                for (var i = 0; i < opts.selectedDataPoints.length; i++) {
+                  if (typeof opts.selectedDataPoints[i] === "undefined") {
+                    continue;
+                  }
+                  var selection = apexcharter.getSelection(
+                    chartContext,
+                    options.selectedDataPoints,
+                    i
+                  );
+                  if (selection !== null) {
+                    if (opts.w.config.series[i].hasOwnProperty("name")) {
+                      var name = opts.w.config.series[i].name;
+                      select[name] = selection;
+                    } else {
+                      select[i] = selection;
+                    }
+                  }
+                }
+                if (apexcharter.isSingleSerie(options)) {
+                  select = select[Object.keys(select)[0]];
+                }
+                Shiny.setInputValue(
+                  x.shinyEvents.click.inputId + ":apex_click",
+                  { value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
+                );
+              } else {
+                Shiny.setInputValue(x.shinyEvents.click.inputId, null);
+              }
+            };
+          }
+          if (x.shinyEvents.hasOwnProperty("zoomed")) {
+            axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
+              var id = x.shinyEvents.zoomed.inputId;
+              if (apexcharter.isDatetimeAxis(chartContext)) {
+                id = id + ":apex_datetime";
+              }
+              Shiny.setInputValue(id, {
+                x: apexcharter.getXaxis(xaxis),
+                y: apexcharter.getYaxis(xaxis)
+              });
+            };
+          }
+          if (x.shinyEvents.hasOwnProperty("selection")) {
+            axOpts.chart.events.selection = function(
+              chartContext,
+              xaxis,
+              yaxis
+            ) {
+              var id = x.shinyEvents.selection.inputId;
+              if (apexcharter.isDatetimeAxis(chartContext)) {
+                id = id + ":apex_datetime";
+              }
+              var selectionValue;
+              if (x.shinyEvents.selection.type === "x") {
+                selectionValue = { x: xaxis.xaxis };
+              } else if (x.shinyEvents.selection.type === "xy") {
+                selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
+              } else if (x.shinyEvents.selection.type === "y") {
+                selectionValue = { y: apexcharter.getYaxis(xaxis) };
+              }
+              Shiny.setInputValue(id, selectionValue);
+            };
+          }
+        }
+
+        // Generate or update chart
+        if (apexchart === null) {
+          apexchart = new ApexCharts(el, axOpts);
+          apexchart.render().then(function() {
+            apexcharter.exportChart(x, apexchart);
+          });
+        } else {
+          if (x.auto_update) {
+            //console.log(x.auto_update);
+            if (x.auto_update.update_options) {
+              var options = Object.assign({}, axOpts);
+              delete options.series;
+              delete options.chart.width;
+              delete options.chart.height;
+              apexchart
+                .updateOptions(
+                  options,
+                  x.auto_update.options_redrawPaths,
+                  x.auto_update.options_animate,
+                  x.auto_update.update_synced_charts
+                );
+            }
+            apexchart
+              .updateSeries(axOpts.series, x.auto_update.series_animate)
+              .then(function(chart) {
+                apexcharter.exportChart(x, chart);
+              });
+          } else {
+            apexchart.destroy();
+            apexchart = new ApexCharts(el, axOpts);
+            apexchart.render().then(function() {
+              apexcharter.exportChart(x, apexchart);
+            });
+          }
+        }
+      },
+
+      getChart: function() {
+        return apexchart;
+      },
+
+      resize: function(width, height) {
+        apexchart.updateOptions({
+          chart: {
+            width: width,
+            height: height
+          }
+        });
+      }
+    };
+  }
+});
+
+if (HTMLWidgets.shinyMode) {
+  // update serie
+  Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
+    var chart = apexcharter.getWidget(obj.id);
+    if (typeof chart != "undefined") {
+      chart.updateSeries(
+        [
+          {
+            data: obj.data.newSeries
+          }
+        ],
+        obj.data.animate
+      );
+    }
+  });
+
+  // update options
+  Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
+    var chart = apexcharter.getWidget(obj.id);
+    if (typeof chart != "undefined") {
+      var options = obj.data.options;
+      var evals = obj.data.evals;
+      if (!(evals instanceof Array)) evals = [evals];
+      for (var k = 0; evals && k < evals.length; k++) {
+          window.HTMLWidgets.evaluateStringMember(options, evals[k]);
+      }
+      chart.updateOptions(options);
+    }
+  });
+
+  // toggle series
+  Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
+    var chart = apexcharter.getWidget(obj.id);
+    if (typeof chart != "undefined") {
+      var seriesName = obj.data.seriesName;
+      for(var i = 0; i < seriesName.length; i++) {
+        chart.toggleSeries(seriesName[i]);
+      }
+    }
+  });
+}
+
diff --git a/docs/articles/spark-box.html b/docs/articles/spark-box.html
index 5fc589d..72938c3 100644
--- a/docs/articles/spark-box.html
+++ b/docs/articles/spark-box.html
@@ -84,11 +84,11 @@
       
       
       
     
 
@@ -155,7 +155,7 @@
       
 
       
-

+

   

     

       
Spark boxes

@@ -184,8 +184,8 @@
   title = mean(spark_data$var1), 
   subtitle = "Variable 1"
 )

-

-
With more styles :

+

+
With more styles :

 
 spark_box(
   data = spark_data,
@@ -195,8 +195,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-binding-0.2.0/apexcharter.js b/docs/articles/spark-box_files/apexcharter-binding-0.2.0/apexcharter.js
new file mode 100644
index 0000000..7548d5e
--- /dev/null
+++ b/docs/articles/spark-box_files/apexcharter-binding-0.2.0/apexcharter.js
@@ -0,0 +1,356 @@
+/*!
+ *
+ * htmlwidgets bindings for ApexCharts
+ * https://github.com/dreamRs/apexcharter
+ *
+ */
+
+/*global HTMLWidgets, ApexCharts, Shiny */
+
+/// Functions
+
+// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
+var apexcharter = {
+  getWidget: function(id) {
+    var htmlWidgetsObj = HTMLWidgets.find("#" + id);
+    var widgetObj;
+    if (typeof htmlWidgetsObj !== "undefined") {
+      widgetObj = htmlWidgetsObj.getChart();
+    }
+    return widgetObj;
+  },
+
+  isSingleSerie: function(options) {
+    var typeLabels = ["pie", "radialBar", "donut"];
+    var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
+    var single = options.w.config.series.length === 1;
+    return lab | single;
+  },
+
+  isDatetimeAxis: function(chartContext) {
+    if (
+      chartContext.hasOwnProperty("w") &&
+      chartContext.w.hasOwnProperty("config") &&
+      chartContext.w.config.hasOwnProperty("xaxis") &&
+      chartContext.w.config.xaxis.hasOwnProperty("type")
+    ) {
+      return chartContext.w.config.xaxis.type == "datetime";
+    } else {
+      return false;
+    }
+  },
+
+  getSelection: function(chartContext, selectedDataPoints, serieIndex) {
+    var typeLabels = ["pie", "radialBar", "donut"];
+    var typeXY = ["scatter", "bubble"];
+    var selected;
+    if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
+      var labels = chartContext.opts.labels;
+      selected = selectedDataPoints[serieIndex].map(function(index) {
+        return labels[index];
+      });
+    } else {
+      var data = chartContext.opts.series[serieIndex].data;
+      selected = selectedDataPoints[serieIndex].map(function(index) {
+        var val = data[index];
+        if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
+          if (val.hasOwnProperty("x")) {
+            val = val.x;
+          } else {
+            val = val[0];
+          }
+        }
+        return val;
+      });
+    }
+    //console.log(selected);
+    if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
+      selected = {
+        x: selected.map(function(obj) {
+          return obj.x;
+        }),
+        y: selected.map(function(obj) {
+          return obj.y;
+        })
+      };
+    }
+    if (typeof selected == "undefined") {
+      selected = null;
+    }
+    return selected;
+  },
+
+  getYaxis: function(axis) {
+    var yzoom = { min: null, max: null };
+    if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
+      var y_axis;
+      if (axis.yaxis.hasOwnProperty("min")) {
+        y_axis = axis.yaxis;
+      } else {
+        y_axis = axis.yaxis[0];
+      }
+      if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
+        yzoom.min = y_axis.min;
+      }
+      if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
+        yzoom.max = y_axis.max;
+      }
+    }
+    return yzoom;
+  },
+
+  getXaxis: function(axis) {
+    var xzoom = { min: null, max: null };
+    if (typeof axis.xaxis !== "undefined") {
+      var x_axis = axis.xaxis;
+      if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
+        xzoom.min = x_axis.min;
+      }
+      if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
+        xzoom.max = x_axis.max;
+      }
+    }
+    return xzoom;
+  },
+
+  exportChart: function(x, chart) {
+    if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
+      if (x.shinyEvents.hasOwnProperty("export")) {
+        setTimeout(function() {
+          chart.dataURI().then(function(imgURI) {
+            Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
+          });
+        }, 1000);
+      }
+    }
+  }
+};
+
+/// Widget
+
+HTMLWidgets.widget({
+  name: "apexcharter",
+
+  type: "output",
+
+  factory: function(el, width, height) {
+    var axOpts;
+    var apexchart = null;
+
+    return {
+      renderValue: function(x) {
+        // Global options
+        axOpts = x.ax_opts;
+
+        if (x.sparkbox) {
+          el.style.background = x.sparkbox.background;
+          el.classList.add("apexcharter-spark-box");
+        }
+
+        // Sizing
+        if (typeof axOpts.chart === "undefined") {
+          axOpts.chart = {};
+        }
+        axOpts.chart.width = el.clientWidth;
+        axOpts.chart.height = el.clientHeight;
+        if (!axOpts.chart.hasOwnProperty("id")) {
+          axOpts.chart.id = el.id;
+        }
+        if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) {
+          axOpts.chart.parentHeightOffset = 0;
+        }
+
+        // added events to remove minheight container
+        if (!axOpts.chart.hasOwnProperty("events")) {
+          axOpts.chart.events = {};
+        }
+        if (!axOpts.chart.events.hasOwnProperty("mounted")) {
+          axOpts.chart.events.mounted = function(chartContext, config) {
+            el.style.minHeight = 0;
+          };
+        }
+        if (!axOpts.chart.events.hasOwnProperty("updated")) {
+          axOpts.chart.events.updated = function(chartContext, config) {
+            el.style.minHeight = 0;
+          };
+        }
+
+        if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
+          if (!axOpts.hasOwnProperty("chart")) {
+            axOpts.chart = {};
+          }
+          if (!axOpts.chart.hasOwnProperty("events")) {
+            axOpts.chart.events = {};
+          }
+          if (x.shinyEvents.hasOwnProperty("click")) {
+            axOpts.chart.events.dataPointSelection = function(
+              event,
+              chartContext,
+              opts
+            ) {
+              var options = opts;
+              var nonEmpty = opts.selectedDataPoints.filter(function(el) {
+                return el !== null && el.length > 0;
+              });
+              if (nonEmpty.length > 0) {
+                var select = {};
+                for (var i = 0; i < opts.selectedDataPoints.length; i++) {
+                  if (typeof opts.selectedDataPoints[i] === "undefined") {
+                    continue;
+                  }
+                  var selection = apexcharter.getSelection(
+                    chartContext,
+                    options.selectedDataPoints,
+                    i
+                  );
+                  if (selection !== null) {
+                    if (opts.w.config.series[i].hasOwnProperty("name")) {
+                      var name = opts.w.config.series[i].name;
+                      select[name] = selection;
+                    } else {
+                      select[i] = selection;
+                    }
+                  }
+                }
+                if (apexcharter.isSingleSerie(options)) {
+                  select = select[Object.keys(select)[0]];
+                }
+                Shiny.setInputValue(
+                  x.shinyEvents.click.inputId + ":apex_click",
+                  { value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
+                );
+              } else {
+                Shiny.setInputValue(x.shinyEvents.click.inputId, null);
+              }
+            };
+          }
+          if (x.shinyEvents.hasOwnProperty("zoomed")) {
+            axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
+              var id = x.shinyEvents.zoomed.inputId;
+              if (apexcharter.isDatetimeAxis(chartContext)) {
+                id = id + ":apex_datetime";
+              }
+              Shiny.setInputValue(id, {
+                x: apexcharter.getXaxis(xaxis),
+                y: apexcharter.getYaxis(xaxis)
+              });
+            };
+          }
+          if (x.shinyEvents.hasOwnProperty("selection")) {
+            axOpts.chart.events.selection = function(
+              chartContext,
+              xaxis,
+              yaxis
+            ) {
+              var id = x.shinyEvents.selection.inputId;
+              if (apexcharter.isDatetimeAxis(chartContext)) {
+                id = id + ":apex_datetime";
+              }
+              var selectionValue;
+              if (x.shinyEvents.selection.type === "x") {
+                selectionValue = { x: xaxis.xaxis };
+              } else if (x.shinyEvents.selection.type === "xy") {
+                selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
+              } else if (x.shinyEvents.selection.type === "y") {
+                selectionValue = { y: apexcharter.getYaxis(xaxis) };
+              }
+              Shiny.setInputValue(id, selectionValue);
+            };
+          }
+        }
+
+        // Generate or update chart
+        if (apexchart === null) {
+          apexchart = new ApexCharts(el, axOpts);
+          apexchart.render().then(function() {
+            apexcharter.exportChart(x, apexchart);
+          });
+        } else {
+          if (x.auto_update) {
+            //console.log(x.auto_update);
+            if (x.auto_update.update_options) {
+              var options = Object.assign({}, axOpts);
+              delete options.series;
+              delete options.chart.width;
+              delete options.chart.height;
+              apexchart
+                .updateOptions(
+                  options,
+                  x.auto_update.options_redrawPaths,
+                  x.auto_update.options_animate,
+                  x.auto_update.update_synced_charts
+                );
+            }
+            apexchart
+              .updateSeries(axOpts.series, x.auto_update.series_animate)
+              .then(function(chart) {
+                apexcharter.exportChart(x, chart);
+              });
+          } else {
+            apexchart.destroy();
+            apexchart = new ApexCharts(el, axOpts);
+            apexchart.render().then(function() {
+              apexcharter.exportChart(x, apexchart);
+            });
+          }
+        }
+      },
+
+      getChart: function() {
+        return apexchart;
+      },
+
+      resize: function(width, height) {
+        apexchart.updateOptions({
+          chart: {
+            width: width,
+            height: height
+          }
+        });
+      }
+    };
+  }
+});
+
+if (HTMLWidgets.shinyMode) {
+  // update serie
+  Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
+    var chart = apexcharter.getWidget(obj.id);
+    if (typeof chart != "undefined") {
+      chart.updateSeries(
+        [
+          {
+            data: obj.data.newSeries
+          }
+        ],
+        obj.data.animate
+      );
+    }
+  });
+
+  // update options
+  Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
+    var chart = apexcharter.getWidget(obj.id);
+    if (typeof chart != "undefined") {
+      var options = obj.data.options;
+      var evals = obj.data.evals;
+      if (!(evals instanceof Array)) evals = [evals];
+      for (var k = 0; evals && k < evals.length; k++) {
+          window.HTMLWidgets.evaluateStringMember(options, evals[k]);
+      }
+      chart.updateOptions(options);
+    }
+  });
+
+  // toggle series
+  Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
+    var chart = apexcharter.getWidget(obj.id);
+    if (typeof chart != "undefined") {
+      var seriesName = obj.data.seriesName;
+      for(var i = 0; i < seriesName.length; i++) {
+        chart.toggleSeries(seriesName[i]);
+      }
+    }
+  });
+}
+
diff --git a/docs/articles/sync-charts.html b/docs/articles/sync-charts.html
index 0535c5e..9c94451 100644
--- a/docs/articles/sync-charts.html
+++ b/docs/articles/sync-charts.html
@@ -84,11 +84,11 @@
       
       
       
     
 
@@ -155,7 +155,7 @@
       
 
       
-

+

   

     

       
Syncing charts

@@ -205,9 +205,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()
@@ -252,9 +252,9 @@ ) %>% ax_xaxis(labels = list(show = FALSE)) %>% ax_yaxis(labels = list(show = FALSE)) -
-
- +
+
+ diff --git a/docs/articles/sync-charts_files/apexcharter-binding-0.2.0/apexcharter.js b/docs/articles/sync-charts_files/apexcharter-binding-0.2.0/apexcharter.js new file mode 100644 index 0000000..7548d5e --- /dev/null +++ b/docs/articles/sync-charts_files/apexcharter-binding-0.2.0/apexcharter.js @@ -0,0 +1,356 @@ +/*! + * + * htmlwidgets bindings for ApexCharts + * https://github.com/dreamRs/apexcharter + * + */ + +/*global HTMLWidgets, ApexCharts, Shiny */ + +/// Functions + +// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd) +var apexcharter = { + getWidget: function(id) { + var htmlWidgetsObj = HTMLWidgets.find("#" + id); + var widgetObj; + if (typeof htmlWidgetsObj !== "undefined") { + widgetObj = htmlWidgetsObj.getChart(); + } + return widgetObj; + }, + + isSingleSerie: function(options) { + var typeLabels = ["pie", "radialBar", "donut"]; + var lab = typeLabels.indexOf(options.w.config.chart.type) > -1; + var single = options.w.config.series.length === 1; + return lab | single; + }, + + isDatetimeAxis: function(chartContext) { + if ( + chartContext.hasOwnProperty("w") && + chartContext.w.hasOwnProperty("config") && + chartContext.w.config.hasOwnProperty("xaxis") && + chartContext.w.config.xaxis.hasOwnProperty("type") + ) { + return chartContext.w.config.xaxis.type == "datetime"; + } else { + return false; + } + }, + + getSelection: function(chartContext, selectedDataPoints, serieIndex) { + var typeLabels = ["pie", "radialBar", "donut"]; + var typeXY = ["scatter", "bubble"]; + var selected; + if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) { + var labels = chartContext.opts.labels; + selected = selectedDataPoints[serieIndex].map(function(index) { + return labels[index]; + }); + } else { + var data = chartContext.opts.series[serieIndex].data; + selected = selectedDataPoints[serieIndex].map(function(index) { + var val = data[index]; + if (typeXY.indexOf(chartContext.opts.chart.type) < 0) { + if (val.hasOwnProperty("x")) { + val = val.x; + } else { + val = val[0]; + } + } + return val; + }); + } + //console.log(selected); + if (typeXY.indexOf(chartContext.opts.chart.type) > -1) { + selected = { + x: selected.map(function(obj) { + return obj.x; + }), + y: selected.map(function(obj) { + return obj.y; + }) + }; + } + if (typeof selected == "undefined") { + selected = null; + } + return selected; + }, + + getYaxis: function(axis) { + var yzoom = { min: null, max: null }; + if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) { + var y_axis; + if (axis.yaxis.hasOwnProperty("min")) { + y_axis = axis.yaxis; + } else { + y_axis = axis.yaxis[0]; + } + if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") { + yzoom.min = y_axis.min; + } + if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") { + yzoom.max = y_axis.max; + } + } + return yzoom; + }, + + getXaxis: function(axis) { + var xzoom = { min: null, max: null }; + if (typeof axis.xaxis !== "undefined") { + var x_axis = axis.xaxis; + if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") { + xzoom.min = x_axis.min; + } + if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") { + xzoom.max = x_axis.max; + } + } + return xzoom; + }, + + exportChart: function(x, chart) { + if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) { + if (x.shinyEvents.hasOwnProperty("export")) { + setTimeout(function() { + chart.dataURI().then(function(imgURI) { + Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI); + }); + }, 1000); + } + } + } +}; + +/// Widget + +HTMLWidgets.widget({ + name: "apexcharter", + + type: "output", + + factory: function(el, width, height) { + var axOpts; + var apexchart = null; + + return { + renderValue: function(x) { + // Global options + axOpts = x.ax_opts; + + if (x.sparkbox) { + el.style.background = x.sparkbox.background; + el.classList.add("apexcharter-spark-box"); + } + + // Sizing + if (typeof axOpts.chart === "undefined") { + axOpts.chart = {}; + } + axOpts.chart.width = el.clientWidth; + axOpts.chart.height = el.clientHeight; + if (!axOpts.chart.hasOwnProperty("id")) { + axOpts.chart.id = el.id; + } + if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) { + axOpts.chart.parentHeightOffset = 0; + } + + // added events to remove minheight container + if (!axOpts.chart.hasOwnProperty("events")) { + axOpts.chart.events = {}; + } + if (!axOpts.chart.events.hasOwnProperty("mounted")) { + axOpts.chart.events.mounted = function(chartContext, config) { + el.style.minHeight = 0; + }; + } + if (!axOpts.chart.events.hasOwnProperty("updated")) { + axOpts.chart.events.updated = function(chartContext, config) { + el.style.minHeight = 0; + }; + } + + if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) { + if (!axOpts.hasOwnProperty("chart")) { + axOpts.chart = {}; + } + if (!axOpts.chart.hasOwnProperty("events")) { + axOpts.chart.events = {}; + } + if (x.shinyEvents.hasOwnProperty("click")) { + axOpts.chart.events.dataPointSelection = function( + event, + chartContext, + opts + ) { + var options = opts; + var nonEmpty = opts.selectedDataPoints.filter(function(el) { + return el !== null && el.length > 0; + }); + if (nonEmpty.length > 0) { + var select = {}; + for (var i = 0; i < opts.selectedDataPoints.length; i++) { + if (typeof opts.selectedDataPoints[i] === "undefined") { + continue; + } + var selection = apexcharter.getSelection( + chartContext, + options.selectedDataPoints, + i + ); + if (selection !== null) { + if (opts.w.config.series[i].hasOwnProperty("name")) { + var name = opts.w.config.series[i].name; + select[name] = selection; + } else { + select[i] = selection; + } + } + } + if (apexcharter.isSingleSerie(options)) { + select = select[Object.keys(select)[0]]; + } + Shiny.setInputValue( + x.shinyEvents.click.inputId + ":apex_click", + { value: select, datetime: apexcharter.isDatetimeAxis(chartContext) } + ); + } else { + Shiny.setInputValue(x.shinyEvents.click.inputId, null); + } + }; + } + if (x.shinyEvents.hasOwnProperty("zoomed")) { + axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) { + var id = x.shinyEvents.zoomed.inputId; + if (apexcharter.isDatetimeAxis(chartContext)) { + id = id + ":apex_datetime"; + } + Shiny.setInputValue(id, { + x: apexcharter.getXaxis(xaxis), + y: apexcharter.getYaxis(xaxis) + }); + }; + } + if (x.shinyEvents.hasOwnProperty("selection")) { + axOpts.chart.events.selection = function( + chartContext, + xaxis, + yaxis + ) { + var id = x.shinyEvents.selection.inputId; + if (apexcharter.isDatetimeAxis(chartContext)) { + id = id + ":apex_datetime"; + } + var selectionValue; + if (x.shinyEvents.selection.type === "x") { + selectionValue = { x: xaxis.xaxis }; + } else if (x.shinyEvents.selection.type === "xy") { + selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) }; + } else if (x.shinyEvents.selection.type === "y") { + selectionValue = { y: apexcharter.getYaxis(xaxis) }; + } + Shiny.setInputValue(id, selectionValue); + }; + } + } + + // Generate or update chart + if (apexchart === null) { + apexchart = new ApexCharts(el, axOpts); + apexchart.render().then(function() { + apexcharter.exportChart(x, apexchart); + }); + } else { + if (x.auto_update) { + //console.log(x.auto_update); + if (x.auto_update.update_options) { + var options = Object.assign({}, axOpts); + delete options.series; + delete options.chart.width; + delete options.chart.height; + apexchart + .updateOptions( + options, + x.auto_update.options_redrawPaths, + x.auto_update.options_animate, + x.auto_update.update_synced_charts + ); + } + apexchart + .updateSeries(axOpts.series, x.auto_update.series_animate) + .then(function(chart) { + apexcharter.exportChart(x, chart); + }); + } else { + apexchart.destroy(); + apexchart = new ApexCharts(el, axOpts); + apexchart.render().then(function() { + apexcharter.exportChart(x, apexchart); + }); + } + } + }, + + getChart: function() { + return apexchart; + }, + + resize: function(width, height) { + apexchart.updateOptions({ + chart: { + width: width, + height: height + } + }); + } + }; + } +}); + +if (HTMLWidgets.shinyMode) { + // update serie + Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + chart.updateSeries( + [ + { + data: obj.data.newSeries + } + ], + obj.data.animate + ); + } + }); + + // update options + Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + var options = obj.data.options; + var evals = obj.data.evals; + if (!(evals instanceof Array)) evals = [evals]; + for (var k = 0; evals && k < evals.length; k++) { + window.HTMLWidgets.evaluateStringMember(options, evals[k]); + } + chart.updateOptions(options); + } + }); + + // toggle series + Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) { + var chart = apexcharter.getWidget(obj.id); + if (typeof chart != "undefined") { + var seriesName = obj.data.seriesName; + for(var i = 0; i < seriesName.length; i++) { + chart.toggleSeries(seriesName[i]); + } + } + }); +} + diff --git a/docs/authors.html b/docs/authors.html index f4a5e7b..bc638d5 100644 --- a/docs/authors.html +++ b/docs/authors.html @@ -149,11 +149,11 @@ diff --git a/docs/index.html b/docs/index.html index 6c444d8..584aa0e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -86,11 +86,11 @@ diff --git a/docs/news/index.html b/docs/news/index.html index 1d4a25c..9aa2c7d 100644 --- a/docs/news/index.html +++ b/docs/news/index.html @@ -149,11 +149,11 @@ @@ -231,7 +231,7 @@ apexcharter 0.2.0 Unreleased diff --git a/docs/pkgdown.yml b/docs/pkgdown.yml index 17a7471..2a24c68 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-05-11T09:46Z +last_built: 2021-05-11T12:38Z diff --git a/docs/reference/add-line.html b/docs/reference/add-line.html index 261bb0a..088b9d7 100644 --- a/docs/reference/add-line.html +++ b/docs/reference/add-line.html @@ -152,11 +152,11 @@ On scatter charts you can also add a smooth line." /> diff --git a/docs/reference/add-shade.html b/docs/reference/add-shade.html index 7a36b61..7f74937 100644 --- a/docs/reference/add-shade.html +++ b/docs/reference/add-shade.html @@ -152,11 +152,11 @@ add_shade_weekend() add a shadow on every week-end." /> diff --git a/docs/reference/add-vh-lines.html b/docs/reference/add-vh-lines.html index 2cc734c..1834974 100644 --- a/docs/reference/add-vh-lines.html +++ b/docs/reference/add-vh-lines.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/add_event.html b/docs/reference/add_event.html index 6f583a9..22e6b3c 100644 --- a/docs/reference/add_event.html +++ b/docs/reference/add_event.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/add_event_marker.html b/docs/reference/add_event_marker.html index 4b3f81d..8d7a033 100644 --- a/docs/reference/add_event_marker.html +++ b/docs/reference/add_event_marker.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/add_point.html b/docs/reference/add_point.html index 069c4c3..a1a283a 100644 --- a/docs/reference/add_point.html +++ b/docs/reference/add_point.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/apex-facets.html b/docs/reference/apex-facets.html index e784baf..9b88367 100644 --- a/docs/reference/apex-facets.html +++ b/docs/reference/apex-facets.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/apex.html b/docs/reference/apex.html index 49f4cf5..4a34e07 100644 --- a/docs/reference/apex.html +++ b/docs/reference/apex.html @@ -152,11 +152,11 @@ data, mapping and type of chart." /> diff --git a/docs/reference/apex_grid.html b/docs/reference/apex_grid.html index 3631a17..1a94785 100644 --- a/docs/reference/apex_grid.html +++ b/docs/reference/apex_grid.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/apexchart.html b/docs/reference/apexchart.html index 3a8db25..72fffcc 100644 --- a/docs/reference/apexchart.html +++ b/docs/reference/apexchart.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/apexchartProxy.html b/docs/reference/apexchartProxy.html index 85fae30..4ef8a52 100644 --- a/docs/reference/apexchartProxy.html +++ b/docs/reference/apexchartProxy.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/apexcharter-exports.html b/docs/reference/apexcharter-exports.html index a32055b..0dd5080 100644 --- a/docs/reference/apexcharter-exports.html +++ b/docs/reference/apexcharter-exports.html @@ -153,11 +153,11 @@ as Depends of apexcharter" /> diff --git a/docs/reference/apexcharter-package.html b/docs/reference/apexcharter-package.html index b2cd154..9f8c75a 100644 --- a/docs/reference/apexcharter-package.html +++ b/docs/reference/apexcharter-package.html @@ -154,11 +154,11 @@ to create interactive and modern SVG charts." /> diff --git a/docs/reference/apexcharter-shiny-facets.html b/docs/reference/apexcharter-shiny-facets.html index d97d2bf..2efe13c 100644 --- a/docs/reference/apexcharter-shiny-facets.html +++ b/docs/reference/apexcharter-shiny-facets.html @@ -152,11 +152,11 @@ applications and interactive Rmd documents." /> diff --git a/docs/reference/apexcharter-shiny-grid.html b/docs/reference/apexcharter-shiny-grid.html index 3618777..24cee4e 100644 --- a/docs/reference/apexcharter-shiny-grid.html +++ b/docs/reference/apexcharter-shiny-grid.html @@ -152,11 +152,11 @@ applications and interactive Rmd documents." /> diff --git a/docs/reference/apexcharter-shiny.html b/docs/reference/apexcharter-shiny.html index 436c95b..2903581 100644 --- a/docs/reference/apexcharter-shiny.html +++ b/docs/reference/apexcharter-shiny.html @@ -152,11 +152,11 @@ applications and interactive Rmd documents." /> diff --git a/docs/reference/ax-series.html b/docs/reference/ax-series.html index f84ad7a..66c391e 100644 --- a/docs/reference/ax-series.html +++ b/docs/reference/ax-series.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_annotations.html b/docs/reference/ax_annotations.html index f48b960..91ef05a 100644 --- a/docs/reference/ax_annotations.html +++ b/docs/reference/ax_annotations.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_chart.html b/docs/reference/ax_chart.html index b122d9a..d58ab06 100644 --- a/docs/reference/ax_chart.html +++ b/docs/reference/ax_chart.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_colors.html b/docs/reference/ax_colors.html index 72fb69f..46c111d 100644 --- a/docs/reference/ax_colors.html +++ b/docs/reference/ax_colors.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_colors_manual.html b/docs/reference/ax_colors_manual.html index f777c6b..e48a954 100644 --- a/docs/reference/ax_colors_manual.html +++ b/docs/reference/ax_colors_manual.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_dataLabels.html b/docs/reference/ax_dataLabels.html index 173e816..5886e02 100644 --- a/docs/reference/ax_dataLabels.html +++ b/docs/reference/ax_dataLabels.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_fill.html b/docs/reference/ax_fill.html index c29466a..a4c446f 100644 --- a/docs/reference/ax_fill.html +++ b/docs/reference/ax_fill.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_grid.html b/docs/reference/ax_grid.html index 7ddcf9a..2ffc014 100644 --- a/docs/reference/ax_grid.html +++ b/docs/reference/ax_grid.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_labels.html b/docs/reference/ax_labels.html index 7ef8106..3eb3da2 100644 --- a/docs/reference/ax_labels.html +++ b/docs/reference/ax_labels.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_labs.html b/docs/reference/ax_labs.html index 123cf67..72e5b09 100644 --- a/docs/reference/ax_labs.html +++ b/docs/reference/ax_labs.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_legend.html b/docs/reference/ax_legend.html index ec46629..47fa1fa 100644 --- a/docs/reference/ax_legend.html +++ b/docs/reference/ax_legend.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_markers.html b/docs/reference/ax_markers.html index 6c4d96a..1df5d20 100644 --- a/docs/reference/ax_markers.html +++ b/docs/reference/ax_markers.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_nodata.html b/docs/reference/ax_nodata.html index cbcf1ff..8111116 100644 --- a/docs/reference/ax_nodata.html +++ b/docs/reference/ax_nodata.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_plotOptions.html b/docs/reference/ax_plotOptions.html index e5060cb..f6b2973 100644 --- a/docs/reference/ax_plotOptions.html +++ b/docs/reference/ax_plotOptions.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_proxy_options.html b/docs/reference/ax_proxy_options.html index 790ee60..0e36417 100644 --- a/docs/reference/ax_proxy_options.html +++ b/docs/reference/ax_proxy_options.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_proxy_series.html b/docs/reference/ax_proxy_series.html index a98dbd8..8cd52e5 100644 --- a/docs/reference/ax_proxy_series.html +++ b/docs/reference/ax_proxy_series.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_responsive.html b/docs/reference/ax_responsive.html index 49e6c2f..993d182 100644 --- a/docs/reference/ax_responsive.html +++ b/docs/reference/ax_responsive.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_states.html b/docs/reference/ax_states.html index e9c35fb..9e6439d 100644 --- a/docs/reference/ax_states.html +++ b/docs/reference/ax_states.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_stroke.html b/docs/reference/ax_stroke.html index 9fede36..70dff6e 100644 --- a/docs/reference/ax_stroke.html +++ b/docs/reference/ax_stroke.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_subtitle.html b/docs/reference/ax_subtitle.html index 4343598..d16278f 100644 --- a/docs/reference/ax_subtitle.html +++ b/docs/reference/ax_subtitle.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_theme.html b/docs/reference/ax_theme.html index d645094..c8df0d3 100644 --- a/docs/reference/ax_theme.html +++ b/docs/reference/ax_theme.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_title.html b/docs/reference/ax_title.html index e9e9808..9793ae9 100644 --- a/docs/reference/ax_title.html +++ b/docs/reference/ax_title.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_tooltip.html b/docs/reference/ax_tooltip.html index db19c3b..51c8b4a 100644 --- a/docs/reference/ax_tooltip.html +++ b/docs/reference/ax_tooltip.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_xaxis.html b/docs/reference/ax_xaxis.html index 4979891..2590c7b 100644 --- a/docs/reference/ax_xaxis.html +++ b/docs/reference/ax_xaxis.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_yaxis.html b/docs/reference/ax_yaxis.html index 66bb526..a638dd7 100644 --- a/docs/reference/ax_yaxis.html +++ b/docs/reference/ax_yaxis.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/ax_yaxis2.html b/docs/reference/ax_yaxis2.html index e94adb1..ad88234 100644 --- a/docs/reference/ax_yaxis2.html +++ b/docs/reference/ax_yaxis2.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/bar_opts.html b/docs/reference/bar_opts.html index 8bd2a4c..6ad3e53 100644 --- a/docs/reference/bar_opts.html +++ b/docs/reference/bar_opts.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/bubble_opts.html b/docs/reference/bubble_opts.html index 7218103..1a850f9 100644 --- a/docs/reference/bubble_opts.html +++ b/docs/reference/bubble_opts.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/candles.html b/docs/reference/candles.html index 5fc21db..67f0e51 100644 --- a/docs/reference/candles.html +++ b/docs/reference/candles.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/climate_paris.html b/docs/reference/climate_paris.html index 293d70e..d271457 100644 --- a/docs/reference/climate_paris.html +++ b/docs/reference/climate_paris.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/config_update.html b/docs/reference/config_update.html index 38052f9..8375c78 100644 --- a/docs/reference/config_update.html +++ b/docs/reference/config_update.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/consumption.html b/docs/reference/consumption.html index 6d6cfb6..3f4250f 100644 --- a/docs/reference/consumption.html +++ b/docs/reference/consumption.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/events_opts.html b/docs/reference/events_opts.html index 785148d..3756503 100644 --- a/docs/reference/events_opts.html +++ b/docs/reference/events_opts.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/format_date.html b/docs/reference/format_date.html index 6ed9d06..68d8199 100644 --- a/docs/reference/format_date.html +++ b/docs/reference/format_date.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/format_num.html b/docs/reference/format_num.html index dedb781..babffe9 100644 --- a/docs/reference/format_num.html +++ b/docs/reference/format_num.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/heatmap_opts.html b/docs/reference/heatmap_opts.html index ac8282f..dc9797e 100644 --- a/docs/reference/heatmap_opts.html +++ b/docs/reference/heatmap_opts.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/index.html b/docs/reference/index.html index b5dfd35..7e44082 100644 --- a/docs/reference/index.html +++ b/docs/reference/index.html @@ -149,11 +149,11 @@ diff --git a/docs/reference/label.html b/docs/reference/label.html index 318cb8a..6b27962 100644 --- a/docs/reference/label.html +++ b/docs/reference/label.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/parse_df.html b/docs/reference/parse_df.html index d0146e3..b6b7103 100644 --- a/docs/reference/parse_df.html +++ b/docs/reference/parse_df.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/pie_opts.html b/docs/reference/pie_opts.html index 27ac120..7f5d1a1 100644 --- a/docs/reference/pie_opts.html +++ b/docs/reference/pie_opts.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/radialBar_opts.html b/docs/reference/radialBar_opts.html index bd12662..9b695be 100644 --- a/docs/reference/radialBar_opts.html +++ b/docs/reference/radialBar_opts.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/run_demo_input.html b/docs/reference/run_demo_input.html index 8aef33a..a696aef 100644 --- a/docs/reference/run_demo_input.html +++ b/docs/reference/run_demo_input.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/run_demo_sparkbox.html b/docs/reference/run_demo_sparkbox.html index 67c22e6..94ed6ca 100644 --- a/docs/reference/run_demo_sparkbox.html +++ b/docs/reference/run_demo_sparkbox.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/run_demo_sync.html b/docs/reference/run_demo_sync.html index 253dd07..e5bbc6c 100644 --- a/docs/reference/run_demo_sync.html +++ b/docs/reference/run_demo_sync.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/set_input_click.html b/docs/reference/set_input_click.html index 61ebf8f..f34d0a7 100644 --- a/docs/reference/set_input_click.html +++ b/docs/reference/set_input_click.html @@ -158,11 +158,11 @@ scatter: retrieve XY coordinates. diff --git a/docs/reference/set_input_export.html b/docs/reference/set_input_export.html index 4c4a15d..8f63b87 100644 --- a/docs/reference/set_input_export.html +++ b/docs/reference/set_input_export.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/set_input_selection.html b/docs/reference/set_input_selection.html index df7939e..e376bb3 100644 --- a/docs/reference/set_input_selection.html +++ b/docs/reference/set_input_selection.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/set_input_zoom.html b/docs/reference/set_input_zoom.html index c6d0147..84a615d 100644 --- a/docs/reference/set_input_zoom.html +++ b/docs/reference/set_input_zoom.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/set_tooltip_fixed.html b/docs/reference/set_tooltip_fixed.html index b5a27f4..2e832cf 100644 --- a/docs/reference/set_tooltip_fixed.html +++ b/docs/reference/set_tooltip_fixed.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/spark_box.html b/docs/reference/spark_box.html index 64e08a8..86d8c9c 100644 --- a/docs/reference/spark_box.html +++ b/docs/reference/spark_box.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/unhcr_popstats_2017.html b/docs/reference/unhcr_popstats_2017.html index 89a4b4b..e05d64d 100644 --- a/docs/reference/unhcr_popstats_2017.html +++ b/docs/reference/unhcr_popstats_2017.html @@ -151,11 +151,11 @@ diff --git a/docs/reference/unhcr_ts.html b/docs/reference/unhcr_ts.html index d2b1bf7..0b64e55 100644 --- a/docs/reference/unhcr_ts.html +++ b/docs/reference/unhcr_ts.html @@ -151,11 +151,11 @@ diff --git a/revdep/.gitignore b/revdep/.gitignore deleted file mode 100644 index bc768ae..0000000 --- a/revdep/.gitignore +++ /dev/null @@ -1,7 +0,0 @@ -checks -library -checks.noindex -library.noindex -data.sqlite -*.html -cloud.noindex diff --git a/revdep/README.md b/revdep/README.md deleted file mode 100644 index 349a787..0000000 --- a/revdep/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# Platform - -|field |value | -|:--------|:----------------------------| -|version |R version 3.6.3 (2020-02-29) | -|os |Windows 10 x64 | -|system |x86_64, mingw32 | -|ui |RStudio | -|language |(EN) | -|collate |French_France.1252 | -|ctype |French_France.1252 | -|tz |Europe/Berlin | -|date |2020-10-03 | - -# Dependencies - -|package |old |new | | -|:-----------|:-----|:------|:--| -|apexcharter |0.1.6 |0.1.7 |* | -|backports |NA |1.1.10 |* | -|withr |NA |2.3.0 |* | - -# Revdeps - diff --git a/revdep/cran.md b/revdep/cran.md deleted file mode 100644 index 782ef68..0000000 --- a/revdep/cran.md +++ /dev/null @@ -1,7 +0,0 @@ -## revdepcheck results - -We checked 1 reverse dependencies, comparing R CMD check results across CRAN and dev versions of this package. - - * We saw 0 new problems - * We failed to check 0 packages - diff --git a/revdep/failures.md b/revdep/failures.md deleted file mode 100644 index 9a20736..0000000 --- a/revdep/failures.md +++ /dev/null @@ -1 +0,0 @@ -*Wow, no problems at all. :)* \ No newline at end of file diff --git a/revdep/problems.md b/revdep/problems.md deleted file mode 100644 index 9a20736..0000000 --- a/revdep/problems.md +++ /dev/null @@ -1 +0,0 @@ -*Wow, no problems at all. :)* \ No newline at end of file