Rewrite all individual charts from jqPlot to Chart.js and get rid of …

…jqPlot and jQuery (#42)
v6ak · Oct 15, 2023 · 156033c · 156033c
1 parent 4468fa9
commit 156033c
Show file tree

Hide file tree

Showing 10 changed files with 202 additions and 180 deletions.
diff --git a/build.sbt b/build.sbt
@@ -5,10 +5,6 @@ val appVersion= "1.0"
 
 lazy val scalaV = "2.13.12"
 
-val jqueryName: String = "jquery/2.1.4/jquery.js"
-
-val jqPlot = "org.webjars" % "jqplot" % "1.0.8r1250"
-
 val bootstrap = "org.webjars" % "bootstrap" % "5.3.2"
 
 import com.typesafe.sbt.web.PathMapping
@@ -111,7 +107,6 @@ lazy val server = (project in file("server")).settings(
     "com.vmunier" %% "scalajs-scripts" % "1.2.0",
     guice,
     bootstrap,
-    jqPlot,
     specs2 % Test
   ),
 ).enablePlugins(PlayScala, JSDependenciesPlugin, SbtWeb)//.dependsOn(sharedJvm)
@@ -141,15 +136,8 @@ lazy val client = (project in file("client")).settings(
     bootstrap / "bootstrap.bundle.min.js",
     "org.webjars" % "momentjs" % "2.10.6" / "min/moment.min.js",
     "org.webjars" % "moment-timezone" % "0.4.0-1" / "moment-timezone-with-data.js" dependsOn "min/moment.min.js",
-    "org.webjars" % "jquery" % "2.1.4" / jqueryName minified "jquery/2.1.4/jquery.min.js",
     "org.webjars.npm" % "chart.js" % "4.4.0" / "chart.umd.js",
     "org.webjars.npm" % "chartjs-adapter-moment" % "1.0.0" / "chartjs-adapter-moment.min.js" dependsOn "chart.umd.js",
-    jqPlot / "jquery.jqplot.min.js" dependsOn jqueryName,
-    jqPlot / "jqplot.dateAxisRenderer.min.js" dependsOn "jquery.jqplot.min.js",
-    jqPlot / "jqplot.categoryAxisRenderer.min.js" dependsOn "jquery.jqplot.min.js",
-    jqPlot / "jqplot.barRenderer.min.js" dependsOn "jquery.jqplot.min.js",
-    jqPlot / "jqplot.pointLabels.min.js" dependsOn "jquery.jqplot.min.js",
-    jqPlot / "jqplot.highlighter.min.js" dependsOn "jquery.jqplot.min.js",
   ),
 ).enablePlugins(ScalaJSPlugin, JSDependenciesPlugin, ScalaJSWeb)//.dependsOn(sharedJs)
 

diff --git a/client/src/main/scala/com/v6ak/zbdb/ChartJsUtils.scala b/client/src/main/scala/com/v6ak/zbdb/ChartJsUtils.scala
@@ -54,6 +54,35 @@ object ChartJsUtils {
       text = label,
     ),
   )
+  def minutesAxis(label: String) = literal(
+    min = 0,
+    title = literal(
+      display = true,
+      text = label,
+    ),
+  )
+
+  def distanceAxis = {
+    literal(
+      `type` = "linear",
+      min = 0,
+      title = literal(
+        display = true,
+        text = "vzdálenost (km)",
+      ),
+    )
+  }
+
+  def speedAxis = {
+    literal(
+      `type` = "linear",
+      min = 0,
+      title = literal(
+        display = true,
+        text = "rychlost (km/h)",
+      ),
+    )
+  }
 
   def dataFromPairs(seq: Seq[(Any, Any)]) = literal(
     labels = seq.map(_._1).toJSArray,
@@ -74,32 +103,47 @@ object ChartJsUtils {
     )
   )
 
