From d9461c45de104f6aaf91394ac828c54fc5ace4a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADt=20=C5=A0est=C3=A1k?=
 <v6ak@users.noreply.github.com>
Date: Sun, 15 Oct 2023 00:18:20 +0200
Subject: [PATCH] Fix plot jumping (#42)

---
 .../src/main/scala/com/v6ak/zbdb/ChartJsUtils.scala  | 10 ++++++----
 server/app/assets/bootstrap-fragments.scss           |  2 +-
 server/app/assets/main.scss                          | 12 ++++++++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/client/src/main/scala/com/v6ak/zbdb/ChartJsUtils.scala b/client/src/main/scala/com/v6ak/zbdb/ChartJsUtils.scala
index 9d1cacf..db089d3 100644
--- a/client/src/main/scala/com/v6ak/zbdb/ChartJsUtils.scala
+++ b/client/src/main/scala/com/v6ak/zbdb/ChartJsUtils.scala
@@ -104,13 +104,15 @@ object ChartJsUtils {
     )
   )
 
-  def initializePlot(el: HTMLElement, plotParams: js.Any, registerDestroy: (()=>Unit) => Unit): Unit = {
+  def initializePlot(plotRoot: 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)
+    plotRoot.appendChild(
+      div(`class` := s"ratio plot plot-${plotParams.asInstanceOf[js.Dynamic].`type`}")(
+        div(can)
+      ).render
+    )
 
     val chart = new Chart(can, plotParams)
     val resizeHandler: Event => Unit = _ => {
diff --git a/server/app/assets/bootstrap-fragments.scss b/server/app/assets/bootstrap-fragments.scss
index d6bba42..eca360b 100644
--- a/server/app/assets/bootstrap-fragments.scss
+++ b/server/app/assets/bootstrap-fragments.scss
@@ -46,7 +46,7 @@
 //@import "lib/bootstrap/scss/offcanvas";
 
 // Helpers
-//@import "lib/bootstrap/scss/helpers";
+@import "lib/bootstrap/scss/helpers";
 
 // Utilities
 //@import "lib/bootstrap/scss/utilities/api";
diff --git a/server/app/assets/main.scss b/server/app/assets/main.scss
index a388f49..bbad293 100644
--- a/server/app/assets/main.scss
+++ b/server/app/assets/main.scss
@@ -1,6 +1,18 @@
 @import "bootstrap-fragments";  // full Bootstrap: @import "lib/bootstrap/scss/bootstrap";
 @import "icons";
 
+.plot-bar, .plot-line, .plot-bubble {
+    --bs-aspect-ratio: 50%;
+}
+.plot-pie {
+    --bs-aspect-ratio: 100%;
+}
+.plot {
+    max-height: 100vh;
+    max-width: 80em;
+    margin: auto;
+}
+
 
 .participants-table {
     border-collapse: separate;