{% load static %}
{% comment %}

Context for this Template:

    * ``chart_id`` -- the id attribute used for the <canvas> element
    * ``slugs`` -- a set of slugs for the metrics that we want to aggregate.
    * ``with_data_table`` -- True or False; whether or not to show raw metric
      data in a table.
    * ``metrics`` -- the metric data. It's a list of two-tuples that looks
      something like this::

    [
      ('foo', {
          'seconds': 0, 'minutes': 0, 'hours': 4, 'day': '42',
          'month': '90', 'week': '50', 'year': '9991'
      }),
      ('bar', {
          'seconds': 0, 'minutes': 0, 'hours': 4, 'day': '42',
          'month': '10', 'week': '5',  'year': '90'
      })
    ]

{% 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,};
var data = {
  labels: ['Seconds', 'Minutes', 'Hours', 'Day', 'Week', 'Month', 'Year'],
  datasets: [
    {% for s,d in metrics %}
    {
      label: "{{ s }}",
      fillColor: Color({{forloop.counter0}}).fillColor,
      strokeColor: Color({{forloop.counter0}}).strokeColor,
      highlightFill:Color({{forloop.counter0}}).highlightFill,
      highlightStroke:Color({{forloop.counter0}}).highlightStroke,
      data: [
        {{ d.seconds|default_if_none:0 }},
        {{ d.minutes|default_if_none:0 }},
        {{ d.hours|default_if_none:0 }},
        {{ d.day|default_if_none:0 }},
        {{ d.week|default_if_none:0 }},
        {{ d.month|default_if_none:0 }},
        {{ d.year|default_if_none:0 }},
      ]
    }{% if not forloop.last %},{% endif %}
    {% endfor %}
  ]
};
var chart = new Chart(ctx).Bar(data, options);
$("div.chart").append(chart.generateLegend());
</script>

{% if with_data_table %}
<table>
    <caption>Metric Data for <code>{{ slugs|join:", " }}</code></caption>
    <thead>
        <tr><th>Metric</th><th>Time Period</th><th>Value</th></tr>
    </thead>
    <tbody>
    {% for slug, metric_dict in metrics %}
        {% for period, value in metric_dict.items %}
            <tr>
            <td><code>{{ slug }}</code></td>
            <td>{{ period|capfirst }}</td>
            <td class="value">{{ value|default_if_none:"-" }}</td>
            </tr>
        {% endfor %}
    {% endfor %}
    </tbody>
    </table>
{% endif %}