-  def showChartInModal(title: String = null)(f: Seq[Participant] => js.Any): (Option[String], (String, => Seq[Participant], ParticipantTable) => Unit) =
-    Option(title) -> ((modalBodyId: String, rowsLoader, participantTable: Any) => {
-      val el = window.document.getElementById(modalBodyId).asInstanceOf[HTMLElement]
-      el.style.maxHeight = "90vh"
-      el.style.maxWidth = "90vw"
+  def initializePlot(el: HTMLElement, plotParams: js.Any, registerDestroy: (()=>Unit) => Unit): Unit = {
+    console.log("plotParams", plotParams)
+    el.style.maxHeight = "90vh"
+    el.style.maxWidth = "90vw"
 
-      val can = canvas().render
-      el.appendChild(can)
+    val can = canvas().render
+    el.appendChild(can)
 
-      val plotParams = f(rowsLoader)
-      console.log("plotParams", plotParams)
-      val chart = new Chart(can, plotParams)
-      val resizeHandler: Event => Unit = _ => {
-        //chart.update()
-        chart.resize()
-      }
-      window.addEventListener("resize", resizeHandler)
-
-      def destroy(): Unit = {
-        window.removeEventListener("resize", resizeHandler)
-        chart.destroy()
-      }
+    val chart = new Chart(can, plotParams)
+    val resizeHandler: Event => Unit = _ => {
+      //chart.update()
+      chart.resize()
+    }
+
+    window.addEventListener("resize", resizeHandler)
+
+    def destroy(): Unit = {
+      window.removeEventListener("resize", resizeHandler)
+      chart.destroy()
+    }
+
+    registerDestroy(destroy)
+  }
 
+  def showChartInModal(title: String = null)(f: Seq[Participant] => js.Any): (Option[String], (HTMLElement, => Seq[Participant], ParticipantTable) => Unit) =
+    Option(title) -> ((el, rowsLoader, participantTable: Any) => {
+      val plotParams = f(rowsLoader)
       val modalElement = el.parentNode.parentNode.parentNode.asInstanceOf[Element]
-      modalElement.onBsModalHidden(() => destroy())
+      initializePlot(el, plotParams, destroy => modalElement.onBsModalHidden(destroy))
     }
   )
 
+  def plotLinesToData(data: Seq[PlotLine]) = {
+    literal(
+      datasets = data.map(ser =>
+        literal(
+          label = s"${ser.row.id}: ${ser.row.fullNameWithNick}",
+          data = ser.points,
+        )
+      ).toJSArray,
+    )
+  }
+
 }
diff --git a/client/src/main/scala/com/v6ak/zbdb/HtmlUtils.scala b/client/src/main/scala/com/v6ak/zbdb/HtmlUtils.scala
@@ -17,12 +17,11 @@ object HtmlUtils {
   )
 
   def modal(title: Frag, keyboard: Boolean = true) = {
-    val modalBodyId = IdGenerator.newId()
     val modalHeader = div(`class`:="modal-header")(
       h5(`class`:="modal-title")(title),
       button(`type`:="button", `class`:="btn-close", dismiss := "modal", aria.label := "Zavřít"),
     )
-    val modalBody = div(`class`:="modal-body", id := modalBodyId)
+    val modalBody = div(`class`:="modal-body").render
     val modalFooter = div(`class`:="modal-footer")
     val modalDialog = div(`class`:="modal-dialog modal-xxl")(
       div(`class`:="modal-content")(
@@ -32,7 +31,7 @@ object HtmlUtils {
     val dialog = div(`class`:="modal fade", attr("data-bs-keyboard") := keyboard.toString)(modalDialog).render
     dialog.onBsModalHidden({() => dialog.parentNode.removeChild(dialog)})
     val bsMod = new BsModal(dialog)
-    (dialog, modalBodyId, bsMod)
+    (dialog, modalBody, bsMod)
   }
 
   @inline def fseq(frags: Frag*): Seq[Frag] = frags

diff --git a/client/src/main/scala/com/v6ak/zbdb/PlotData.scala b/client/src/main/scala/com/v6ak/zbdb/PlotData.scala
diff --git a/client/src/main/scala/com/v6ak/zbdb/PlotLine.scala b/client/src/main/scala/com/v6ak/zbdb/PlotLine.scala
@@ -3,11 +3,4 @@ package com.v6ak.zbdb
 import scala.scalajs.js
 import scala.scalajs.js.Dictionary
 
-final private case class PlotLine(row: Participant, label: String, points: js.Array[js.Array[_]]) {
-  def seriesOptions = js.Dictionary(
-    "label" -> label,
-    "highlighter" -> Dictionary(
-      "formatString" -> s"${row.id}: %s|%s|%s|%s"
-    )
-  )
-}
+final private case class PlotLine(row: Participant, label: String, points: js.Array[js.Any])