Updated radar chart and documentation

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