category -> click + time series

DESCRIPTION

@@ -30,6 +30,7 @@ Suggests:
     gapminder,
     highcharter
 RoxygenNote: 7.0.2
+Roxygen: list(markdown = TRUE)
 URL: https://github.com/dreamRs/apexcharter, https://dreamrs.github.io/apexcharter
 BugReports: https://github.com/dreamRs/apexcharter/issues
 VignetteBuilder: knitr

NAMESPACE

@@ -42,7 +42,7 @@ export(parse_df)
 export(pie_opts)
 export(radialBar_opts)
 export(renderApexchart)
-export(set_input_category)
+export(set_input_click)
 importFrom(ggplot2,aes)
 importFrom(htmlwidgets,JS)
 importFrom(htmlwidgets,createWidget)

R/shiny-input.R

@@ -1,5 +1,11 @@
 
-#' Retrieve category (x-axis) in Shiny
+#' @title Retrieve click information in Shiny
+#' 
+#' @description According to type of chart, different values are retrieved:
+#'  * **bar and column:** retrieve category (x-axis).
+#'  * **pie and donut:** retrieve label.
+#'  * **time-series:** retrieve x-axis value, you have to display markers
+#'   with size > 0 and set tooltip's options `intersect = TRUE` and `shared = FALSE`.
 #'
 #' @param ax An \code{apexcharts} \code{htmlwidget} object. 
 #' @param inputId The id that will be used server-side for retrieveng category.
@@ -9,7 +15,7 @@
 #' @export
 #'
 #' @examples
-set_input_category <- function(ax, inputId, multiple = FALSE) {
+set_input_click <- function(ax, inputId, multiple = FALSE) {
   if (isTRUE(multiple)) {
     ax <- ax_states(ax, active = list(
       allowMultipleDataPointsSelection = TRUE

inst/examples-input/click.R

@@ -3,7 +3,7 @@ library(shiny)
 library(apexcharter)
 
 ui <- fluidPage(
-  tags$h2("Retrieve category clicked"),
+  tags$h2("Retrieve click information"),
   fluidRow(
     column(
       width = 6,
@@ -26,7 +26,11 @@ ui <- fluidPage(
       verbatimTextOutput("result3")
     ),
     column(
-      width = 6
+      width = 6,
+      tags$b("Time serie: you must display markers and use"),
+      tags$code("ax_tooltip(intersect = TRUE, shared = FALSE)"),
+      apexchartOutput("chart4"),
+      verbatimTextOutput("result4")
     )
   )
 )
@@ -39,7 +43,7 @@ server <- function(input, output, session) {
       value = sample(1:100, 12)
     ) %>% 
       apex(aes(month, value)) %>% 
-      set_input_category("month_click")
+      set_input_click("month_click")
   })
   output$result1 <- renderPrint({
     input$month_click
@@ -51,7 +55,7 @@ server <- function(input, output, session) {
       value = sample(1:100, 12)
     ) %>% 
       apex(aes(month, value)) %>% 
-      set_input_category("month_click_mult", multiple = TRUE)
+      set_input_click("month_click_mult", multiple = TRUE)
   })
   output$result2 <- renderPrint({
     input$month_click_mult
@@ -63,12 +67,26 @@ server <- function(input, output, session) {
       n = c(254, 238)
     ) %>% 
       apex(type = "pie", mapping = aes(x = answer, y = n)) %>% 
-      set_input_category("click_pie")
+      set_input_click("click_pie")
   })
   output$result3 <- renderPrint({
     input$click_pie
   })
   
+  output$chart4 <- renderApexchart({
+    data.frame(
+      date = seq(as.Date("1960-01-01"), length.out = 24, by = "month"),
+      value = tail(as.vector(AirPassengers), 24)
+    ) %>% 
+      apex(aes(date, value), "line") %>% 
+      ax_markers(size = 5) %>% 
+      ax_tooltip(intersect = TRUE, shared = FALSE) %>% 
+      set_input_click("click_time")
+  })
+  output$result4 <- renderPrint({
+    input$click_time
+  })
+  
 }
 
 shinyApp(ui, server)

inst/htmlwidgets/apexcharter.js

@@ -46,7 +46,13 @@ HTMLWidgets.widget({
               } else {
                 var data = opts.w.config.series[opts.seriesIndex].data;
                 selected = opts.selectedDataPoints[0].map(function(index) {
-                  return data[index].x;
+                  var val = data[index];
+                  if (val.hasOwnProperty("x")) {
+                    val = val.x;
+                  } else {
+                    val = val[0];
+                  }
+                  return val;
                 });
               }
               Shiny.setInputValue(

man/set_input_category.Rd

@@ -1,21 +0,0 @@
-% Generated by roxygen2: do not edit by hand
-% Please edit documentation in R/shiny-input.R
-\name{set_input_category}
-\alias{set_input_category}
-\title{Retrieve category (x-axis) in Shiny}
-\usage{
-set_input_category(ax, inputId, multiple = FALSE)
-}
-\arguments{
-\item{ax}{An \code{apexcharts} \code{htmlwidget} object.}
-
-\item{inputId}{The id that will be used server-side for retrieveng category.}
-
-\item{multiple}{Allow multiple selection: \code{TRUE} or \code{FALSE} (default).}
-}
-\value{
-An \code{apexcharts} \code{htmlwidget} object.
-}
-\description{
-Retrieve category (x-axis) in Shiny
-}

man/set_input_click.Rd

@@ -0,0 +1,27 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/shiny-input.R
+\name{set_input_click}
+\alias{set_input_click}
+\title{Retrieve click information in Shiny}
+\usage{
+set_input_click(ax, inputId, multiple = FALSE)
+}
+\arguments{
+\item{ax}{An \code{apexcharts} \code{htmlwidget} object.}
+
+\item{inputId}{The id that will be used server-side for retrieveng category.}
+
+\item{multiple}{Allow multiple selection: \code{TRUE} or \code{FALSE} (default).}
+}
+\value{
+An \code{apexcharts} \code{htmlwidget} object.
+}
+\description{
+According to type of chart, different values are retrieved:
+\itemize{
+\item \strong{bar and column:} retrieve category (x-axis).
+\item \strong{pie and donut:} retrieve label.
+\item \strong{time-series:} retrieve x-axis value, you have to display markers
+with size > 0 and set tooltip's options \code{intersect = TRUE} and \code{shared = FALSE}.
+}
+}