{% extends "reports/base.html" %}
{% load reports_tags %}
{% load i18n %}

{% block content %}
<h1>{% trans "New and Renewing Members Over Time" %}</h1>
<div class="corp-mems-wrap">

  <table class="report">
    <tr>
      <td></td>
      <td>{% trans 'Since Date' %}</td>
      <td>{% trans 'New' %}</td>
      <td>{% trans 'Renewal' %}</td>
      <td>{% trans 'Totals' %}</td>
    </tr>
  {% for stat in stats|slice:":5" reversed %}
    <tr>
      <td>{{ stat.time }}</td>
      <td>{{ stat.start_dt }}</td>
      <td>{{ stat.new }}</td>
      <td>{{ stat.renewing }}</td>
      <td>{{ stat.new|add:stat.renewing }}</td>
    </tr>
  {% endfor %}
  </table>

</div>

<div id="chart_div">
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Months');
      data.addColumn('number', 'New');
      data.addColumn('number', 'Renewing');
      data.addRows([
        {% for stat in stats|slice:":5" reversed %}
          {% if not forloop.last %}
          ['{{ stat.time }}', {{ stat.new }}, {{ stat.renewing }}],
          {% else %}
          ['{{ stat.time }}', {{ stat.new }}, {{ stat.renewing }}]
          {% endif %}
        {% endfor %}
      ]);
      var options = {
        width: 1000, height: 500,
        //hAxis: {title: 'Since x Months'},
        vAxis: {title: 'Members'}
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</div>

{% endblock content %}