/*jslint devel es6 single*/
"use strict";

const height = 960;
const width = 960;

const l_bound = 90;
const r_bound = 180;

const svg = d3.select("body")
.append("svg")
.attr("id", "graphic")
.attr("name", "displacement of systolicBP")
.attr("height", height)
.attr("width", width);

const g = svg.append("g")
.attr("transform", "translate(" + 30 + "," + 20 + ")");

const x = d3.scaleLinear()
.rangeRound([0, width - 80]);

const y = d3.scaleLinear()
.rangeRound([height - 100, 0]);

d3.csv("data/bp.csv", function (d) {
d.patient = parseInt(d.patient);
d.min = parseInt(d.min);
d.max = parseInt(d.max);

return d;
}, function(error, data) {
    if (error) throw error;

    const _min = d3.min(data, function (d) { return d.min });
    const _max = d3.max(data, function (d) { return d.max });
    
    x.domain([_min, _max]);
    y.domain(d3.extent(data, function (d) { return d.patient }));

    let _data = [];
    data.forEach(function (d) {
        if (d.min < l_bound) {
            _data.push({ "min": d.min, "max": l_bound, "patient": d.patient });
            _data.push({ "min": l_bound, "max": d.max, "patient": d.patient });
        } else if (d.max > r_bound) {
            _data.push({ "min": d.min, "max": r_bound, "patient": d.patient });
            _data.push({ "min": r_bound, "max": d.max, "patient": d.patient });
        } else {
            _data.push({ "min": d.min, "max": d.max, "patient": d.patient });
        }
    });

    g.append("g")
    .selectAll("rect")
        .data(_data)
        .enter()
        .append("rect")
        .attr("id", function (d) { return d.patient })
        .attr("fill", function (d) {
            if (d.max > r_bound) {
                return "rgb(217, 51, 64)"
            } else if (d.min < l_bound) {
                return "rgb(217, 51, 64)"
            } else {
                return "rgb(125, 184, 255)"
            }
        })
        .attr("x", function (d) { return x(d.min) })
        .attr("y", function (d) { return y(d.patient) })
        .attr("height", 10)
        .attr("width", function (d) { return x(d.max) - x(d.min) });

    g.append("path")
        .datum(_data)
        .attr("fill", "none")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d",
            d3.line()
                .x(function (d) { return x(l_bound) })
                .y(function (d) { return y(d.patient) })
        )
        .style("stroke", "rgba(34, 64, 77, 0.6)");

    g.append("path")
        .datum(_data)
        .attr("fill", "none")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d",
            d3.line()
                .x(function (d) { return x(r_bound) })
                .y(function (d) { return y(d.patient) })
        )
        .style("stroke", "rgba(34, 64, 77, 0.6)");

    g.append("g")
        .attr("transform", "translate(" + 0 + "," + (height - 80) + ")")
        .call(d3.axisBottom(x).tickValues([_min, l_bound, r_bound, _max]))
        .attr("font-size", "1em")
        .select(".domain")
        .remove();

    g.append("text")
        .attr("x", width/2)
        .attr("y", height - 33)
        .attr("text-anchor", "middle")
        .attr("font-style", "italic")
        .attr("font-size", "1.2em")
        .text("Displacement of Systolic BP (mmHg)");
});