Fix plot jumping (#42)

v6ak · Oct 15, 2023 · d9461c4 · d9461c4
1 parent 4b0fc23
commit d9461c4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;