Add js binding: it's a widget!

dev/dev.Rmd

 Point out the random ID.
 Then go back and change it so we can find the element better.
 
+## Write JavaScript binding
+
+**FILE:** `inst/htmlwidgets/frappeChart.js`
+
+The final step is to move the Javascript we wrote before into the js binding.
+
+* Just put in `console.log(x)`, rebuild, rerender
+* Verify that this `x` looks the same as our `opts` from before
+* Copy all of the JS we wrote to reconfigure the data into the widget
+* Use `el` instead of `#chart`
+* Rebuild, rerender
+* it works!
+* Try adding other options
+
+

dev/widget_demo.Rmd

 output: js4shiny::html_document_plain
 ---
 
-```{r frappeChart}
+```{r frappeChart, message=FALSE}
 library(dplyr)
 library(tidyr)
 library(babynames)
   ungroup() %>% 
   pivot_wider(year, name, values_from = n)
 
-frappeCharts::frappeChart(data, title = "This. Is. Awwesome.", elementId = "name-chart")
+frappeCharts::frappeChart(
+  data,
+  title = "This. Is. Awwesome.", 
+  elementId = "name-chart",
+  lineOptions = list(regionFill = TRUE),
+  axisOptions = list(xIsSeries = TRUE),
+  colors = c("#466683", "#44bc96"),
+  width = "100%"
+)
 ```

inst/htmlwidgets/frappeChart.js

 
       renderValue: function(x) {
 
-        // TODO: code to render the widget, e.g.
-        el.innerText = x.message;
+        const chartData = {labels: [], datasets: []}
+
+        // 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 = 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: x.data[col]})
+        })
+
+        x.data = chartData
+
+        const chart = new frappe.Chart(el, x)
 
       },
 
 
     };
   }
-});
+});