{% 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 Location" %}
  <a class="btn btn-sm btn-outline-secondary" href="{% url 'LocationPerformanceCSV' %}">{% trans "Download Data" %}</a>
</h3>

<div class="card">

  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a href="#" data-startDate="{{ limitMonthDates.12 }}" class="nav-link showLocationButton active">{% trans "Last 12 Months" %}</a>
      </li>
      <li class="nav-item">
        <a href="#" data-year="{{ prior_year }}" class="nav-link showLocationButton">{% trans "All Time" %}</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div id="LocationPerformance"></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(){

  var locationPerformanceChart = c3.generate({
      bindto: '#LocationPerformance',
    data: {
      url: "{% url 'LocationPerformanceJSON' %}?startDate={{ limitMonthDates.12 }}",
      mimeType: 'json',
      type: 'bar',
      keys: {
        x: 'name',
        value: ['series','registrations']
      },
      axes: {
        series: 'y',
        registrations: 'y2',
      }
    },
    axis: {
        labels: {
          y: '{% trans "# Series" %}',
          y2: '{% trans "# Registrations" %}',
        },
        x: {
            type: 'category' // this needed to load string x value
        },
        y2: {
          show: true,
        },
    },
  });



  $(".showLocationButton").click(function(event) {
      var startDate = $(this).attr('data-startDate');

      locationPerformanceChart.load({
        url: "{% url 'LocationPerformanceJSON' %}?startDate=" + startDate,
        mimeType: 'json',
        unload: true,
        type: 'bar',
        keys: {
          x: 'name',
          value: ['series','registrations']
        },
        axes: {
          series: 'y',
          registrations: 'y2',
        },
      });
      $('.showLocationButton').removeClass('active');
      $(this).addClass('active');
      event.preventDefault();
  });


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