javascript(plotly.js) 호출하기

 

문제

plotly.js javascript library 를 laminar 에서 사용해보자

plotly.js 의 basic bar chart 를 그려보도록 한다.

코드

import com.raquo.laminar.api.L._
import org.scalajs.dom

import scala.scalajs.js

object Main {
  def main(args: Array[String]): Unit = {
    val content = div(
      onMountCallback(ctx =>
        js.Dynamic.global.Plotly.newPlot(
          ctx.thisNode.ref,
          js.Array(
            js.Dictionary(
              "x"    -> js.Array("giraffes", "orangutans", "monkeys"),
              "y"    -> js.Array(20, 14, 23),
              "type" -> "bar"
            )
          )
        )
      )
    )

    val containerNode = dom.document.getElementById("main_content")
    render(containerNode, content)
  }
}

결과

inContext 나 amend 로 해결할 수 없을 경우에만 onMountCallback 를 최소한으로 사용하도록 하자