{% extends 'layout.html' %}
{% import '_macros.html' as macros %}

{% block onload_script %}
{% macro extra_options(caller) %}
  // No per page AJAX
  'serverSide': false,
{% endmacro %}
{{ macros.datatable_init(table_html_id="facts_table", ajax_url=url_for('fact_ajax', env=current_env, fact=fact, value=value), default_length=config.NORMAL_TABLE_COUNT, length_selector=config.TABLE_COUNT_SELECTOR, extra_options=extra_options) }}

{% if render_graph %}
table.on('xhr', function(e, settings, json){
  var fact_values = json['chart'].map(function(item) { return [item.label, item.value]; }).filter(function(item){return item[0];}).sort(function(a,b){return b[1] - a[1];});
  var realdata = fact_values.slice(0, 15);
  var otherdata = fact_values.slice(15);
  if (otherdata.length > 0) {
    realdata.push(["other", otherdata.reduce(function(a,b){return a + b[1];},0)]);
  }
  c3.generate({
    bindto: '#factChart',
    data: {
        columns: realdata,
        type : '{{config.GRAPH_TYPE|default('pie')}}',
    }
  });
})
{% endif %}
{% endblock onload_script %}

{% block content %}
{% if render_graph %}
<div id="factChart" width="300" height="300"></div>
{% endif %}
<h1>{{ fact }}{% if value_safe %} : {{ value_safe }}{% endif %}</h1>
<table id="facts_table" class='ui fixed very basic compact table stackable'>
  <thead>
    <tr>
      <th>Node</th>
      {% if not value %}<th>Value</th>{% endif %}
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
{% endblock content %}
