You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.6 KiB
102 lines
2.6 KiB
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)"
|
|
|
|
}
|