outwatch-test/src/main/scala/outwatchapp/components/ChartjsDemo.scala

package outwatchapp.components
import scala.scalajs.js.|
import scala.util.Random

import colibri.ext.monix._
import com.softwaremill.tagging._
import monix.bio.Task
import monix.eval.Coeval
import monix.execution.Cancelable
import outwatch.HtmlVNode
import outwatch.ManagedSubscriptions.managedElement
import outwatch.dsl._
import typings.chartJs.mod._
import typings.chartJs.mod.{^ => Chart}
import typings.moment.mod.Moment
import typings.std.Date
import typings.std.HTMLCanvasElement

import scalajs.js

sealed trait ChartjsDemo
object ChartjsDemo {
  val random = new Random()
  def apply(): Task[HtmlVNode @@ ChartjsDemo] = Coeval(
    div(
      canvas(
        managedElement { el =>
          val chart = new Chart(
            el.asInstanceOf[HTMLCanvasElement],
            chartConfig(ChartType.bar, randomData(100, random.nextInt()))
          )
          Cancelable(() => chart.destroy())
        }
      )
    ).taggedWith[ChartjsDemo]
  ).to[Task]

  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)
    )
  }

  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))

  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)"

}