{% extends "base.html" %}

{% block extrahead %}
<script src="{{ url_for('static', filename="d3-tip/d3-tip.js") }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename="d3-tip/d3-tip.css") }}" type="text/css" media="screen, projection">
<script src="{{ url_for('static', filename="js/hinton.js") }}"></script>
<script src="{{ url_for('static', filename="js/stepped-histogram.js") }}"></script>
<script src="{{ url_for('static', filename="js/treemap.js") }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename="css/treemap.css") }}" type="text/css" media="screen, projection">
<script src="{{ url_for('static', filename="js/force-directed.js") }}"></script>
{% endblock %}

{% block body %}
<div id="online-report"></div>
<div class="span-15 colborder">
	<h2 style="margin-bottom: 0">Functional unit:</h2>
	<ul style="margin-bottom: 0" id="activity"></ul>
	<h2 style="margin-bottom: 0">Impact assessment method:</h2>
	<p class="large" style="margin-bottom: 0; line-height: 1.2em" id="method-name"></p>
</div>
<div class="span-8 last">
	<h2>Total score:</h2>
	<p class="large"><span style="font-size: 2.5em; color:#000" id="ia-score"></span> <span class="ia-unit"></span></p>
</div>
<hr>
<div id="mc-wrapper">
  <h1 style="margin-bottom: 0">Monte Carlo results</h1>
  <div class="span-7">
  	<h2 style="margin-bottom: 0">Median</h2>
  	<p class="large"><span style="font-size: 2.5em; color:#000" id="mc-median"></span> <span class="ia-unit"></span></p>
  	<h2 style="margin-bottom: 0">Average</h2>
  	<p class="large"><span style="font-size: 2.5em; color:#000" id="mc-mean"></span> <span class="ia-unit"></span></p>
  	<h2 style="margin-bottom: 0">95% density interval</h2>
  	<p class="large"><span style="font-size: 2.5em; color:#000"> <span id="mc-lower"></span>:<span id="mc-upper"></span></span> <span class="ia-unit"></span></p>
  </div>
  <div class="span-17 last" id="ihist"></div>
  <hr>
</div>
<div class="span-24">
  <h1 style="margin-bottom: 0">Treemap</h1>
  <div id="treemap"></div>
</div>
<hr>
<div id="fd-wrapper">
  <h1 style="margin-bottom: 0">Force-directed graph</h1>
  <button id="switch-fd-graph-state">Individual weights</button>
  <div class="span-24" id="fd-graph"></div>
  <hr>
</div>
<div class="span-24"></div>
<h1 style="margin-bottom: 0">Hinton matrix</h1>
<div class="span-14" id="hinton">
</div>
<div class="span-10 last">
	<h2 style="margin-bottom: 0"><a href="http://en.wikipedia.org/wiki/Concentration_ratio">Concentration index</a></h2>
	<p class="large" style="font-size: 2.5em; color:#000; margin-bottom: 0" id="concentration-ratio"></p>
	<h2 style="margin-bottom: 0"><a href="http://en.wikipedia.org/wiki/Herfindahl_index">Herfindahl index</a></h2>
	<p class="large" style="font-size: 2.5em; color:#000; margin-bottom: 0" id="herfindahl"></p>
</div>

<script type="text/javascript">
$(document).ready( function() {
  var report_data = {{ data|safe }},
    activity = "",
    w = 950,
    h = 800,
    max_size = 40,
    min_size = 6,
    color_scale = d3.scale.category20();

  // Replace DOM elements with correct content
  $('#herfindahl').html(report_data.contribution.herfindahl.toPrecision(2));
  $('#concentration-ratio').html(report_data.contribution.concentration.toPrecision(2));
  $('.ia-unit').html(report_data.method.unit);
  $('#method-name').html(report_data.method.name);
  $('#ia-score').html(report_data.score.toPrecision(2));

  if ("online" in report_data.metadata) {
    $("#online-report").html('<p class="success">This report also available online: <a href="' + report_data.metadata.online + '">' + report_data.metadata.online + '</a></p>');
  };

  if (report_data["monte carlo"] !== null && report_data["monte carlo"] !== undefined) {
    $('#mc-median').html(report_data["monte carlo"].statistics.median.toPrecision(4));
    $('#mc-mean').html(report_data["monte carlo"].statistics.mean.toPrecision(4));
    $('#mc-lower').html(report_data["monte carlo"].statistics.interval[0].toPrecision(4));
    $('#mc-upper').html(report_data["monte carlo"].statistics.interval[1].toPrecision(4));
    stepped_histogram(report_data["monte carlo"], report_data.method.unit, "#ihist", 680, 300, 10);
  } else {
    $("#mc-wrapper").hide();
  };

  for (var i = report_data.activity.length - 1; i >= 0; i--) {
    activity = activity + "<li class=&quotlarge&quot style=&quotmargin-bottom: 0; line-height: 1.1em&quot>" + report_data.activity[i][0] + ": " + report_data.activity[i][1] + " " + report_data.activity[i][2] + "</li>"
  };
  $('#activity').html(activity);

  if (report_data.force_directed !== undefined && report_data.force_directed !== null) {
    force_directed_graph(report_data.force_directed, color_scale, 950, 600, 6, 40, "#fd-graph", "#switch-fd-graph-state")
  } else {
    $("#fd-wrapper").hide();
  };

  // Insert graphics
  hinton_matrix(report_data.contribution.hinton.results, report_data.contribution.hinton.total, report_data.contribution.hinton.xlabels, report_data.contribution.hinton.ylabels, "#hinton", 560, 560, 10);

  var width = 950,
      height = 200,
      color = d3.scale.category20();

  TreemapGraph("#treemap", report_data.contribution.treemap, 950, 600);
});
</script>
{% endblock %}
