# data <- list(
#   labels = rep(c("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"), 4),
#   datasets = list(
#     list(name = "Python", values = runif(7 * 4, 0, 50)),
#     list(name = "R", values = runif(7 * 4, 0, 100))
#   )
# )

data <-
  babynames %>% 
  filter(
    name %in% c("Ruth", "August"),
    year >= 1980
  ) %>% 
  group_by(year, name) %>% 
  summarize(n = sum(n)) %>% 
  ungroup() %>% 
  pivot_wider(year, name, values_from = n)

data[1:5, ]

## # A tibble: 5 x 3
##    year August  Ruth
##   <dbl>  <int> <int>
## 1  1980    149  1262
## 2  1981    137  1272
## 3  1982    130  1193
## 4  1983    135  1135
## 5  1984    142  1174

opts <- list(
  title = "My AwesomeR Chart",
  type = "line",
  height = 250,
  colors = c("#466683", "#44bc96"),
  data = data,
  lineOptions = list(regionFill = TRUE, hideDots = FALSE),
  axisOptions = list(xIsSeries = TRUE),
  isNavigable = c(TRUE, TRUE)
)

tags$script(
  id = "chart-opts",
  type = "application/json",
  htmlwidgets:::toJSON(opts)
)

let x = document.getElementById('chart-opts')
x = JSON.parse(x.textContent)

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("#chart", x)