---
output: js4shiny::html_document_js
---

```{r htmldeps, echo=FALSE}
library(htmltools)

tagList(
  div(id = "chart"),
  htmltools::htmlDependency(
    name = "frappe-charts",
    version = "1.3.0",
    package = "frappeCharts",
    src = "htmlwidgets/lib/frappe-charts",
    script = "frappe-charts.min.iife.js",
    all_files = TRUE
  )
)
```

```{r data}
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))
  )
)

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

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

```{js}
let x = document.getElementById('chart-opts')
x = JSON.parse(x.textContent)

const chart = new frappe.Chart("#chart", x)
```