{% load sekizai_tags static i18n %}

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

<h2>{% trans "Performance By Location" %}
  <a class="btn btn-xs btn-default" href="{% url 'LocationPerformanceCSV' %}">{% trans "Download Data" %}</a>
</h2>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" data-startDate="{{ limitMonthDates.12 }}" class="btn btn-default active showLocationButton">{% trans "Last 12 Months" %}</button>
  <button type="button" class="btn btn-default showLocationButton">{% trans "All Time" %}</button>
</div>


<div id="LocationPerformance"></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');
  });


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