{% 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>Since Date</td>
      <td>New</td>
      <td>Renewal</td>
      <td>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 %}
  </tr></table>

</div>

{% endblock content %}

  <div id="chart_div"></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.start_dt }}', {{ stat.new }}, {{ stat.renewing }}],
          {% else %}
          ['{{ stat.start_dt }}', {{ stat.new }}, {{ stat.renewing }}]
          {% endif %}
        {% endfor %}
      ]);
      var options = {
        width: 1000, height: 500,
        hAxis: {title: 'Since X Month'},
        vAxis: {title: 'Members'}
      };

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