Add event listener to return events back to Shiny

dev/dev.Rmd

@@ -548,3 +548,10 @@ To make this work we will:
 
 1. Write a user-friendly wrapper around `sendCustomMessage` called `updateFrappeChart()`
 
+1. Now add an event listener to send chart navigation back to Shiny
+    
+   Attach the event listener during `renderValue()` and watch for the `data-select` event.
+   Use the `el.id` to create a new id, like `el.id + '_selected'`.
+   Send back `index` and `values` from the event.
+
+   Add `verbatimTextOutput('selected')` to show `input$chart_selected`.

dev/shiny/app.R

@@ -11,7 +11,8 @@ ui <- fluidPage(
     ),
     # Show a plot of the generated distribution
     mainPanel(
-      frappeCharts::frappeChartOutput("chart")
+      frappeCharts::frappeChartOutput("chart"),
+      verbatimTextOutput("selected")
     )
   )
 )
@@ -42,6 +43,10 @@ server <- function(input, output, session) {
   observe({
     updateFrappeChart("chart", data())
   })
+
+  output$selected <- renderPrint({
+    input$chart_selected
+  })
 }
 
 # Run the application

inst/htmlwidgets/frappeChart.js

@@ -36,6 +36,13 @@ HTMLWidgets.widget({
         x.data = prepareChartData(x.data)
 
         chart = new frappe.Chart(el, x)
+
+        if (HTMLWidgets.shinyMode && x.isNavigable) {
+          el.addEventListener('data-select', function(ev) {
+            let {index, values} = ev
+            Shiny.setInputValue(el.id + '_selected', {index, values})
+          })
+        }
       },
 
       resize: function(width, height) {
@@ -61,6 +68,8 @@ HTMLWidgets.widget({
 if (HTMLWidgets.shinyMode) {
   Shiny.addCustomMessageHandler('frappeCharts:update', function({id, data}) {
     let el = document.getElementById(id)
-    el.widget.update(data)
+    if (el.widget) {
+      el.widget.update(data)
+    }
   })
 }