{% load static %}
<div class="chart">
  <canvas id="metric-detail-chart-{{slug}}"></canvas>
</div>
<script type="text/javascript" src="{% static 'redis_metrics/js/chart.min.js' %}"></script>
<script type="text/javascript">
var ctx = document.getElementById("metric-detail-chart-{{slug}}").getContext("2d");
var options = {animation:false, responsive: true};
var data = {
  labels: [{% for g in granularities %}'{{g|title}}'{% if not forloop.last %},{% endif %}{% endfor %}],
  datasets: [
    {
      label: "Metrics",
      fillColor: "rgba(220,110,110,0.5)",
      strokeColor: "rgba(220,220,220,0.8)",
      highlightFill: "rgba(220,110,110,0.75)",
      highlightStroke: "rgba(220,220,220,1)",
      data: [{% for v in metrics.values %}
        {{ v|default:0 }}{% if not forloop.last %}, {% endif %}{% endfor %}
      ]
    }
  ]
};
var myBarChart = new Chart(ctx).Bar(data, options);
</script>
{% if with_data_table %}
<table>
    <caption><code>{{ slug }}</code> data</caption>
    <thead>
        <tr><th>Time Period</th><th>Value</th></tr>
    </thead>
    <tbody>
    {% for metric, value in metrics.items %}
        <tr>
            <td>{{ metric|title }}</td>
            <td class="value">{{ value|default_if_none:"-" }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
{% endif %}
