{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block body %}

    <div class="row pb-4">
        <div class="col-lg-4"></div>
        <div class="col-lg-4 text-center">
            <a href="{{ url_for('.estimate') }}" class="btn btn-lg btn-primary">
                Request Estimation
            </a>
        </div>
        <div class="col-lg-4"></div>
    </div>

    {# PLOT SCALING LAWS #####################################################}

    <div class="row">
        <div class="col-lg-12 text-center mb-5">
            <div id="scaling_laws_spinner" class="lds-ripple text-center"><div></div><div></div><div></div></div>
            <div id="scaling_laws_d3viz" class="plot-container"></div>
        </div>
    </div>

    {# THREE COLMUNS TEXT LAYOUT #############################################}

    {% for section in content.home.sections -%}
    <div class="row">
        {% for block in section.blocks -%}
        <div class="col-md-4 text-justify">
            {% if block.title -%}
            <h3>{{ block.title }}</h3>
            {%- endif %}
            {{ block.content | markdown | safe }}
        </div>
        {%- endfor %}
    </div>
    {%- endfor %}

{% endblock %}

{#############################################################################}
{## JAVASCRIPT ###############################################################}

{% block js %}
<script src="/static/js/vendor/d3.v4.js"></script>
<script src="/static/js/vendor/d3-legend.js"></script>
{#<script src="https://d3js.org/d3.v4.js"></script>#}
{#<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.js"></script>#}

<script type="text/javascript">

/** POLYFILLS **/
Math.log10 = Math.log10 || function(x) {
  return Math.log(x) * Math.LOG10E;
};

/**
 * Useful for axes' domains on plots.
 * @param value
 * @returns {number}
 */
var ceil_value_to_magnitude = function(value) {
    var sign = 1;
    if (value < 0) {
        value = Math.abs(value);
        sign = -1;
    }
    if (value < 1) {
        return sign;
    }

    var low = Math.pow(10, Math.floor(Math.log10(value)));

    var cursor = low;
    var follop = 0;
    while ((cursor < value) && (follop <= 100)) {
        cursor += 0.1 * low;
        follop += 1;
    }

    return sign * cursor;
};


var models = {{ models | tojson }};


/** PLOTS **/
jQuery(document).ready(function($){

    var vizid = "#scaling_laws_d3viz";
    var csvUrl = "/scaling_laws.csv";

    // Set the dimensions and margins of the graph
    var margin = {top: 30, right: 30, bottom: 75, left: 70},
        height = 666 - margin.top - margin.bottom;
    var width = Math.max(666, $(vizid).parent().width());
    width = width - margin.left - margin.right;

    var svg = d3.select(vizid)
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

    d3.csv(csvUrl, function (data) {

        // List of subgroups = header of the csv files = soil condition here
        var subgroups = data.columns.slice(1);

        // List of groups = species here = value of the first column called group -> I show them on the X axis
        var groups = d3.map(data, function (d) {
            return (d.distance);
        }).keys();

        // Add X axis
        var x = d3.scaleBand()
            .domain(groups)
            .range([0, width])
            .padding([0.2]);
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x).tickSize(0));

        // Add Y axis
        var y = d3.scaleLinear()
            .domain([0, 4000])
            .range([height, 0]);
        svg.append("g")
            .call(d3.axisLeft(y));

        // Another scale for subgroup position?
        var xSubgroup = d3.scaleBand()
            .domain(subgroups)
            .range([0, x.bandwidth()])
            .padding([0.05]);

{#{% set colors=[model.color for model in models] %}#}

        // color palette = one color per subgroup
        var color = d3.scaleOrdinal()
            .domain(subgroups)
            .range({{ colors | tojson }});
            {#.range(['#e41a1c', '#377eb8', '#4daf4a']);#}

        // Show the bars
        svg.append("g")
            .selectAll("g")
            // Enter in data = loop group per group
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d) {
                return "translate(" + x(d.distance) + ",0)";
            })
            .selectAll("rect")
            .data(function (d) {
                return subgroups.map(function (key) {
                    return {key: key, value: d[key]};
                });
            })
            .enter().append("rect")
            .attr("x", function (d) {
                return xSubgroup(d.key);
            })
            .attr("y", function (d) {
                return y(0);
            })
            .attr("width", xSubgroup.bandwidth())
            .attr("height", function (d) {
                return 0;
            })
            //.attr("height", function (d) {
            //    return height - y(d.value);
            //})
            .attr("fill", function (d) {
                return color(d.key);
            });

        svg.selectAll("rect")
            .transition()
            .duration(500)
            .attr("y", function (d) {
                return y(d.value);
            })
            .attr("height", function (d) {
                return height - y(d.value);
            })
            .delay(function(d, i) { return(i*100); });

        // Title
        svg.append("g")
            .append('text')
            .attr("transform", "translate(" + (-180 + width / 2.0) + "," + (height + 50) + ")")
            .text("CO\u2082 emissions (kg) as a function of travelling distance (km).");

        // Legend
        svg.append("g")
            .attr("class", "legendQuant")
            .attr("transform", "translate(20,20)");

        var legend = d3.legendColor()
            {#.labelFormat(d3.format(".2f"))#}
            {#.useClass(true)#}
            {#.title("Legend")#}
            {#.titleWidth(100)#}
            .labels({{ labels | tojson }})
            .scale(color);

        svg.select(".legendQuant")
            .call(legend);

        // …


        $('#scaling_laws_spinner').hide();

    })

});
</script>
{% endblock %}