rearranged charts to 2x2 grid

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;
+}

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>    
+    <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>

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

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"

src/main/resources/templates/topicsBubbleChart.ftl

@@ -1,4 +1,4 @@
-    <svg id="topicsBubblechart"></svg>
+    <svg class="chart-svg" id="topicsBubblechart"></svg>
 
     <script>