{% extends widget.get_base_template %}

{% block content %}
<div id="forcedirectedgraph_{{ widget.fe_identifier }}" class="forcedirected-graph"></div>
<script>

function redraw_forcedirectedgraph_{{ widget.id }}(){
  var placeholder = '#forcedirectedgraph_{{ widget.fe_identifier }}';
  var parent_box = $(placeholder).parent();
  width = parent_box.width();
  d3.select(placeholder+" svg").remove();
  force_directed_graph({
    'width': width,
    'height': width,
    'gravity': {{ widget.gravity }},
    'distance': {{ widget.distance }},
    'charge': {{ widget.charge }},
    'placeholder': placeholder,
    'data_source': "{{ widget.get_data }}"
  });
}

$(document).ready(function() {
  redraw_forcedirectedgraph_{{ widget.id }}();
  window.addEventListener("resize", redraw_forcedirectedgraph_{{ widget.id }});
});

</script>
{% endblock %}
