refactor data processing function

dev/dev.Rmd

@@ -480,3 +480,24 @@ show the dev console,
 find the frappeCharts binding
 and add a breakpoint.
 Then reload and show how you an use the dev console there to figure things out.
+
+## Better data updates
+
+Frappe Charts, 
+like many JS libraries,
+includes a method for updating the widget
+without having to redraw the whole chart/plot/viz/etc.
+
+In Frappe Charts, the 
+[full data update](https://frappe.io/charts/docs/update_state/modify_data#updating-full-data)
+method is
+
+```js
+chart.update(data)
+```
+
+where `data` is the `data` part of the initial options object.
+
+To make this work we will:
+
+1. refactor the JS-side data processing code

inst/htmlwidgets/frappeChart.js

@@ -8,28 +8,30 @@ HTMLWidgets.widget({
 
     // TODO: define shared variables for this instance
 
-    return {
-
-      renderValue: function(x) {
+    // helper function to prep the data
+    const prepareChartData = function(data) {
+      const chartData = {labels: [], datasets: []}
 
-        const chartData = {labels: [], datasets: []}
+      // Get keys of data, assume that first entry is for labels, the rest are data
+      let labelColumn = Object.keys(data)[0]
+      let columns = Object.keys(data).slice(1)
 
-        // Get keys of data, assume that first entry is for labels, the rest are data
-        let labelColumn = Object.keys(x.data)[0]
-        let columns = Object.keys(x.data).slice(1)
+      // First column in x.data is the labels
+      chartData.labels = data[labelColumn]
 
-        // First column in x.data is the labels
-        chartData.labels = x.data[labelColumn]
+      // Create an appropriate object for each column, reformat data and add to chartData
+      columns.forEach(function(col) {
+        chartData.datasets.push({name: col, values: data[col]})
+      })
+      return chartData
+    }
 
-        // Create an appropriate object for each column, reformat data and add to chartData
-        columns.forEach(function(col) {
-          chartData.datasets.push({name: col, values: x.data[col]})
-        })
+    return {
 
-        x.data = chartData
+      renderValue: function(x) {
+        x.data = prepareChartData(x.data)
 
         const chart = new frappe.Chart(el, x)
-
       },
 
       resize: function(width, height) {