{% load sekizai_tags static i18n %}

{% addtoblock "css" %}
  <style type="text/css" scoped>
    .c3-line-MonthlyAverage {
        stroke-width: 3px;
    }
  </style>
{% endaddtoblock %}
{% addtoblock "css" %}
  <link href="{% static 'c3/c3.min.css' %}" rel="stylesheet" type="text/css">
{% endaddtoblock %}

<h3 class="mt-4">{% trans "Students By Month of the Year" %}
  <a class="btn btn-sm btn-outline-secondary" href="{% url 'MonthlyPerformanceCSV' %}">{% trans "Download Data" %}</a>
</h3>

<p>{% blocktrans %}Which months of the year are the most successful?  Click the legend at the bottom to show/hide previous years.{% endblocktrans %}</p>

<div class="card">

  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a href="#" class="nav-link active monthlyPerformanceButton" data-series="SeriesRegistrations">{% trans "Total Series Registrations" %}</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link monthlyPerformanceButton" data-series="Registrations">{% trans "Total Registrations (unique students)" %}</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link monthlyPerformanceButton" data-series="Hours">{% trans "Total Hours of Class" %}</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link monthlyPerformanceButton" data-series="StudentHours">{% trans "Total Student-Hours" %}</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link monthlyPerformanceButton" data-series="AvgStudents">{% trans "Avg. Students/Hour" %}</a>
      </li>
    </ul>
  </div>
  <div class="card-body">

    <div id="MonthlyPerformance"></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(){

  // Create the base monthly performance chart, then load the JSON data in
  var monthlyPerformanceChart = c3.generate({
    bindto: '#MonthlyPerformance',
    data: {
      url: "{% url 'MonthlyPerformanceJSON' %}",
      mimeType: 'json',
      hide: ['{{ allYears.0 }}','{{ allYears.1 }}','{{ allYears.2 }}','{{ allYears.3 }}','{{ allYears.4 }}'],
      keys: {
        x: 'month_name',
        value: ['MonthlyAverage','{{ allYears|join:"','" }}'],
      }
    },
    axis: {
      x: {
        type: 'category' // this needed to load string x value
      }
    }
  });

  $('.monthlyPerformanceButton').click(function(e){
    var series = $(this).attr('data-series')

    monthlyPerformanceChart.load({
        unload: true,
        url: "{% url 'MonthlyPerformanceJSON' %}?series=" + series,
        mimeType: 'json',
        hide: ['{{ allYears.0 }}','{{ allYears.1 }}','{{ allYears.2 }}','{{ allYears.3 }}','{{ allYears.4 }}'],
        keys: {
          x: 'month_name',
          value: ['MonthlyAverage','{{ allYears|join:"','" }}']
        }
    });

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

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