Format the value sent back to Shiny

dev/dev.Rmd

@@ -555,3 +555,26 @@ To make this work we will:
    Send back `index` and `values` from the event.
 
    Add `verbatimTextOutput('selected')` to show `input$chart_selected`.
+
+1. You would probably want to do some work for the user and return more meaningful values.
+   We won't cover this in the workshop, but I've demonstrated a potential method.
+
+   This function basically reverses the chart processing and 
+   and returns a list that should be a dataframe.
+   
+   ```js
+   if (HTMLWidgets.shinyMode && x.isNavigable) {
+    el.addEventListener('data-select', function(ev) {
+      let {index, values} = ev
+      let chart = el.widget.chart()
+      let label = chart.data.labels[index]
+      let names = chart.data.datasets.map(d => d.name)
+      let data = values.reduce(function(acc, v, idx) {
+        acc[names[idx]] = v
+        return acc
+      }, {})
+      data[labelsName] = label
+      Shiny.setInputValue(el.id + '_selected', data)
+    })
+    }
+    ```

inst/htmlwidgets/frappeChart.js

@@ -33,6 +33,7 @@ HTMLWidgets.widget({
 
       renderValue: function(x) {
         el.widget = this
+        let labelsName = Object.keys(x.data)[0]
         x.data = prepareChartData(x.data)
 
         chart = new frappe.Chart(el, x)
@@ -40,7 +41,15 @@ HTMLWidgets.widget({
         if (HTMLWidgets.shinyMode && x.isNavigable) {
           el.addEventListener('data-select', function(ev) {
             let {index, values} = ev
-            Shiny.setInputValue(el.id + '_selected', {index, values})
+            let chart = el.widget.chart()
+            let label = chart.data.labels[index]
+            let names = chart.data.datasets.map(d => d.name)
+            let data = values.reduce(function(acc, v, idx) {
+              acc[names[idx]] = v
+              return acc
+            }, {})
+            data[labelsName] = label
+            Shiny.setInputValue(el.id + '_selected', data)
           })
         }
       },