{% load sekizai_tags static i18n %}

{% addtoblock "css" %}
  <link href="{% static 'c3/c3.min.css' %}" rel="stylesheet" type="text/css">
{% endaddtoblock %}


<h3 class="mt-4">{% trans "Performance by Class Type and Month (Student-Hours)" %}</h3>

<div class="card">

  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      {% for prior_year in recentYears reversed %}
        <li class="nav-item">
          <a href="#" data-year="{{ prior_year }}" class="nav-link classTypeMonthlyButton {% if forloop.first %}active{% endif %}">{{ prior_year }}</a>

        </li>
      {% endfor %}
    </ul>
  </div>
  <div class="card-body">
    <div id="ClassTypeMonthlyPerformance"></div>
  </div>
</div>

{% addtoblock "js" %}
  <script src="{% static 'd3/d3.min.js' %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
  <script src="{% static 'c3/c3.min.js' %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
<script type="text/javascript">
$(document).ready(function(){

  // This function allows the classTypeMonthly chart to dynamically
  // update which series are displayed.
  function getClassTypeMonthlyJSON(url) {
    d3.json(url, function(data) {
        var keys = Object.keys(data[0]);
        keys.splice(keys.indexOf("month_name"),1);
        keys.splice(keys.indexOf("month"),1);

        // Get totals for sorting of keys
        var totals = $.grep(data, function(e){ 
             return e.month == "Totals"; 
        });

        // Remove Totals from final data
        var data = $.grep(data, function(e){ 
             return e.month != "Totals"; 
        });

        // Sort the keys in reverse by the annual totals
        keys.sort(function(a,b) {
            var totalA = totals[0][a];
            var totalB = totals[0][b];

            if (totalA > totalB) return -1;
            if (totalA < totalB) return 1;
            return 0;
        });

        var classTypeMonthlyChart = c3.generate({
            bindto: '#ClassTypeMonthlyPerformance',
          data: {
            json: data,
            type: 'bar',
            keys: {
              x: 'month_name',
                value: keys,
            }
          },
          axis: {
              x: {
                  type: 'category' // this needed to load string x value
              }
          }
        });
    });

  }

  getClassTypeMonthlyJSON("{% url 'ClassTypeMonthlyJSON' %}?typeLimit=4&series=studenthours");

  $('.classTypeMonthlyButton').click(function(e){
      var year = $(this).attr('data-year');
      
      getClassTypeMonthlyJSON("{% url 'ClassTypeMonthlyJSON' %}?typeLimit=4&series=studenthours&year=" + year);

      $('.classTypeMonthlyButton').removeClass('active');
      $(this).addClass('active');
      e.preventDefault();
  });

});
</script>
{% endaddtoblock %}
