{% extends "base.html" %}


{% block title %}Estimation {{ estimation.public_id }} of your ✈ travel footprint{% endblock %}


{% block hero %}
<div class="jumbotron">
{% if estimation.has_failed() %}
    <h1>{{ content.estimation.failure.hero.title | safe }}</h1>
    <p>{{ content.estimation.failure.hero.description | markdown | safe }}</p>
{% else %}
    <h1>{{ content.estimation.hero.title | safe }}</h1>
    <p>{{ content.estimation.hero.description | markdown | safe }}</p>
{% endif %}
</div>
{% endblock %}

{% macro render_cities(cities) %}
<ul class="numbered-list">
{% for city in cities %}
    <li>
        <span class="city-name" title="{{ city.address }}">
    {% if loop.first %}
        <strong>
        {{ city.city }}
        </strong>
    {% else %}
        {{ city.city }}
    {% endif %}
        </span>
        –

        {{ "%.1f" | format((city.footprint/1000.0) | round(1)) }} tons CO<sub>2</sub><small>EQ</small>

        –

        {{ "%d" | format(city.distance | round() | int) }} km

    </li>
{% endfor %}
</ul>
{% endmacro %}

{% block body %}
<h2>
    {{ estimation.public_id }} ({{ estimation.status.name }})
</h2>

{% if estimation.errors %}

<div class="row">
    <div class="col-md-12 alert-danger card">

        <div class="card-body">
            <h3 class="card-title">Errors</h3>
            <pre>
{{ estimation.errors }}
            </pre>
        </div>
    </div>

</div>
{% endif %}

<div class="row">

    Using
    {% for model in estimation.get_models() %}
        {{ model.name }}{{ ',' if not loop.last }}
    {% endfor %}

