added selection in vignette shiny

inst/examples-input/selection/app.R

@@ -41,7 +41,6 @@ server <- function(input, output, session) {
   
   output$chart2 <- renderApexchart({
     apex(iris, aes(Sepal.Length, Sepal.Width), type = "scatter") %>% 
-      ax_chart(zoom = list(type = "xy")) %>% 
       set_input_selection("selection_scatter", type = "xy")
   })
   output$result2 <- renderPrint({

inst/htmlwidgets/apexcharter.js

@@ -91,9 +91,9 @@ HTMLWidgets.widget({
               if (x.shinyEvents.selection.type == "x") {
                 selectionValue = {x: xaxis.xaxis};
               } else if (x.shinyEvents.selection.type == "xy") {
-                selectionValue = {x: xaxis.xaxis, y: xaxis.yaxis};
+                selectionValue = {x: xaxis.xaxis, y: getYaxis(xaxis)};
               } else if (x.shinyEvents.selection.type == "y") {
-                selectionValue = {y: xaxis.yaxis};
+                selectionValue = {y: getYaxis(xaxis)};
               }
               Shiny.setInputValue(id, selectionValue);
             };
@@ -218,8 +218,13 @@ function getSelection(chartContext, selectedDataPoints, serieIndex) {
 
 function getYaxis(axis) {
   var yzoom = { min: null, max: null };
-  if (typeof axis.yaxis != "undefined" && axis.yaxis !== null && axis.yaxis.length > 0) {
-    var y_axis = axis.yaxis[0];
+  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;
     }

vignettes/shiny-integration.Rmd

@@ -47,7 +47,7 @@ apex(..., auto_update = config_update(update_options = TRUE))
 
 ### Proxy 
 
-A proxy is also implemented to update charts manually in oberserver. You can update data:
+A proxy is also implemented to update charts manually server-side. You can update data:
 
 ```{r}
 output$my_chart <- renderApexchart({
@@ -60,7 +60,7 @@ observeEvent(input$update, {
 })
 ```
 
-Be sure to use `shiny::isolate()` to block any reactivity in `renderApexchart` function and to set `auto_update` to FALSE te prevevnt updating twice.
+Be sure to use `shiny::isolate()` to block any reactivity in `renderApexchart` function and to set `auto_update` to FALSE to prevent updating twice.
 Then you can use in an observe function (or any reactive function) `apexchartProxy()` with the output id to get the chart instance and `ax_proxy_series()` to update data.
 
 If you want to update chart's options, use : 
@@ -94,10 +94,10 @@ data.frame(
 ) %>% 
   apex(aes(month, value), height = "250px") %>% 
   ax_title("Click a bar:") %>% 
-  set_input_click("month_click")
+  set_input_click("click")
 ```
 
-Value server-side will be available through `input$month_click`.
+Value server-side will be available through `input$click`.
 
 Depending on the type of graphic, you can retrieve :
 
@@ -109,7 +109,7 @@ Depending on the type of graphic, you can retrieve :
 
 
 
-Multiple slection is possible and you can change the darken effect of selected bars :
+Multiple selection is possible and you can change the darken effect of selected bars :
 
 
 ```{r, eval=TRUE}
@@ -120,7 +120,7 @@ data.frame(
   apex(aes(month, value), height = "250px") %>% 
   ax_title("Click several bars:") %>% 
   set_input_click(
-    inputId = "month_click", 
+    inputId = "click", 
     multiple = TRUE, 
     effect_value = 0.1
   )
@@ -144,10 +144,10 @@ Retrieve the coordinates of the axes when the graph is zoomed in:
 ```{r, eval=TRUE}
 data("economics", package = "ggplot2")
 apex(economics, aes(date, psavert), type = "line", height = "250px") %>% 
-  set_input_zoom("zoom_ts")
+  set_input_zoom("zoom")
 ```
 
-Value server-side will be available through `input$zoom_ts` unde the form :
+Value server-side will be available through `input$zoom` under the form :
 
 ```{r, echo=FALSE, eval=TRUE}
 list(
@@ -171,3 +171,65 @@ More examples are available with:
 run_input_demo("zoom")
 ```
 
+
+
+### Selection
+
+Retrieve the coordinates of the axes when user select an area on a chart (without zooming):
+
+```{r, eval=TRUE}
+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 :
+
+```{r, echo=FALSE, eval=TRUE}
+list(
+  x = list(
+    min = "1981-10-24 15:41:16 UTC",
+    max = "1992-01-24 06:40:22 UTC"
+  )
+)
+```
+
+You can define a selected area at start:
+
+```{r, eval=TRUE}
+apex(economics, aes(date, psavert), type = "line", height = "250px") %>% 
+  set_input_selection(
+    inputId = "selection", 
+    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):
+
+```{r, eval=TRUE}
+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:
+
+```{r, echo=FALSE, eval=TRUE}
+list(
+  x = list(
+    min = 5.130187,
+    max = 5.541228
+  ),
+  y = list(
+    min = 2.959623,
+    max = 3.860357
+  )
+)
+```
+
+
+More examples are available with:
+
+```{r}
+run_input_demo("selection")
+```