From e3f0753fdd65f1ba8d62195c0019af5118398051 Mon Sep 17 00:00:00 2001
From: Georgi Nikolov <gnnikolov87@gmail.com>
Date: Thu, 14 Oct 2021 21:10:27 +0200
Subject: [PATCH] The labels for the evidences are now clickable and will load
the corresponding evidence for inspection
---
resources/views/app/radar.blade.php | 32 +++++++++++++++++++----------
1 file changed, 21 insertions(+), 11 deletions(-)
diff --git a/resources/views/app/radar.blade.php b/resources/views/app/radar.blade.php
index 8411743..0fd1b58 100644
--- a/resources/views/app/radar.blade.php
+++ b/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);
--
GitLab