{#    <h4>Total CO<sub>2</sub> footprint (in kilograms-equivalent) of each city</h4>#}
{#    <div id="cities_footprints_d3viz" class="plot-container"></div>#}

    <hr>

    <div id="cities_footprints_d3viz_lollipop" class="plot-container"></div>

{#    <br>#}
{#    <p>A Legend here</p>#}
</div>

<hr>

<div class="row">

{% if not estimation.has_failed() %}

{#{% set estimation_output = estimation.get_output_dict() %}#}

<div class="col-md-6">
{% if estimation.is_one_to_one() %}
    {{ content.estimation.lolliplot.one_to_one | markdown | safe }}

    {{ render_cities(estimation_output.cities) }}

{% elif estimation.is_many_to_one() %}
    {{ content.estimation.lolliplot.many_to_one | markdown | safe }}

    {{ render_cities(estimation_output.cities) }}
{% elif estimation.is_one_to_many() %}
    {{ content.estimation.lolliplot.one_to_many | markdown | safe }}

    {{ render_cities(estimation_output.cities) }}
{% elif estimation.is_many_to_many() %}
    {{ content.estimation.lolliplot.many_to_many | markdown | safe }}

    {{ render_cities(estimation_output.cities) }}

{% endif %}

</div>

    <div class="col-md-6">

        <ul class="nav">
            <li class="nav-item m-4">
                <a href="/estimation/{{ estimation.public_id }}.csv" class="btn btn-lg btn-primary">
                    Download CSV
                </a>
            </li>
            <li class="nav-item m-4">

                <a href="/estimation/{{ estimation.public_id }}.yml" class="btn btn-lg btn-warning">
                    Download Raw YAML

                </a>
            </li>

            <li class="nav-item m-4">
                <a id="cities_footprints_d3viz_lollipop_download"
                   href="#"
                   title="This may not work on IE nor Edge.  Please use a decent browser like Firefox."
                   class="btn btn-lg btn-secondary">
                    Download Plot SVG
                </a>
            </li>

{#            <li class="nav-item m-4">#}
{#                <a href="/estimation/{{ estimation.public_id }}.xls" class="btn btn-lg btn-secondary disabled">#}
{#                    Download XLS#}
{#                </a>#}
{#            </li>#}
{#            <li class="nav-item m-4">#}
{#                <a href="/estimation/{{ estimation.public_id }}.ods" class="btn btn-lg btn-secondary disabled">#}
{#                    Download ODS#}
{#                </a>#}
{#            </li>#}

        </ul>

    </div>

</div>

<hr>

{% if estimation.warnings %}
<div class="row">
    <div class="col-md-12 alert-warning card">
        <div class="card-body">
            <h3 class="card-title">Warnings</h3>
            <pre>
{{ estimation.warnings }}
            </pre>
        </div>
    </div>
</div>
{% endif %}

{#<div class="row">#}
{#    <div class="col-md-6">#}
{#        <h3>Raw Output <small>(YAML)</small></h3>#}
{#        <pre>#}
{#{{ estimation.output_yaml }}#}
{#        </pre>#}
{#    </div>#}
{#</div>#}

{% endif %}{# estimation.has_failed() #}

{% endblock %}

{#############################################################################}
{#############################################################################}

{% 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 noloop = 0;
    while ((cursor < value) && (noloop <= 100)) {

        cursor += 0.1 * low;

        noloop += 1;

    }

    return sign * cursor;
};

/** CONFIG **/

var plots_config = {
    'cities_count': {{ estimation_output.cities | length }}
};

/** PLOTS **/

{#

jQuery(document).ready(function($){

    var vizid = "#cities_footprints_d3viz";

    var csvUrl = "/estimation/{{ estimation.public_id }}.csv";
    var x_key = 'city';

    var y_key = 'co2 (kg)';

    // Set the dimensions and margins of the graph

    var margin = {top: 10, right: 30, bottom: 150, left: 150},

        height = 666 - margin.top - margin.bottom;
    var width = Math.max(880, $(vizid).parent().width());
    width = width - margin.left - margin.right;

    // Append the svg object to the body of the page
    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 + ")");

    // Parse the Data

    d3.csv(csvUrl, function(data) {

        // Extrema

        var data_y_max = d3.max(data, function(d) { return parseFloat(d[y_key]); });

        var axis_y_max = ceil_value_to_magnitude(data_y_max);

        // X axis
        var x = d3.scaleBand()
          .range([ 0, width ])

          .domain(data.map(function(d) { return d[x_key]; }))

          .padding(0.2);
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
          .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");

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

        // Bars
        svg.selectAll("mybar")
          .data(data)
          .enter()
          .append("rect")

            .attr("x", function(d) { return x(d[x_key]); })

            .attr("width", x.bandwidth())
            .attr("fill", "#d0808b")

            // Hide bars at the beginning

            .attr("height", function(d) { return height - y(0); }) // always equal to 0
            .attr("y", function(d) { return y(0); });

        // Animation
        svg.selectAll("rect")
          .transition()
          .duration(800)

          .attr("y", function(d) { return y(d[y_key]); })
          .attr("height", function(d) { return height - y(d[y_key]); })

          .delay(function(d, i) { return(i*100); });

        // …
    });

});

#}

jQuery(document).ready(function($){
    var vizid = "#cities_footprints_d3viz_lollipop";
    var csvUrl = "/estimation/{{ estimation.public_id }}.csv";
    var y_key = 'city';

    var x_key = 'co2 (kg)';

    var margin = {top: 10, right: 30, bottom: 150, left: 150},
        height = Math.max(300, 100+16*plots_config['cities_count']) - margin.top - margin.bottom;

    var width = Math.max(880, $(vizid).parent().width());
    width = width - margin.left - margin.right;

    var svg_tag = d3.select(vizid)

      .append("svg")
        .attr("width", width + margin.left + margin.right)

        .attr("height", height + margin.top + margin.bottom);

    // Add a background
    svg_tag.append("rect")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("fill", "#ffffff");

    var svg = svg_tag

      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

    d3.csv(csvUrl, function (data) {

        // Extrema

        var data_x_max = d3.max(data, function (d) { return parseFloat(d[x_key]); });

        var axis_x_max = ceil_value_to_magnitude(data_x_max);

        // X axis

        var x = d3.scaleLinear()
            .domain([0, axis_x_max])
            .range([0, width]);

            {#.nice();#}

        svg.append("g")

            .attr("class", "axis-bottom")

            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x))
            .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");

        // Y axis
        var y = d3.scaleBand()
            .range([0, height])
            .domain(data.map(function (d) {
                return d[y_key];
            }))
            .padding(1);
        svg.append("g")

            .attr("class", "axis-left")

            .call(d3.axisLeft(y));

        {#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)#}
        {#    .scale(y);#}
        {##}
        {#svg.select(".legendQuant")#}
        {#    .call(legend);#}

        // Lines
        svg.selectAll("myline")
            .data(data)
            .enter()
            .append("line")
//            .attr("x1", function (d) {
//                return x(d[x_key]);
//            })

            .attr("class", "stick")

            .attr("x1", x(0))
            .attr("x2", x(0))
            .attr("y1", function (d) {
                return y(d[y_key]);
            })
            .attr("y2", function (d) {
                return y(d[y_key]);
            })
            .attr("stroke", "grey");

        // Circles
        svg.selectAll("mycircle")
            .data(data)
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                return x(d[x_key]);
            })
            .attr("cy", function (d) {
                return y(d[y_key]);
            })

            .attr("r", "0")  // animated below

            .style("fill", "#69b3a2")
            .attr("stroke", "black");

        // Value text on mouse hover
        svg.selectAll("hoverrects")
            .data(data)
            .enter()
            .append("rect")
            .style("opacity", 0)
            .attr("class", "hover_trigger")
            .attr("data-target", function (d, i) {
                return "hover_value_" + i.toString();
            })
            .attr("x", function (d) {
                return 0;
            })
            .attr("y", function (d) {
                return y(d[y_key])-6;
            })
            .attr("width", width)
            .attr("height", 13)
            .on("mouseenter", function (d) {
                var target_id = d3.select(this).attr("data-target");
                d3.select("#"+target_id).style("opacity", 1);
                d3.select("#shadow_"+target_id).style("opacity", 1);
            })
            .on("mouseleave", function (d) {
                var target_id = d3.select(this).attr("data-target");
                d3.select("#"+target_id).style("opacity", 0);
                d3.select("#shadow_"+target_id).style("opacity", 0);
            });

        var compute_text_anchor = function (d) {
            if (x(d[x_key]) < width / 2.0) {
                return 'start';
            } else {
                return 'end';
            }
        };
        var compute_text_text = function (d) {
            return Math.round(d[x_key]).toLocaleString() + " kg CO\u2082";
        };
        var compute_text_transform = function (d) {
            var x_pos = x(d[x_key]);
            if (x_pos < width / 2.0) {
                return "translate("+(x(d[x_key])+7)+","+(y(d[y_key])+4)+")";
            } else {
                return "translate("+(x(d[x_key])-9)+","+(y(d[y_key])+4)+")";
            }
        };

        svg.selectAll("hovertextsshadows")
            .data(data)
            .enter()
            .append("text")
            .style("opacity", 0)
            .style("pointer-events", "none")
            .style("stroke", "white")
            .style("stroke-width", "0.618em")
            .attr("id", function (d, i) {
                return "shadow_hover_value_" + i.toString();
            })

            .attr("class", "value-text")

            .attr("font-size", 10)
            .attr("text-anchor", compute_text_anchor)
            .attr("transform", compute_text_transform)
            .text(compute_text_text);

        svg.selectAll("hovertexts")
            .data(data)
            .enter()
            .append("text")
            .style("opacity", 0)
            .style("pointer-events", "none")
            .attr("id", function (d, i) {
                return "hover_value_" + i.toString();
            })

            .attr("class", "value-text")

            .attr("font-size", 10)
            .attr("text-anchor", compute_text_anchor)
            .attr("transform", compute_text_transform)
            .text(compute_text_text);


        // Animations

        var animation_duration = 300;
        var animation_delay = 100;

        svg.selectAll("circle")
            .transition()
            .duration(animation_duration)
            .attr("r", "4")

            .delay(function (d, i) { return(i*animation_delay); });

        svg.selectAll("line.stick")

            .transition()

            .duration(animation_duration*0.618)

            .attr("x1", function (d) { return x(d[x_key]); })

            .delay(function (d, i) { return(i*animation_delay); });

        // Title
        svg.append("g")
            .append('text')
            .attr("transform", "translate("+(-180+width/2.0)+","+(height+111)+")")
            .text("CO\u2082 emissions equivalent (kg) per target city.");

        // Download
        $(vizid+"_download").click(function(e){
            e.stopPropagation();
            // Show the values
            $(vizid+" svg .value-text").css("opacity", 1);
            // This possibly won't work on IE and Edge
            saveSvg($(vizid + " svg")[0], "travel_carbon_footprint_{{ estimation.public_id }}.svg");
            // Hide the values
            $(vizid+" svg .value-text").css("opacity", 0);
            return false;
        });

    });

});

</script>
{% endblock %}