The labels for the evidences are now clickable and will load the corresponding...

The labels for the evidences are now clickable and will load the corresponding evidence for inspection

resources/views/app/radar.blade.php

@@ -3,7 +3,7 @@
 @section('content')
 
 <h1 class="text-center">{{ $label }}</h1> 
-<svg width="800" height="800"></svg>
+<svg width="1200" height="800"></svg>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js" integrity="sha512-COTaPOlz12cG4fSfcBsxZsjauBAyldqp+8FQUM/dZHm+ts/jR4AFoJhCqxy8K10Jrf3pojfsbq7fAPTb1XaVkg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script>
@@ -12,6 +12,7 @@
     d3.json(url).then( data => {
         let radar_data = [];
         let features = [];
+        console.log(data);
 
         //fill the features with the subject names
         var point = {};
@@ -27,14 +28,14 @@
         width = +svg.attr("width"),
         height = +svg.attr("height");
 
-        let radialScale = d3.scaleLinear().domain([0, 1]).range([0, 250]);
+        let radialScale = d3.scaleLinear().domain([0, 1]).range([0, 300]);
         let ticks = [0.2, 0.4, 0.6, 0.8, 1];
 
         //draw grid lines (circles)
         ticks.forEach(t =>
             svg.append("circle")
-                .attr("cx", 300)
-                .attr("cy", 300)
+                .attr("cx", 600)
+                .attr("cy", 400)
                 .attr("fill", "none")
                 .attr("stroke", "gray")
                 .attr("r", radialScale(t))
@@ -43,8 +44,8 @@
         //draw tick labels
         ticks.forEach(t =>
             svg.append("text")
-                .attr("x", 305)
-                .attr("y", 300 - radialScale(t))
+                .attr("x", 605)
+                .attr("y", 400 - radialScale(t))
                 .text(t.toString())
         );
 
@@ -52,23 +53,32 @@
         function angleToCoordinate(angle, value) {
             let x = Math.cos(angle) * radialScale(value);
             let y = Math.sin(angle) * radialScale(value);
-            return { "x": 300 + x, "y": 300 - y };
+            return { "x": 600 + x, "y": 400 - y };
         }
         for (var i = 0; i < features.length; i++) {
             let ft_name = features[i];
             let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length);
             let line_coordinate = angleToCoordinate(angle, 1);
-            let label_coordinate = angleToCoordinate(angle, 1.1);
+            let label_coordinate = angleToCoordinate(angle, 1.2);
             svg.append("line")
-                .attr("x1", 300)
-                .attr("y1", 300)
+                .attr("x1", 600)
+                .attr("y1", 400)
                 .attr("x2", line_coordinate.x)
                 .attr("y2", line_coordinate.y)
                 .attr("stroke", "black");
             svg.append("text")
+                .style("font-size", "25px")
                 .attr("x", label_coordinate.x)
                 .attr("y", label_coordinate.y)
-                .text(ft_name);
+                .text(ft_name)
+                .on("click", function(d) {
+                    var id = 0;
+                    for (var n = 0; n < data.length; n++) {
+                        if (data[n].subject.name == ft_name) {
+                            id = data[n].id;
+                        }
+                    };
+                    window.location =  "/app/evidence/" + id;});
         }
         //drawing the line for the spider chart
         let line = d3.line().x(d => d.x).y(d => d.y);