{% load redis_metrics_filters %}
{% load static %}

{% comment %}

NOTE: This template gets a `metric_history` context that's organized like so:

  metric_history = {
      'periods': ['y:2012', 'y:2013', 'y:2014']
      'data': [
        {
          'slug': 'bar',
          'values': [1, 2, 3]
        },
        {
          'slug': 'foo',
          'values': [4, 5, 6]
        },
  }

{% endcomment %}

<div class="chart">
  <canvas id="{{chart_id}}"></canvas>
</div>
<script type="text/javascript" src="{% static 'redis_metrics/js/zepto.min.js' %}"></script>
<script type="text/javascript" src="{% static 'redis_metrics/js/chart.min.js' %}"></script>
<script type="text/javascript" src="{% static 'redis_metrics/js/colors.js' %}"></script>
<script type="text/javascript">
var ctx = document.getElementById("{{chart_id}}").getContext("2d");
var options = {
  animation:false,
  responsive: true,
  legend: {display:false},
  scales: {
    yAxes: [{stacked: true}]
  }
};
var data = {
  labels: {{metric_history.periods|json}},
  datasets: [
    {% for d in metric_history.data %}
    {% with counter=forloop.counter0 %}
    {
        label: '{{d.slug}}',  {# the metric key, eg. time period #}
        backgroundColor: DefaultColor({{counter}}).fillColor,
        borderColor: DefaultColor({{counter}}).fillColor,
        hoverBackgroundColor: DefaultColor({{counter}}).highlightFill,
        hoverBorderColor: DefaultColor({{counter}}).highlightFill,
        pointBackgroundColor: DefaultColor({{counter}}).fillColor,
        pointBorderColor: "#fff",
        pointHoverBackgroundColor: DefaultColor({{forloop.counter0}}).highlightFill,
        pointHoverBorderColor: "#eee",
        data: {{ d.values|json }}
    }{% if not forloop.last %},{% endif %}
    {% endwith %}
    {% endfor %}
  ]
};
var chart = new Chart(ctx, {
  type:'line',
  data: data,
  options: options
});
</script>
<hr style="clear:both;"/>

{% if with_data_table %}
<table class="table table-striped" style="overflow:scroll">
    <caption>
      {{ granularity|title }} metrics {% if since %}since {{ since }}{% endif %}
    </caption>
    <thead>
      <tr>
        <th>Metric</th>
        {% for period in metric_history.periods %}
          <th>{{ period }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
    {% for item in metric_history.data %}
      <tr>
        <td><code>{{ item.slug }}</code></td>
        {% for value in item.values %}
          <td>{{ value|default:"-" }}</td>
        {% endfor %}
      </tr>
    {% endfor %}
    </tbody>
</table>
{% endif %}
