Merge pull request #6 from p2m2/gridDiv

Grid div
p2m2 · Feb 8, 2023 · a086ed2 · a086ed2
2 parents e86cf32 + 0bac8c8
commit a086ed2
Show file tree

Hide file tree

Showing 6 changed files with 782 additions and 767 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -12,6 +12,11 @@
             text-align: center;
             width: 350px;
         }
+        .gridCanvas {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-gap: 10px;
+        }
     </style>
   </head>
   <body>

diff --git a/docs/main.js b/docs/main.js
diff --git a/docs/main.js.map b/docs/main.js.map
diff --git a/html/index.html b/html/index.html
@@ -12,6 +12,11 @@
             text-align: center;
             width: 350px;
         }
+        .gridCanvas {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-gap: 10px;
+        }
     </style>
   </head>
   <body>

diff --git a/js/src/main/scala/fr/inrae/p2m2/webapp/Chart.scala b/js/src/main/scala/fr/inrae/p2m2/webapp/Chart.scala
@@ -12,8 +12,6 @@ class Chart(ctx:dom.Element,obj:js.Dynamic) extends js.Object
 
 case object Chart {
   def buildDataset(labels: Seq[String], values: Seq[Double], backgroundColor: Seq[String]): js.Dynamic = {
-    println(labels)
-    println(values)
 
     js.Dynamic.literal(
       `type` = "bar",

diff --git a/js/src/main/scala/fr/inrae/p2m2/webapp/PositionalCarbonMain.scala b/js/src/main/scala/fr/inrae/p2m2/webapp/PositionalCarbonMain.scala
@@ -19,12 +19,15 @@ object PositionalCarbonMain {
     canvas(id := idBarPlot)
 
 
-  def appendCanvas(idDiv:String,idCanvas:String, title:String) =
+  def appendCanvas(idDivSample:String,idDiv:String,idCanvas:String, title:String) =
     dom
       .document
-      .getElementById(idMainDiv)
+      .getElementById(idDivSample)
       .append(
-        div( id:=idDiv , `class` := "canvasChart", h2(title), buildCanvasBarPlot(idCanvas) )
+        div( id:=idDiv ,
+          `class` := "canvasChart",
+          h2(title),
+          buildCanvasBarPlot(idCanvas) )
           .render)
 
   def updateHtmlPage(content : String) = {
@@ -38,10 +41,16 @@ object PositionalCarbonMain {
           .groupBy(_._1._1)
           .foreach {
             case ((sample, listV)) =>
+              val idDivSample = s"div_$sample"
               dom
                 .document
                 .getElementById(idMainDiv)
-                .append(h1(sample).render)
+                .append(
+                  div(
+                    h1(sample),
+                    div(id:=idDivSample, `class`:="gridCanvas")
+                  ).render
+                )
 
               listV.foreach {
                 case ((sample, metabolite), data) if data.nonEmpty =>
@@ -57,10 +66,9 @@ object PositionalCarbonMain {
                     case (_, _, false) => "rgba(255, 99, 132, 0.2)"
                   }
 
-                  appendCanvas(idDiv, idCanvas, title)
+                  appendCanvas(idDivSample,idDiv, idCanvas, title)
 
                   val ctx = dom.document.getElementById(idCanvas)
-                  println(ctx)
                   new Chart(ctx, Chart.buildDataset(labels, values, backgroundColor))
                 case _ => println("ok")
               }