{% extends TEMPLATE_BASE|default:"content_base.html" %}

{% load static compress %}

{% block nav_document_cls %} navigation__sub--active{% endblock %}

{% block page_title %}
"{{ document.metadata.name|default:document.name }}" visualization
{% endblock %}

{% block title %}
"{{ document.metadata.name|default:document.name }}" visualization
{% endblock %}

{% block actions %}
<a href="{% url 'document:document_list' %}" class="btn btn-sm btn-outline-primary">Visualizations</a>
{% endblock %}

{% block content %}
<div class="row">
  {% for widget_name, widget in document.widgets.items %}
  <div class="{{ widget.width }}">
    <div class="card card-widget border-primary h-100">
      <div class="card-body">
        <h4 class="card-title">{{ widget.name|default:widget_name }}</h4>
        <ul class="list-inline card-actions">
          {% if widget.data_source.default.type == 'relational' %}
          <li>
            <a href="#"  data-zoom="+1" id="{{ widget_name }}-zoom-in" title="Zoom in">
              <i class="fa fa-plus-circle"></i>
            </a>
          </li>
          <li>
            <a href="#" data-zoom="-1" id="{{ widget_name }}-zoom-out" title="Zoom out">
              <i class="fa fa-minus-circle"></i>
            </a>
          </li>
          {% endif %}
          <li>
            <a href="#" id="{{ widget_name }}-fullscreen" role="button" title="Toggle fullscreen">
              <i class="fa fa-expand"></i>
            </a>
          </li>
        </ul>
        <div class="{{ widget.chart }} plot-container text-center" id="chart-{{ widget_name }}"></div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}

{% block sidebar %}
<ul class="list-group mb-3">
  <li class="list-group-item">Resources<span class="badge" id="plotResources">N/A</span></li>
  <li class="list-group-item">Relations<span class="badge" id="plotRelations">N/A</span></li>
</ul>
<div class="card">
  <div id="resource-detail" class="card-body">
    <div>No resource selected.</div>
  </div>
<div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'billboard.js/dist/billboard.js' %}"></script>
<script src="{% static 'd3-horizon-chart/build/d3-horizon-chart.js' %}"></script>
<script src="{% static 'architect-document/js/d3-gauge.js' %}"></script>
<script src="{% static 'skd3/build/sk.d3.js' %}"></script>
<script src="{% static 'architect-document/js/d3.layout.hive.js' %}"></script>
<script src="{% static 'architect-document/js/d3.layout.matrix.js' %}"></script>
<script src="{% static 'architect-document/js/d3.utils.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.arc.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.area.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.bar.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.bundle.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.force.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.gauge.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.hive.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.horizon.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.line.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.matrix.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.pack.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.pie.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.sankey.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.sunburst.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.tree.js' %}"></script>
<script src="{% static 'architect-document/js/d3.plot.treemap.js' %}"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
  console.log('Page DOM loaded.');

  /*
  var changeDetailBox = function (node) {
    var detailBoxTemplate = '<ul class="collection">' +
     '<li class="collection-item">Name<span class="badge">{name}</span></li>' +
     '<li class="collection-item">Kind<span class="badge">{kind}</span></li>' +
     '</ul>';
    $('#resource-detail').html(detailBoxTemplate.formatTemplate({
      name: node.name,
      kind: node.kind
    }));
  };
  */

  {% for widget_name, widget in document.widgets.items %}

  $("#{{ widget_name }}-fullscreen").click(function (e) {
    e.preventDefault();  
    var $this = $(this);
    if ($this.children('i').hasClass('fa-expand'))
    {
      $this.children('i').removeClass('fa-expand');
      $this.children('i').addClass('fa-compress');
    }
    else if ($this.children('i').hasClass('fa-compress'))
    {
      $this.children('i').removeClass('fa-compress');
      $this.children('i').addClass('fa-expand');
    }
    $(this).closest('.card').toggleClass('card-fullscreen');
  });

  $("#chart-{{ widget_name }}")
    .height({{ widget.height|default:1 }} * $("#chart-{{ widget_name }}").width());

  {% endfor %}


  var src = {};
  var sel = {};
  var upd = {};

  {% for widget_name, widget in document.widgets.items %}
  src['{{ widget_name }}'] = "/{% if widget.data_source.default.type == 'relational' %}manager{% else %}monitor{% endif %}/v1/{{ widget.data_source.default.source }}/query/{{ widget.data_source.default.query }}";
  sel['{{ widget_name }}'] = "#chart-{{ widget_name }}";
  upd['{{ widget_name }}'] = {{ widget.update_interval|default:600 }};
  {% endfor %}

  {% for widget_name, widget in document.widgets.items %}
  {% if widget.chart == 'hive' %}
  d3.json(src['{{ widget_name }}'], function(data) {
    HivePlot.init(sel['{{ widget_name }}'], data, {selector: sel['{{ widget_name }}']});
  });
  {% elif widget.chart == 'arc' %}
  new RelationalPlot.arc(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'force' %}
  new RelationalPlot.forceDirected(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'matrix' %}
  new RelationalPlot.adjacencyMatrix(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'circle-pack' %}
  new RelationalPlot.circlePack(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'edge-bundle' %}
  new RelationalPlot.hierarchicalEdgeBundling(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'sunburst' %}
  new RelationalPlot.sunburst(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'treemap' %}
  new RelationalPlot.treeMap(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'tree' %}
  new RelationalPlot.tree(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'sankey' %}
  new RelationalPlot.sankeyDiagram(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'bar-chart' %}
  new QuantitativePlot.barChart(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'line-chart' %}
  new QuantitativePlot.lineChart(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'stacked-chart' %}
  new QuantitativePlot.stackedAreaChart(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'pie' %}
  new QuantitativePlot.pieChart(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'donut' %}
  new QuantitativePlot.donutChart(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'horizon' %}
  new QuantitativePlot.horizonChart(src['{{ widget_name }}'], sel['{{ widget_name }}'], upd['{{ widget_name }}']).init();
  {% elif widget.chart == 'composite' %}
  d3.xml("{{ widget.background.url }}").mimeType("image/svg+xml").get(function(error, xml) {
     if (error) throw error;
     d3.select(sel['{{ widget_name }}']).node().appendChild(xml.documentElement);
  });
  {% endif %}{% endfor %}
});

</script>
{% endblock %}