Source

brightway2-ui / bw2ui / web / templates / lca.html

Full commit
{% extends "base.html" %}

{% block extrahead %}
<style type="text/css">
.cell {
  border: solid 1px white;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}
</style>
<script src="{{ url_for('static', filename="js/hinton.js") }}"></script>
<script src="{{ url_for('static', filename="js/interp-histogram.js") }}"></script>
<script src="{{ url_for('static', filename="js/hinton.js") }}"></script>
{% endblock %}

{% block body %}
<div class="span-15 colborder">
	<h2 style="margin-bottom: 0">Functional unit:</h2>
	<ul style="margin-bottom: 0">
		{% for name, amount, unit in fu %}
		<li class="large" style="margin-bottom: 0; line-height: 1.2em">{{ name }}: {{ amount }} {{ unit }}</li>
		{% endfor %}
	</ul>
	<h2 style="margin-bottom: 0">Impact assessment method:</h2>
	<p class="large" style="margin-bottom: 0; line-height: 1.2em">{{ ia_method }}</p>
</div>
<div class="span-8 last">
	<h2>Total score:</h2>
	<p class="large"><span style="font-size: 2.5em; color:#000">{{ '%.2g' % ia_score }}</span> {{ ia_unit }}</p>
</div>
<hr>
<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">{{ '%.2g' % mc_median }}</span> {{ ia_unit }}</p>
	<h2 style="margin-bottom: 0">Average</h2>
	<p class="large"><span style="font-size: 2.5em; color:#000">{{ '%.2g' % mc_mean }}</span> {{ ia_unit }}</p>
	<h2 style="margin-bottom: 0">95% interval</h2>
	<p class="large"><span style="font-size: 2.5em; color:#000">{{ '%.2g' % mc_lower }} - {{ '%.2g' % mc_upper }}</span> {{ ia_unit }}</p>
</div>
<div class="span-17 last" id="ihist"></div>
<hr>
<div class="span-24" id="treemap"></div>
<hr>
<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">{{ '%.2g' % 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">{{ '%.2g' % herfindahl }}</p>
</div>

<script type="text/javascript">
var hinton_data = {{ hinton_data|safe }};
hinton_matrix(hinton_data.results, hinton_data.total, hinton_data.xlabels, hinton_data.ylabels, "#hinton", 560, 560, 10);

var mc_data = {{ mc_data|safe }};
interpolated_histogram(mc_data, "{{ ia_unit }}", {{ mc_median }}, {{ mc_upper }}, {{ mc_lower }}, "#ihist", 680, 300, 10);

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

var treemap = d3.layout.treemap()
    .size([width, height])
    .value(function(d) { return d.size; });

var div = d3.select("#treemap").append("div")
    .style("position", "relative")
    .style("width", width + "px")
    .style("height", height + "px");

var treemap_data = {{ treemap_data|safe }};

var cell_color_scale = d3.scale.category20();

div.data([treemap_data]).selectAll("div")
  .data(treemap.nodes)
.enter().append("div")
  .attr("class", "cell")
  .attr("title", function(d) { return d.children ? null : d.name; })
  .style("font-size", "14px")
  .style("background", function(d, i) { return cell_color_scale(i % 20); }) // d.children ? color(d.name) : null; })
  .call(cell)
  .text(function(d) { return d.children ? null : d.name; });

function cell() {
  this
      .style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
</script>
{% endblock %}