From 6c407db15cfc9ec7c332d742fd008d4d6f5fb22e Mon Sep 17 00:00:00 2001
From: Artorias <leon.giorgio@adconfact.com>
Date: Sun, 23 Mar 2025 21:32:21 +0100
Subject: [PATCH] Updated radar chart and documentation

---
 README.md                                     |  2 +-
 .../templates/sentimentsRadarChart.ftl        | 23 ++++++++++++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index fdaf3c8..59cea53 100644
--- a/README.md
+++ b/README.md
@@ -159,7 +159,7 @@ Folgende Informationen werden angezeigt:
 Der NLP-Abschnitt beinhaltet folgende Informationen:
 - Topics Information (als Bubble Chart): dabei entspricht die Größe der Bubbles der Häufigkeit/Prävalenz der Topics. Durch einen Mouse-Hover verändert sich die Schriftgröße, damit man auch die Texte der kleinen Bubbles sehen kann.
 - POS Information (als Bar Chart): Auf der X-Achse werden alle verschiedenen POS-Elemente die in der Rede erfasst wurden abgebildet, auf der Y-Achse die genaue Anzahl dieser Elemente.
-- Sentiments Information (als Radar Chart): Dieses Chart besitzt 3 Achsen, eine für den wert des positiven sentiments, eine für das negative sentiment, und die letzte für das neutrale sentiment. Die mitte des Charts steht für den Wert 0, und jede Ecke steht für den Wert 1 des zugehörigen sentiments. Es wird jeder analysierte Satz inklusive die gesamte Rede abgebildet. Ein Polygon steht hierbei für einen bestimmten analysierten Abschnitt der rede.
+- Sentiments Information (als Radar Chart): Dieses Chart besitzt 3 Achsen, eine für den wert des positiven sentiments, eine für das negative sentiment, und die letzte für das neutrale sentiment. Die mitte des Charts steht für den Wert 0, und jede Ecke steht für den Wert 1 des zugehörigen sentiments. Es wird jeder analysierte Satz inklusive die gesamte Rede abgebildet. Ein Polygon steht hierbei für einen bestimmten analysierten Abschnitt der rede. Rechts neben dem Chart ist eine Legende aller Analysierten Objekte, von welchem das erste die Werte der gesamten Rede, und alle danach die einzelnen Satzteile darstellen.
 - Named Entities (als Sunburst Chart): der innere Kreis steht für den Typ (LOC, PER, ORG, MISC). Der äußere Kreis steht für die jeweiligen Named Entities. Die Größe der Bögen entsprechen den Häufigkeiten der Entitäten bzw. der Typen.
 
 
diff --git a/src/main/resources/templates/sentimentsRadarChart.ftl b/src/main/resources/templates/sentimentsRadarChart.ftl
index 5ed193b..f6cff63 100644
--- a/src/main/resources/templates/sentimentsRadarChart.ftl
+++ b/src/main/resources/templates/sentimentsRadarChart.ftl
@@ -1,4 +1,5 @@
 <svg class="chart-svg" id="sentimentsRadarChart"></svg>
+<div id="tooltip" style="position:absolute; pointer-events:none; background:rgba(255,255,255,0.9); padding:5px; border:1px solid #ccc; border-radius:3px; display:none; font-size:12px;"></div>
 
 <script>
     var sentimentData = [];
@@ -14,6 +15,8 @@
     sentimentData.push({ pos: 0, neu: 0, neg: 0 });
     </#if>
 
+    var tooltip = d3.select("#tooltip");
+
     var width = 1000, height = 1000;
     var svg = d3.select("#sentimentsRadarChart")
         .attr("width", width)
@@ -98,22 +101,29 @@
             .attr("fill-opacity", 0.3);
     });
 
-    // Legend with wrap every 30 entries & hover highlight + bring to front
+    // Legend with wrap every 30 entries & hover highlight + tooltip + bring to front
     var legend = svg.append("g").attr("transform", "translate(" + (width - 200) + ",50)");
-    sentimentData.forEach((_, i) => {
+    sentimentData.forEach((sent, i) => {
         var col = Math.floor(i/30), row = i%30;
         var entry = legend.append("g")
             .attr("transform", "translate(" + (col*100) + "," + (row*20) + ")")
-            .on("mouseover", () => {
-                d3.select(".radar-path-" + i).raise()
-                    .attr("stroke-width", 4)
-                    .attr("fill-opacity", 0.6);
+            .on("mouseover", (event) => {
+                var path = d3.select(".radar-path-" + i).raise();
+                path.attr("stroke-width", 4).attr("fill-opacity", 0.6);
+                tooltip.style("display","block")
+                    .html(i === 0 ? "<b>Rede</b><br>Positive: "+sent.pos+"<br>Neutral: "+sent.neu+"<br>Negative: "+sent.neg
+                        : "<b>Satz "+i+"</b><br>Positive: "+sent.pos+"<br>Neutral: "+sent.neu+"<br>Negative: "+sent.neg);
+            })
+            .on("mousemove", (event) => {
+                tooltip.style("left",(event.pageX+10)+"px").style("top",(event.pageY+10)+"px");
             })
             .on("mouseout", () => {
                 d3.select(".radar-path-" + i)
                     .attr("stroke-width", 2)
                     .attr("fill-opacity", 0.3);
+                tooltip.style("display","none");
             });
+
         entry.append("rect")
             .attr("width", 12)
             .attr("height", 12)
@@ -134,3 +144,4 @@
 
 
 
+