{% extends "index-base.html" %}


{% block header %} Stats  {% endblock %}

{% block inner_content %}

  <br>
    <div class="panel">
      <div class="panel-header">Post Activity Per Week</div>
      <div id="posts_week"></div>
    </div>
    <div class="panel">
      <div class="panel-header">Cumulative Number of Posts in the Repo</div>
      <div id="posts_cum"></div>
    </div>
    <div class="panel">
      <div class="panel-header">Pageviews per Week</div>
      <div id="pageviews_weeks"></div>
    </div>
    <div class="panel">
      <div class="panel-header">Pageviews per Day</div>
      <div id="pageviews_daily"></div>
    </div>
  </br>




{% endblock %}

{% block scripts %}
{{ super () }}
<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 height = 500;
  var hAxisOpts = {format: 'y-MM-dd', slantedText:true, slantedTextAngle: 40, title:'Date'}

  // Daily PageViews
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Day');
  data.addColumn('number', 'Pageviews');
  data.addRows([
          {%- for k, v in daily_pageviews.items() %}
          [new Date({{ k.year }}, {{ k.month }}, {{ k.day }}), {{ v }}],
          {%- endfor %}
  ]);
  data.sort(0);
  var chart = new google.visualization.LineChart(document.getElementById('pageviews_daily'));
  chart.draw(data, {vAxis: {baseline: 0, viewWindow: {max:750}},
                    colors: ['#ff5a5f'],
                    height: height,
                    hAxis: hAxisOpts});

  // Weekly Posts
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Week');
  data.addColumn('number', 'Created_at');
  data.addColumn('number', 'Updated_at')
  data.addRows([
          {%- for k, v in weekly_posts_created_and_updated.items() %}
          [new Date({{ k.year }}, {{ k.month }}, {{ k.day }}), {{ v[0]}}, {{ v[1] }}],
          {%- endfor %}
  ]);
  data.sort(0);
  var chart = new google.visualization.LineChart(document.getElementById('posts_week'));
  chart.draw(data, {vAxis: {baseline: 0},
                    colors: ['#ff5a5f','#ffb400'],
                    height: height,
                    hAxis: hAxisOpts});

  // Weekly Posts Cumulative
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Week');
  data.addColumn('number', '# Posts')
  data.addRows([
          {%- for k, v in weekly_cumulative_posts.items() %}
          [new Date({{ k.year }}, {{ k.month }}, {{ k.day }}), {{ v }}],
          {%- endfor %}
  ]);
  data.sort(0);
  var chart = new google.visualization.LineChart(document.getElementById('posts_cum'));
  chart.draw(data, {vAxis: {baseline: 0},
                    colors: ['#ff5a5f'],
                    height: height,
                    hAxis: hAxisOpts});

  // Weekly PageViews
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Week');
  data.addColumn('number', 'Pageviews');
  data.addRows([
          {%- for k, v in weekly_pageviews.items() %}
          [new Date({{ k.year }}, {{ k.month }}, {{ k.day }}), {{ v }} ],
          {%- endfor %}
  ]);
  data.sort(0);
  var chart = new google.visualization.LineChart(document.getElementById('pageviews_weeks'));
  chart.draw(data, {vAxis: {baseline: 0},
                    colors: ['#007a87'],
                    height: height,
                    hAxis: hAxisOpts});

}

function search(s){
  window.location = '/feed?filters=' + $('#searchbar').val()
}

</script>

{% endblock %}
