{% extends 'common/base.html' %}

{% block javascripts %}
<script src="/static/js/d3.min.js"></script>
<script src="/static/js/nv.d3.min.js"></script>
<link rel="stylesheet" href="/static/css/nv.d3.css">
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="row">
    {% include 'navigation/reports/sidebar.html' %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <h2>Basic reports</h2>
      <h3>Hosts by locations</h3>
      <div id="hosts_by_locations_pie" style="height: 620px;">
        <svg style="width: 100%; height: 100%"></svg>
      </div>
      <script type="text/javascript">
        nv.addGraph(function() {
        var chart = nv.models.pieChart()
            .x(function(d) { return d.label })
            .y(function(d) { return d.value })
            .showLabels(true);

          d3.select("#hosts_by_locations_pie svg")
              .datum(hosts_by_locations_data())
              .transition().duration(350)
              .call(chart);

        return chart;
        });

        function hosts_by_locations_data() {
          return  [
              {% for location in locations %}
              {
                'label': "{{ location.shortname }}",
                'value': {{ location.inventory_objects.all|length }}
              },
              {% endfor %}
            ];
        }
      </script>
    </div>
  </div>
</div>
{% endblock %}