|
|
// package outwatchapp.components.todo
// import typings.chartJs.mod.{^ => Chart, _}
// import typings.moment.mod.Moment
// import typings.std.global.document
// import typings.std.{
// stdStrings,
// Date,
// HTMLButtonElement,
// HTMLCanvasElement,
// HTMLDivElement,
// MouseEvent
// }
// import scala.scalajs.js
// import scala.scalajs.js.|
// import scala.util.Random
// object Chartjs {
// val random = new Random()
// // def main(argv: scala.Array[String]): Unit = {
// // val section = document.createElement_section(stdStrings.section)
// // section.className = "w"
// // section.append(
// // chart(chartConfig(ChartType.bar, randomData(100, random.nextInt()))),
// // chart(chartConfig(ChartType.pie, randomData(100, random.nextInt()))),
// // chart(
// // chartConfig(ChartType.polarArea, randomData(100, random.nextInt()))
// // ),
// // chart(chartConfig(ChartType.line, randomData(100, random.nextInt())))
// // )
// // document.body.append(section)
// // }
// def chartConfig(
// tpe: ChartType,
// Data: js.Array[js.UndefOr[ChartPoint | Double | Null]]
// ): ChartConfiguration =
// ChartConfiguration()
// .setType(tpe)
// .setData(
// ChartData()
// .setLabels(Labels)
// .setDatasets(
// js.Array(
// ChartDataSets()
// .setLabel("Dataset 1")
// .setData(Data)
// .setBorderWidth(1)
// .setBackgroundColor(BackgroundColor)
// .setBorderColor(BorderColor)
// )
// )
// )
// .setOptions(ChartOptions().setResponsive(true))
// def chart(
// divElem: HTMLDivElement,
// canvas: HTMLCanvasElement,
// config: ChartConfiguration
// ): HTMLDivElement = {
// val div2: HTMLDivElement = document.createElement_div(stdStrings.div)
// // val canvas: HTMLCanvasElement =
// // document.createElement_canvas(stdStrings.canvas)
// val chart: Chart = new Chart(canvas, config)
// def dataSetsU: js.UndefOr[js.Array[ChartDataSets]] =
// config.data.flatMap(_.datasets)
// val randomizeBtn = button("Randomize Data") { (_, _) =>
// dataSetsU.foreach(
// _.foreach(dataset => dataset.data = randomData(100, random.nextInt()))
// )
// chart.update()
// }
// val addDataSet = button("Add Dataset") { (_, _) =>
// val newDataset = ChartDataSets()
// .setLabel("Dataset " + dataSetsU.fold(0)(_.length + 1))
// .setData(randomData(100, random.nextInt()))
// .setBorderWidth(1)
// .setBackgroundColor(BackgroundColor)
// .setBorderColor(BorderColor)
// dataSetsU.foreach(_.push(newDataset))
// chart.update()
// }
// val removeDataset = button("Remove dataset") { (_, _) =>
// dataSetsU.foreach(_.splice(0, 1))
// chart.update()
// }
// divElem.append(canvas, randomizeBtn, addDataSet, removeDataset)
// divElem
// }
// def button(title: String)(
// onClick: js.ThisFunction1[HTMLButtonElement, MouseEvent, Unit]
// ): HTMLButtonElement = {
// val btn = document.createElement_button(stdStrings.button)
// btn.textContent = title
// btn.addEventListener_click(stdStrings.click, onClick)
// btn
// }
// def randomData(
// max: Int,
// seed: Int
// ): js.Array[js.UndefOr[ChartPoint | Double | scala.Null]] = {
// val random = new Random(seed)
// js.Array[js.UndefOr[ChartPoint | Double | Null]](
// random.nextInt(max),
// random.nextInt(max),
// random.nextInt(max),
// random.nextInt(max),
// random.nextInt(max),
// random.nextInt(max)
// )
// }
// val Labels: js.Array[
// String | js.Array[Date | Double | Moment | String] | Double | Date | Moment
// ] =
// js.Array("Red", "Blue", "Yellow", "Green", "Purple", "Orange")
// val BackgroundColor: ChartColor =
// js.Array(
// color(54, 162, 235, 0.2),
// color(255, 206, 86, 0.2),
// color(75, 192, 192, 0.2),
// color(153, 102, 255, 0.2),
// color(255, 159, 64, 0.2)
// )
// val BorderColor: ChartColor =
// js.Array(
// color(255, 99, 132, 1),
// color(54, 162, 235, 1),
// color(255, 206, 86, 1),
// color(75, 192, 192, 1),
// color(153, 102, 255, 1),
// color(255, 159, 64, 1)
// )
// def color(r: Int, g: Int, b: Int, a: Double): String =
// s"rgba($r, $g, $b, $a)"
// }
|
