{% 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_footprint(footprint) %}
{% if footprint > 1000 %}
    {{ "%.1f" | format((footprint/1000.0) | round(1)) }} tons CO<sub>2</sub><small>EQ</small>
{% else %}
    {{ "%.1f" | format((footprint) | round(1)) }} kg CO<sub>2</sub><small>EQ</small>
{% endif %}
{% endmacro %}



{% macro render_cities(cities) %}
<ul class="numbered-list">
{% for city in cities %}
    <li>
        <span class="city-name" title="{{ city.address }}">
{% if loop.first %}
        <strong>
{% endif %}
        {{ city.city }}, {{ city.country }}
{% if loop.first %}
        </strong>
{% endif %}
        </span>
        –
        {{ render_footprint(city.footprint) }}
        –
        {{ "%d" | format(city.distance | round() | int) }} km
    </li>
{% endfor %}
</ul>
{% endmacro %}



{% block body %}
<h2>
    {{ estimation.get_display_name() }} ({{ 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>

<hr>
{% endif %}

{% 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>

<hr>
{% endif %}

{% if not estimation.has_failed() %}
<div class="row">
    Using
    {% for model in estimation.get_models() %}
        {{ model.name }}{{ ',' if not loop.last }}
    {% endfor %}
    {% if estimation.use_train_below_km > 0 %}
        and train travel assumed for distances below {{ estimation.use_train_below_km }} km
    {% endif %}
    .
{#    <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_spinner" class="lds-ripple text-center"><div></div><div></div><div></div></div>
    {# This MUST stay empty (because Simg uses svg.getparentnode.innerhtml) #}
    <div id="cities_footprints_d3viz_lollipop" class="plot-container">
    </div>
{#    <br>#}
{#    <p>A Legend here</p>#}
</div>

<hr>

{# EMISSIONS PER DISTANCE HISTOGRAM ##########################################}
{# That plot makes no sense with our many to many data. #}
{% if not estimation.is_many_to_many() %}
<div class="row">
    <div id="emissions_per_distance_histogram" class="plot-container"></div>
</div>
<hr>
{% endif %}
{#############################################################################}

{# SORTED EMISSIONS INEQUALITY ###############################################}
{# That plot makes no sense with our many to many data. #}
{% if not estimation.is_many_to_many() %}
<div class="row">
    <div id="sorted_emissions_inequality" class="plot-container"></div>
</div>
<hr>
{% endif %}
{#############################################################################}

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


{# LIST OF CITIES ############################################################}
<div class="row">

{% if not estimation.has_failed() %}

    <div class="col-md-6">
    {#
    The estimation sum is only meaningful when
    there's a single origin or a single destination.
    #}
    {% if not estimation.is_many_to_many() %}
        <h4 class="salient">
            Total:
            <em>
                {{ render_footprint(estimation_sum) }}
            </em>
        </h4>
    {% endif %}

    {% 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 id="cities_footprints_d3viz_lollipop_download_png"
                   href="#"
                   title="This may not work on IE nor Edge."
                   class="btn btn-lg btn-secondary">
                    Download Plot PNG
                </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>

        <hr>

        <div id="d3viz_emissions_equidistant_map" class="plot-container-noborder"></div>

        <div id="d3viz_travels" class="plot-container-noborder"></div>

    </div>

</div>

<hr>


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


<div>
    {{ content.estimation.footer | markdown | safe }}
</div>

{# Buffer to drop the PNG image into, to trick firefox into downloading the PNG #}
<div id="png_buffer"></div>

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

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

{% block js %}
{% if not estimation.has_failed() %}

{# Eventually, once we're done with plots, use flask's asset minifier #}
<script src="/static/js/vendor/d3.v6.js"></script>
<script src="/static/js/vendor/d3-legend.js"></script>
<script src="/static/js/vendor/d3-scale-chromatic.v1.min.js"></script>
<script src="/static/js/vendor/d3-geo-projection.v2.min.js"></script>
<script src="/static/js/plots/utils.js"></script>
<script src="/static/js/plots/emissions-per-distance.js"></script>
<script src="/static/js/plots/emissions-equidistant-map.js"></script>
<script src="/static/js/plots/sorted-emissions-inequality.js"></script>
<script src="/static/js/plots/travel-legs-worldmap.js"></script>

<script type="text/javascript">

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

{% if not estimation.is_many_to_many() %}

draw_emissions_per_distance(
    "#emissions_per_distance_histogram",
    "/estimation/{{ estimation.public_id }}.csv"
);

draw_sorted_emissions_inequality(
    "#sorted_emissions_inequality",
    "/estimation/{{ estimation.public_id }}.csv"
);
{% endif %}


draw_emissions_equidistant_map(
    "#d3viz_emissions_equidistant_map",
    {#"/static/public/data/worldmap.geo.json",#}
    "/static/public/data/world-earth.geojson",
    {#"/static/public/data/countries-coordinates.csv",#}
    "/estimation/{{ estimation.public_id }}.csv"
    {#"/estimation/{{ estimation.public_id }}/trips_to_destination_0.csv"#}
);


{#draw_travel_legs_worldmap(#}
{#    "#d3viz_travels",#}
{#    "/static/public/data/world-earth.geojson",#}
{#    "/estimation/{{ estimation.public_id }}/trips_to_destination_0.csv"#}
{#);#}



{#
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($){
    console.info("[Footprint Lollipop] Starting…");
    var vizid = "#cities_footprints_d3viz_lollipop";
    var csvUrl = "/estimation/{{ estimation.public_id }}.csv";
    var y_key = 'address';
    var x_key = 'co2_kg';

    var margin = {top: 40, right: 40, bottom: 150, left: 180};
    var height = Math.max(300, 100 + 16*plots_config['cities_count']) - margin.top - margin.bottom;
    var width = Math.max(800, $(vizid).parent().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).then(function (data) {
        console.info("[Footprint Lollipop] Generating…");

        // Resize left margin from locations' character length
        var max_character_length = 0;
        data.forEach(function(datum){
            max_character_length = Math.max(max_character_length, datum[y_key].length);
        });
        margin.left = Math.min(Math.round(0.618 * width), 42 + Math.round(5.13*max_character_length));
        width = Math.max(800, $(vizid).parent().width()) - margin.left - margin.right;
        svg_tag
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);
        svg.attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

        // 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 SVG
        $(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;
        });

        // Download PNG
        $(vizid+"_download_png").click(function(e){
            e.stopPropagation();
            // Show the values
            $(vizid+" svg .value-text").css("opacity", 1);
            // May not work everywhere, but…
            var simg = new Simg($(vizid + " svg")[0]);
            simg.download("travel_carbon_footprint_{{ estimation.public_id }}");
            // Hide the values
            $(vizid+" svg .value-text").css("opacity", 0);
            return false;
        });

        $('#cities_footprints_spinner').hide();
        console.info("[Footprint Lollipop] Done.");
    });

});



</script>

{% endif %}
{% endblock %}