---
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 = c("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"),
  datasets = list(
    list(name = "R", values = runif(8, 0, 100)),
    list(name = "Python", values = runif(8, 0, 50))
  )
)

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

```{js}
let data = document.getElementById('data')
data = JSON.parse(data.textContent)

const chart = new frappe.Chart("#chart", {  // or a DOM element,
                                            // new Chart() in case of ES6 module with above usage
    title: "My Awesome Chart",
    data: data,
    type: 'line',
    height: 250,
    colors: ['#7cd6fd', '#743ee2']
})
```