{% extends 'layout.html' %}
{% import '_macros.html' as macros %}
{% block head %}
    <script src="{{ url_for('static', filename='custom-natural-time-delta/natural-time-delta.js') }}"></script>
    <script src="{{ url_for('static', filename='custom-natural/natural.js') }}"></script>
{% endblock head %}

{% 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), data=None, default_length=config.NORMAL_TABLE_COUNT, length_selector=config.TABLE_COUNT_SELECTOR, extra_options=extra_options, fact=fact) }}

{% 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)]);
  }
  bb.generate({
    bindto: '#factChart',
    data: {
        columns: realdata,
        type : '{{config.GRAPH_TYPE|default('pie')}}',
    },
    tooltip: {
        format: {
            value: function(value, ratio, id) {
                return value + ' (' + (ratio * 100).toFixed(1) + '%)';
            }
        }
    }
  });
})
{% endif %}

{% if value %}
try {
    $("#value").html(pretty_print(JSON.parse({{ value_json | tojson }})));
} catch (e) {
    $("#value").html(pretty_print('{{ value_json }}'));
}
{% endif %}

{% endblock onload_script %}

{% block content %}
{% if render_graph %}
<div id="factChart" width="300" height="300"></div>
{% endif %}
<h1>
  {{ fact }}
  {% if is_structured %}<span style="color: #999; font-size: 0.7em; font-weight: normal;">(structured fact)</span>{% endif %}
  {% if value %} : <span id="value"></span>{% endif %}
</h1>
<table id="facts_table" class='ui fixed very basic compact table stackable'>
  <thead>
    <tr>
      <th>Node</th>
      {% if not value %}<th class="fact_value">Value</th>{% endif %}
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
{% endblock content %}
