@extends('layouts.app')

@section('content')

<h1 class="text-center">{{ $label }}</h1> 
<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>

    var url = "/app/ranking/{{ $label }}/json";
    d3.json(url).then( data => {
        let radar_data = [];
        let features = [];
        console.log(data);

        //fill the features with the subject names
        var point = {};
        for (var i = 0; i < data.length; i++) {
            var subject = data[i].subject.name;
            features.push(subject);
            point[subject] = data[i].score;
        };
        radar_data.push(point);
        console.log(radar_data);

        let svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

        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", 600)
                .attr("cy", 400)
                .attr("fill", "none")
                .attr("stroke", "gray")
                .attr("r", radialScale(t))
        );

        //draw tick labels
        ticks.forEach(t =>
            svg.append("text")
                .attr("x", 605)
                .attr("y", 400 - radialScale(t))
                .text(t.toString())
        );

        //draw axis for each feature
        function angleToCoordinate(angle, value) {
            let x = Math.cos(angle) * radialScale(value);
            let y = Math.sin(angle) * radialScale(value);
            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.2);
            svg.append("line")
                .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)
                .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);

        //get coordinates for a data point
        function getPathCoordinates(d) {
            let coordinates = [];
            for (var i = 0; i < features.length; i++) {
                let ft_name = features[i];
                let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length);
                coordinates.push(angleToCoordinate(angle, d[ft_name]));
            }
            return coordinates;
        }

        for (var i = 0; i < radar_data.length; i++) {
            let d = radar_data[i];
            let color = "red";
            let coordinates = getPathCoordinates(d);

            //draw the path element
            svg.append("path")
                .datum(coordinates)
                .attr("d", line)
                .attr("stroke-width", 3)
                .attr("stroke", color)
                .attr("fill", color)
                .attr("stroke-opacity", 1)
                .attr("opacity", 0.5);
        }
    });
</script>
@endsection