From 036e360e0dab0618165f52cc1c36e4c2f41e1887 Mon Sep 17 00:00:00 2001
From: s5260822 <s5260822@stud.uni-frankfurt.de>
Date: Thu, 20 Mar 2025 21:37:17 +0100
Subject: [PATCH] rearranged charts to 2x2 grid

---
 src/main/resources/static/index.css           | 22 +++++++
 src/main/resources/templates/nlp.ftl          | 66 +++++++++++--------
 src/main/resources/templates/posBarChart.ftl  |  2 +-
 .../templates/sentimentsRadarChart.ftl        |  2 +-
 .../resources/templates/topicsBubbleChart.ftl |  2 +-
 5 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/src/main/resources/static/index.css b/src/main/resources/static/index.css
index 94d0436..84f99c5 100644
--- a/src/main/resources/static/index.css
+++ b/src/main/resources/static/index.css
@@ -266,3 +266,25 @@ tbody tr:hover {
 select {
     min-width: 200px;
 }
+
+.chart-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(1000px, 1fr));
+  grid-template-rows: repeat(2, 1fr);
+  gap: 10px;
+  width: 100%;
+}
+
+.chart {
+  background-color: lightgray;
+  padding: 30px;
+  text-align: center;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  height: 800px;
+}
+
+.chart-svg {
+    transform: scale(0.9);
+    z-index: 1;
+}
diff --git a/src/main/resources/templates/nlp.ftl b/src/main/resources/templates/nlp.ftl
index 491c488..0f0b3a1 100644
--- a/src/main/resources/templates/nlp.ftl
+++ b/src/main/resources/templates/nlp.ftl
@@ -1,32 +1,40 @@
-    <#if s.nlp.topics??>
-         <h3>Topics Information (als Bubble Chart)</h3>
-         <#assign condenseTopicInformation = s.nlp.topics>
-         <#include "topicsBubbleChart.ftl">
-    <#else>
-        <h3>Keine Topics Information für diese Rede verfügbar</h3>
-    </#if>
+<div class="chart-container">
+    <div class="chart">
+        <#if s.nlp.topics??>
+             <h3>Topics Information (als Bubble Chart)</h3>
+             <#assign condenseTopicInformation = s.nlp.topics>
+             <#include "topicsBubbleChart.ftl">
+        <#else>
+            <h3>Keine Topics Information für diese Rede verfügbar</h3>
+        </#if>
+    </div>
 
-    <#if s.nlp.posList??>
-         <h3>POS Information (als Bar Chart)</h3>
-         <#assign posList = s.nlp.posList>
-         <#include "posBarChart.ftl">
-    <#else>
-        <h3>Keine POS Information verfügbar für diese Rede verfügbar</h3>
-    </#if>
+    <div class="chart">
+        <#if s.nlp.posList??>
+             <h3>POS Information (als Bar Chart)</h3>
+             <#assign posList = s.nlp.posList>
+             <#include "posBarChart.ftl">
+        <#else>
+            <h3>Keine POS Information verfügbar für diese Rede verfügbar</h3>
+        </#if>
+    </div>
 
+    <div class="chart">
+        <#if sentiment??>
+            <h3>Sentiments Information (als Radar Chart)</h3>
+            <#include "sentimentsRadarChart.ftl">
+        <#else>
+            <h3>Keine Sentiments Information für diese Rede verfügbar</h3>
+        </#if>
+    </div>
 
-    <#if sentiment??>
-        <h3>Sentiments Information (als Radar Chart)</h3>
-        <#include "sentimentsRadarChart.ftl">
-    <#else>
-        <h3>Keine Sentiments Information für diese Rede verfügbar</h3>
-    </#if>
-
-
-    <#if s.nlp.namedEntities??>
-         <h3>Named Entities Information (als Sunburst Chart)</h3>
-         <#assign nea = s.nlp.namedEntities>
-         <#include "namedEntitiesSunburstChart.ftl">
-    <#else>
-        <h3>Keine Named Entities Information für diese Rede verfügbar</h3>
-    </#if>    
\ No newline at end of file
+    <div class="chart">
+        <#if s.nlp.namedEntities??>
+             <h3>Named Entities Information (als Sunburst Chart)</h3>
+             <#assign nea = s.nlp.namedEntities>
+             <#include "namedEntitiesSunburstChart.ftl">
+        <#else>
+            <h3>Keine Named Entities Information für diese Rede verfügbar</h3>
+        </#if>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/posBarChart.ftl b/src/main/resources/templates/posBarChart.ftl
index 26c3e36..08b2972 100644
--- a/src/main/resources/templates/posBarChart.ftl
+++ b/src/main/resources/templates/posBarChart.ftl
@@ -1,4 +1,4 @@
-<svg id="posBarchart"></svg>
+<svg class="chart-svg" id="posBarchart"></svg>
 
 <script>
     // Define variables only in JavaScript
diff --git a/src/main/resources/templates/sentimentsRadarChart.ftl b/src/main/resources/templates/sentimentsRadarChart.ftl
index 12938b5..9ae0d41 100644
--- a/src/main/resources/templates/sentimentsRadarChart.ftl
+++ b/src/main/resources/templates/sentimentsRadarChart.ftl
@@ -1,4 +1,4 @@
-<svg id="sentimentsRadarChart"></svg>
+<svg class="chart-svg" id="sentimentsRadarChart"></svg>
 <script src="https://d3js.org/d3.v6.min.js"></script>
 <script>
     // Retrieve sentiment values from the passed attribute "sentiment"
diff --git a/src/main/resources/templates/topicsBubbleChart.ftl b/src/main/resources/templates/topicsBubbleChart.ftl
index 5e39aa2..7eb2885 100644
--- a/src/main/resources/templates/topicsBubbleChart.ftl
+++ b/src/main/resources/templates/topicsBubbleChart.ftl
@@ -1,4 +1,4 @@
-    <svg id="topicsBubblechart"></svg>
+    <svg class="chart-svg" id="topicsBubblechart"></svg>
 
     <script>