{% macro viz_html(viz) %}
<div id="{{ viz.token }}" style="height:100%; width: 100%">
  <img src="{{ url_for("static", filename="loading.gif") }}" class="loading">
  <div class="chart" style="height:100%; width: 100%"></div>
</div>
{% endmacro %}

{% macro viz_js(viz) %}
<script>
  $( document ).ready(function() {
    Highcharts.setOptions({
      colors: [
      "#FF5A5F", "#007A87", "#7B0051", "#00D1C1", "#8CE071", "#FFB400",
      "#FFAA91", "#B4A76C", "#9CA299", "#565A5C"
      ],
      global: {
        useUTC: false
      },
    });
    var token = $("#{{ viz.token }}");
    var loading = $("#{{ viz.token }}").find("img.loading");
    var chart = $("#{{ viz.token }}").find("div.chart");
    var refresh = function(){ 
      chart.hide();
      loading.show();
      var url = "{{ viz.get_url(json="true")|safe }}";
      $.getJSON(url, function(data){
        chart.width(token.width());
        chart.height(token.height()-40);
        chart.highcharts('{{ viz.chart_call }}', data);
        chart.show();
        token.find("img.loading").hide();
      })
      .fail(function(xhr) {
        var err = '<div class="alert alert-danger">' + xhr.responseText  + '</div>';
        loading.hide();
        chart.show();
        chart.html(err);
      });
    };
    refresh();
    token.parent().find("a.refresh").click(refresh);
  });
</script>
{% endmacro %}

{% macro viz_css(viz) %}
{% endmacro %}
